Case studies
Services
Blog
Team
Contact
Parts of Design System Exercise
Explore and understand different parts of a design system through this interactive exercise.
1 of 3: Cross out 5
irrelevant
categories.
Cross out 5 more
Design Guidelines
Design Philosophy
Component design
Componentizing
Components in Figma
Auto layout
Naming
UI elements
Layers
Cross-panel design
Guidelines
Custom vs Native
Foundation
Design tokens
Tokens types
Naming convention
Tokens tooling
Examples
Color
Principles
Palettes
Contrast
Meaning
Swatches
Accessibility
Typography
Headings
Weights / types
Web fonts
Baseline grid
Responsive text
Iconography
Icons
Illustration
Alignment
Motion
Concept
Timing
Types
Transitions
Availability
Space
Units / measurments
Metrics and keylines
Structure
Border radius
UI elements
Paragraph
Lead paragraph
Block quote
Headers (H1 - H6)
Lists
Links
Code
Divider / rule
Buttons
Primary
Secondary
Button groups
Menu buttons
Split buttons
FAB (floating action)
Image
Block
Full bleed
Inline with positions
Circled
Form controls
Text
Input
Text area
Radio
Checkbox
Select
File upload
Labels
Floating labels
Microcopy
Required
Validation
UI components
Action bar/sheet
Back to top
Badge
Breadcrumbs
Calendar picker
Caption
Cards
Chat (live)
Code block
Comments
Contact us
Cookie notification
Data tables
Dialog
Drawer/accordion
Filters
Footer
Footnotes
Header
Hero billboard
Hero carousel
Legend
Loading / spinner
Local navigation
Maps
Menu
Messaging
Toast
Block
Inline error
Modal
Nav Megamenu
Pagination
Progress bar
Pull quote
Ratings
Reviews
Rich text editor
Search
Sidebar
Site/App navigation
Slider
Social networking
Status (alpha, beta,...)
Switch
Tabs
Tags / chips / pills
Thumbnails / #-ups
Tips / tutorial
Toolbar
Tooltips
Video & media
UI patterns
Authentication
Chatbots
Create account
Database connection
Exporting
Form structure
Generating keys
Importing
Launch
Lists
Navigation
Onboarding
Permissions
Purchase/checkout
Removing
Settings
Site / app structure
Swipe to refresh
View templates
Home
Category
Product
Dashboard
Article
Search results
Contact us
Getting started
Discussion
Gallery
Layout system
Grids for sites
Grids for apps
Paneling/transitions
Responsive/breakpoints
Screen sizes
Editorial
Voice & tone
Writing for the web
Word list
Capitalization
Punctuation
Branding
Identity
Logo(s)
Tagline(s)
Partnerships
Themes
Research & users
User needs
Personas
Research techniques
Surveys
A/B, multivar. testing
Practices
Accessibility
Prototyping
Performance
Reviews
Design thinking
Coding standards
Style
Browsers & devices
Environments
Prog. enhancement
Version control
Downloads
Templates (PSD,...)
Swatch palettes
Fonts
Icons
Code
Getting involved
Request New Parts
Give Feedback
Request Audit
Present at a Share
Contribute
About the system
Home page
Principles / pillars
Getting started
FAQ
Changelog
About the team
People in the team
Holiday schedule
Design System Café
Partners
Join us
Utilities
Packages
Licenses
Mixins
Helpers
Customize
Cross out 5 more
Based on
Nathan Curtis
'
PDF
.