The Full Beauty Brands Digital Design System is a live website that will be the single source of truth for development, design patterns, and best practices.
The FBB Digital Design System comprises a universal pattern and design library consisting of colors, icons, components, logos and fonts. Each brand has their own pattern library which inherits core aspects from the universal library, but applies that brand’s specific color scheme and fonts in specific areas.
Think of it like a milkshake. All milkshakes are 80% vanilla. The additional 20% is what gives a milkshake a particular flavor. The same principle applies here. All brands will utilize the same patterns, styles and codebase. Each brand is individualized by styling specific elements only.
About
The Design System is built on bootstrap 4. The design thinking is inherited from Material Design. The FBB Design System should be considered additional documentation to bootstrap 4 and Material Design. Developers must have a strong understanding of the bootstrap library and documentation before using and applying the FBB Design System.
Developer Usage
This Pattern Library will be single source of truth for components, logos, colors, et al. Code and guidelines on usage will be available for every component. It is expected that developers use these exact components and follow these guidelines for all elements.
The parent design and pattern library starts in an Adobe XD cloud document. When changes are made and approved by the UX team, those changes will be communicated to the development team and built into this FBB Design System.
To use elements from this library, developers should inspect the elements using their Developer Tools (Option + ⌘ + J on your Chrome browser for macOS) to inspect what markup (including classes) they can use to add one of the Design System Elements to a page.
Please, refrain from inspecting elements in their hover or focused state, as these have been customized in order to visually represent those respective states.
Accessibility is built into the design system and any application of the design system must meet a AA WCAG standard. (AA=min and AAA =ideal). Developers, Testers, Designers and Brand Owners are responsible to ensure we remain ADA compliant to at least an AA level. Use this ADA documentation to ensure we meet those standards.