Design System by Bryan SellersDesign System by Bryan Sellers
Design SystemBryan Sellers
Design System

What's included

Foundation & Elements
Design Principles: Core guidelines that inform all design decisions. Color Palette: Primary and secondary colors with respective codes (HEX, RGB, CMYK, etc.). Typography: Font families, weights, sizes, line heights, and usage guidelines. Iconography: Set of consistent icons for common actions or items. Spacing & Layout: Guidelines on margins, padding, grid systems, and layout structures. Breakpoints: Definitions for how the design will adapt across different screen sizes. UI Components: Buttons: Different states (default, hover, active, disabled) and sizes. Input Fields: Textboxes, dropdowns, checkboxes, radio buttons, sliders, toggles, etc. Navigation: Menus, breadcrumbs, pagination, tabs. Cards: Different variations for content presentation. Modals & Pop-ups: Different styles and purposes. Notifications: Alerts, badges, toasts. Tooltips: Styles and usage guidelines. Patterns and Templates: Form Design: Guidelines for effective form design, validation, submission. List Views: Different layouts for presenting lists or grids of items. Navigation Patterns: Sidebars, top bars, mega menus. Empty States: Design and content recommendations for no data scenarios. Error States: Design and messaging for various error situations. Documentation: Component Usage: When and how to use specific components. Best Practices: Tips and tricks to follow for optimal design consistency. Content Guidelines: Tone, voice, grammar, and vocabulary recommendations. Accessibility Guidelines: Instructions for ensuring designs are accessible to all users. Implementation Guide: For developers, detailing component code, variants, and behaviors.
Contact for pricing
Tags
Figma
Product Designer
UX Designer
Visual Designer
Service provided by
Bryan Sellers San Francisco, USA
Design SystemBryan Sellers
Contact for pricing
Tags
Figma
Product Designer
UX Designer
Visual Designer
Design System

What's included

Foundation & Elements
Design Principles: Core guidelines that inform all design decisions. Color Palette: Primary and secondary colors with respective codes (HEX, RGB, CMYK, etc.). Typography: Font families, weights, sizes, line heights, and usage guidelines. Iconography: Set of consistent icons for common actions or items. Spacing & Layout: Guidelines on margins, padding, grid systems, and layout structures. Breakpoints: Definitions for how the design will adapt across different screen sizes. UI Components: Buttons: Different states (default, hover, active, disabled) and sizes. Input Fields: Textboxes, dropdowns, checkboxes, radio buttons, sliders, toggles, etc. Navigation: Menus, breadcrumbs, pagination, tabs. Cards: Different variations for content presentation. Modals & Pop-ups: Different styles and purposes. Notifications: Alerts, badges, toasts. Tooltips: Styles and usage guidelines. Patterns and Templates: Form Design: Guidelines for effective form design, validation, submission. List Views: Different layouts for presenting lists or grids of items. Navigation Patterns: Sidebars, top bars, mega menus. Empty States: Design and content recommendations for no data scenarios. Error States: Design and messaging for various error situations. Documentation: Component Usage: When and how to use specific components. Best Practices: Tips and tricks to follow for optimal design consistency. Content Guidelines: Tone, voice, grammar, and vocabulary recommendations. Accessibility Guidelines: Instructions for ensuring designs are accessible to all users. Implementation Guide: For developers, detailing component code, variants, and behaviors.
Contact for pricing