Problem
There is a lack of consistent and repetitive design work, poor collaboration, and slow development cycles. Different designers and developers often create variations of the same UI elements, which leads to a fragmented user experience.
Solution
Design and build an enterprise design system to ensure UI consistency across all channels. Documenting design decisions that can be replicated at scale costs organizations time and money. The key goal is to prevent duplication of efforts, leading to a better overall quality of work at efficient speeds.
Evolution
Attending an Event Apart conference in 2013, founded by the web design pioneer, Jeffery Zeldman. Brad Frost presented on design systems and atomic design. Inspiring me and altering my approach to design.
Since then, I have built and rebuilt what is now known as the FYBR Design System in various programs, from Adobe Photoshop, Adobe XD, and most recently, Figma
Logos
Color
Accessibility
This is a list of color combinations of our color pallet that passes WCAG 2.0 color contrast guidelines.
Combinations displayed here pass whether the AAA, AA or AA large WCAG performance levels for contrast. AAA and AA combinations are safe to use at any type size. AA Large combinations (18.6px or above) are safe for large text.
For more details on appropriate color contrast, see the WCAG description. https://colourcontrast.cc/
Typography
Imagery
Iconography
Grid System
Scale = 4px, Border =2px
UI
Marketing
