Design Foundations
The fundamental building blocks that define our design language and ensure consistency across all products.
Design Principles
Our design principles guide all product decisions and help us create cohesive, intuitive, and delightful experiences.
User-Centered
We design with real user needs at the forefront, continuously validating our assumptions through research and testing.
Examples:
- Simplified workflows
- Reduced cognitive load
- Accessible interfaces
Consistent
We create predictable patterns and behaviors that build user confidence and reduce learning curves.
Examples:
- Unified interaction patterns
- Coherent visual language
- Standardized terminology
Purposeful
Every element serves a clear function. We eliminate decoration that doesn't communicate or assist the user.
Examples:
- Focused interfaces
- Clear information hierarchy
- Intentional affordances
Efficient
We optimize for speed and simplicity, helping users accomplish tasks with minimal effort.
Examples:
- Streamlined processes
- Smart defaults
- Progressive disclosure
Adaptable
Our designs scale across devices, contexts, and user needs while maintaining usability.
Examples:
- Responsive layouts
- Context-aware interfaces
- Personalization options
Delightful
We enhance the experience with thoughtful details that surprise and engage users without sacrificing usability.
Examples:
- Meaningful animations
- Helpful microcopy
- Rewarding interactions
Principles in Practice
See how our design principles translate into real-world application
- Inconsistent visual hierarchy
- Cluttered interface with too many options
- Unclear primary actions
- Inefficient use of space
- Clear visual hierarchy guides the user
- Focused interface with progressive disclosure
- Prominent primary actions
- Efficient use of space with breathing room
Color System
Our color system is designed to create visual hierarchy, communicate meaning, and maintain accessibility across all products.
Color Tokens
Semantic color tokens that adapt to light and dark modes
primary
hsl(var(--primary))
primary-foreground
hsl(var(--primary-foreground))
secondary
hsl(var(--secondary))
secondary-foreground
hsl(var(--secondary-foreground))
accent
hsl(var(--accent))
accent-foreground
hsl(var(--accent-foreground))
muted
hsl(var(--muted))
muted-foreground
hsl(var(--muted-foreground))
card
hsl(var(--card))
card-foreground
hsl(var(--card-foreground))
border
hsl(var(--border))
input
hsl(var(--input))
destructive
hsl(var(--destructive))
destructive-foreground
hsl(var(--destructive-foreground))
Color Usage Guidelines
How to apply colors effectively and accessibly
Primary
Use for main actions, key UI elements, and to establish brand presence. Avoid overuse which can diminish its impact.
Secondary
Use for supporting actions, secondary buttons, and to create visual hierarchy without competing with primary elements.
Accent
Use sparingly to highlight important information or to add visual interest to specific UI elements.
Destructive
Reserve for actions that are destructive or potentially dangerous, such as delete or remove functions.
Accessibility
- All text must meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text)
- Don't rely solely on color to convey information
- Test color combinations in both light and dark modes
Interactive Color Tool
Experiment with our color system and see how different combinations work together
Primary Color
Secondary Color
Accent Color
Background Color
Text Color
Accessibility Checks
Accessibility Guidelines
- WCAG AA requires a contrast ratio of at least 4.5:1 for normal text
- WCAG AA requires a contrast ratio of at least 3:1 for large text (18pt or 14pt bold)
- WCAG AAA requires a contrast ratio of at least 7:1 for normal text
- WCAG AAA requires a contrast ratio of at least 4.5:1 for large text
Typography
Our typography system is designed to create clear hierarchies, optimal readability, and a consistent voice across all platforms.
Type Scale
A harmonious and accessible typographic scale
Heading 1
font-size: 2.5rem (40px), font-weight: 700
Heading 2
font-size: 1.875rem (30px), font-weight: 700
Heading 3
font-size: 1.5rem (24px), font-weight: 700
Heading 4
font-size: 1.25rem (20px), font-weight: 700
Body (Base)
font-size: 1rem (16px), font-weight: 400
Small
font-size: 0.875rem (14px), font-weight: 400
Extra Small
font-size: 0.75rem (12px), font-weight: 400
Typography Guidelines
How to use typography effectively
Hierarchy
Use type scale to establish clear visual hierarchy. Limit to 3-4 levels of hierarchy per page to avoid confusion.
Line Length
Aim for 50-75 characters per line for optimal readability. Use containers to control line length on larger screens.
Line Height
Use more generous line height (1.5-1.6) for body text and tighter line height (1.1-1.3) for headings.
Responsive Behavior
Font sizes should scale down on smaller screens. Headings should reduce more dramatically than body text.
Accessibility
- Minimum text size of 16px for body text
- Maintain sufficient contrast with background colors
- Avoid using all caps for long text blocks
- Ensure proper heading structure (h1-h6) for screen readers
Typography in Context
See how our typography system works in real-world applications
Article Title Goes Here
Published on March 12, 2023 • 5 min read
First Section Heading
Body text demonstrates the readability of our typography system. The line length is optimized for comfortable reading, and the contrast between heading and body text creates a clear hierarchy.
Additional paragraph showing how multiple blocks of text are spaced. Notice the generous line height that improves readability for longer content sections.
Second Level Heading
This subsection demonstrates the next level in our typographic hierarchy. The heading is visually distinct from the main heading but still carries visual weight.
- List items use the same typography as body text
- But with appropriate indentation and bullets
- To create a clear content structure
"Blockquotes use the same font but with styling that sets them apart from regular body text, making quoted content stand out."
Final Thoughts
The conclusion of our article maintains the same typography patterns, ensuring consistency throughout the reading experience.
Spacing & Layout
Our spacing system creates rhythm and hierarchy while ensuring consistency across all interfaces.
Spacing Scale
A consistent spacing scale based on 4px increments
4px - Extra Small
Fine adjustments and tight spaces
8px - Small
Between related items, icon padding
16px - Medium
Padding within components, between form fields
24px - Large
Separation between component groups
32px - Extra Large
Section padding, major content blocks
48px - 2XL
Page sections, large separations
Layout Principles
Guidelines for creating balanced and harmonious layouts
Alignment
Maintain consistent alignment within sections. Use a grid system to ensure elements align properly across the interface.
Proximity
Group related items together. Use larger spacing to separate distinct sections or groups of content.
White Space
Embrace white space to improve readability and focus. Don't overcrowd interfaces with too many elements.
Consistency
Use the same spacing patterns throughout the interface to create a sense of rhythm and predictability.
Responsive Considerations
Adjust spacing proportionally on different screen sizes. Reduce spacing on mobile while maintaining hierarchy.
Spacing in Practice
See how our spacing system creates balanced and harmonious interfaces
About Spacing Units
Our spacing system uses 4px increments. Each unit represents 4px, creating a consistent rhythm throughout the interface.
- 1 unit = 4px (extra small)
- 2 units = 8px (small)
- 4 units = 16px (medium)
- 6 units = 24px (large)
- 8 units = 32px (extra large)
- 12 units = 48px (2XL)
Dashboard
Total Users
3,549
Revenue
$24,831
Projects
12
Recent Activity
Project created
2 minutes ago
New team member added
1 hour ago
File uploaded
3 hours ago
Quick Actions
Team Members
Alex Johnson
Product Manager
Sarah Williams
UX Designer
Michael Brown
Developer
Spacing Best Practices
- Use consistent spacing to create visual rhythm and hierarchy
- Increase spacing between unrelated elements, decrease spacing between related elements
- Use larger spacing for page sections, smaller spacing for component internals
- Adjust spacing proportionally on different screen sizes
- Remember that white space is a design element, not empty space to be filled
Accessibility
Our design system is built with accessibility at its core, ensuring our products are usable by everyone.
Accessibility Principles
Core guidelines that inform all our design decisions
Perceivable
Information and UI components must be presentable to users in ways they can perceive.
- Provide text alternatives for non-text content
- Create content that can be presented in different ways
- Make it easier for users to see and hear content
Operable
UI components and navigation must be operable by all users.
- Make all functionality available from a keyboard
- Give users enough time to read and use content
- Do not use content that causes seizures or physical reactions
Understandable
Information and operation of the UI must be understandable.
- Make text readable and understandable
- Make content appear and operate in predictable ways
- Help users avoid and correct mistakes
Robust
Content must be robust enough to be interpreted by a wide variety of user agents.
- Maximize compatibility with current and future tools
- Use semantic HTML elements
- Ensure proper ARIA implementation when needed
Accessibility Checklist
Essential checks for every component and page
Color & Contrast
- Text meets WCAG AA contrast (4.5:1 for normal, 3:1 for large text)
- Information is not conveyed by color alone
- UI elements have sufficient contrast with surroundings
Keyboard Navigation
- All interactive elements are keyboard accessible
- Focus states are clearly visible
- Logical tab order follows visual layout
Screen Readers
- Semantic HTML is used appropriately
- Images have alt text (or are marked decorative)
- ARIA attributes are used correctly when needed
- Dynamic content changes are announced
Forms & Inputs
- All form controls have associated labels
- Error messages are clear and accessible
- Required fields are clearly indicated
Content & Text
- Headings follow proper hierarchy (h1-h6)
- Text can be resized up to 200% without loss of content
- Link text is descriptive (no "click here")
Testing Tools & Resources
Recommended tools and methods for accessibility testing
Automated Testing
- WAVE
Web accessibility evaluation tool
- axe DevTools
Browser extension for accessibility testing
- Lighthouse
Automated auditing in Chrome DevTools
Manual Testing
- Keyboard Navigation
Test using Tab, Enter, Space, and arrow keys
- Screen Readers
NVDA (Windows), VoiceOver (Mac), JAWS
- Color Contrast Analyzers
WebAIM Contrast Checker, Colour Contrast Analyser
User Testing
- Inclusive User Research
Testing with people with disabilities
- Assistive Technology Testing
Testing with real assistive technologies
- Simulation Tools
NoCoffee (vision), Funkify (various disabilities)
Foundation Resources
Tools and assets to help you implement our design foundations