Layered Design System
A comprehensive foundation for building consistent, accessible, and beautiful user interfaces. Built on systematic design tokens and flexible components.
Introduction
The Layered Design System provides a unified visual language and component library. Our token-based approach ensures consistency across all products while maintaining flexibility for unique use cases.
Colors
Our color palette is carefully crafted for accessibility and visual hierarchy. All color combinations meet WCAG 2.1 AA standards for contrast.
Ink
#0a0a0f
Primary text and headings
Slate
#2a2d3a
Secondary text, body copy
Mist
#e8eaf0
Borders, dividers, subtle backgrounds
Paper
#fafbfd
Page background, cards
Accent
#ff6b35
Primary actions, links, highlights
Accent Dim
#ff8c5f
Accent hover states, gradients
Layer 1
#4a5fc1
Gradient start, decorative elements
Layer 2
#7b68ee
Gradient middle, brand accents
Layer 3
#c471ed
Gradient end, highlights
Success
#06d6a0
Success states, confirmations
Error
#ef476f
Error states, destructive actions
Typography
Our type scale balances readability with visual hierarchy. Inter serves as our primary typeface, with Space Mono for technical and monospace content.
Design Systems at Scale
Display Large
48px / 800 / 1.1
Inter
Building Cohesive Experiences
Heading 1
32px / 700 / 1.2
Inter
Foundation & Components
Heading 2
24px / 700 / 1.3
Inter
A design system is the single source of truth which groups all the elements that will allow teams to design, realize and develop a product. This larger body text is used for introductions and emphasis.
Body Large
17px / 400 / 1.6
Inter
The standard body text provides excellent readability for longer form content. It's optimized for comfortable reading on all screen sizes with appropriate line height and letter spacing.
Body Base
15px / 400 / 1.6
Inter
Spacing
Consistent spacing creates visual rhythm and improves scanability. Our spacing scale uses a 4px base unit with meaningful increments.
Extra Small
4px / 0.25rem
Extra Large
40px / 2.5rem
Grid
Our responsive grid system adapts from mobile to desktop with fluid column layouts and consistent gutters.
Cards
Cards group related content with subtle elevation and interactive hover states.
Card Component
Elevated content container with hover effects
Design Tokens
Design tokens are the visual design atoms of the design system. They store visual design attributes such as color, typography, and spacing.
Accessibility
Accessibility is built into every component. We follow WCAG 2.1 AA standards as a baseline, with AAA compliance where possible.
Color Contrast
All text color combinations meet a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. UI components maintain 3:1 contrast against adjacent colors.
Keyboard Navigation
All interactive elements are keyboard accessible with visible focus indicators. Tab order follows logical reading order, and focus is trapped appropriately in modal contexts.
Screen Reader Support
Semantic HTML and ARIA labels ensure screen reader users have equivalent access to content. Dynamic content updates use aria-live regions for announcements.