UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account?
Style UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Sign In with your EightShapes account Email Address Sign In Password Forgot password? Don’t have an account? Sign up now. Create an account
Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Pag
Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer
Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer Engineer Sign In Page Create Account Page Forgot Password Engineer 2
Password? First Name Sign In Elaborating on a header Don't have an account? 36 Teams!!! P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
P P P P P P P P P P P P P P P P P P P P P P P P P P P P 36 S Brand Identity Aa Typography Color Iconography B Sets a tone of messaging, principles, and almost always a starting point of:
Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team System Team Supporting a Product Community 18 Design Assets Guidelines Code Reference Code D C
Non-adopter P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P S B P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
Non-adopter P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P S B P P P P P P P P P P P P P P P P P P P P 9 5 7 Adopting Design Systems http://bit.ly/8s-adopting-systems TAKEAWAY Establish models and tools to monitor adoption across the portfolio.
20 : Deprecation Period (Includes Support, Fixes) …and require support across generations 29 “Responsive Library” Bootstrap Design System Design System v2 ☠ ☠ ☠ ☠ : End of Life
• 1.4.11 For active controls such as buttons and form fields: any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast Primary
Positioning New vs Old Generations 43 Primary Ghost DON’T Mandate next generation tools for everyone to use immediately NOW! DO Position next generation tools for anything “NET NEW” NEW
System 3 46 P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P .com Product Enterprise (Intranet) P P P 15 30 35
systems are a collective pursuit. Team 1 needs empathy for Group 2’s ecosystem (Training, Relationships…) Team 2 will need to concede some opportunities in favor of stability.
Nothing Keep Both, Start Sharing Retire One, Use the Other Replace Both P 20 P 20 S S S P 20 P 20 ☠ S S S P 20 P 20 P 20 P 20 S ☠ ☠ 5 Replace One, Start Sharing S P 20 P 20 S ☠ S
P 20 P 20 ☠ S S S P 20 P 20 P 20 P 20 S ☠ ☠ S P 20 P 20 S ☠ S Current System (Re)Production Product Migration NONE NONE MEDIUM VERY HIGH MEDIUM Redundant Maintenance HIGH HIGH NONE NONE HIGH 1 2 3 4 5 HIGH HIGH LOW MEDIUM NONE
Community Balance Visibility and Control using Permissions System Edit: Only System Team View: Entire Design Community 67 Target.com’s Nicollet Design System uses Lingo App to distribute Sketch library assets that are: Tier 2 Tier 2 Tier 2 Tier 2 Tier 2 Used with Permission Core Core Core
S S S S S D Group Kit 1 D Group Kit 2 C Group Kit 3 WITHIN GROUPS ACROSS GROUPS C Editor Kit C Nav Kit 69 P 15 P 10 P 5 P 50 D C Core Kit Example: Online Software CORE PRODUCTS ACROSS GROUPS WITHIN GROUPS Design System Tiers bit.ly/8s-system-tiers