Design Tokens
Design tokens are the single source of truth for the visual design of your product. They store values like colors, typography, and spacing.
What are Design Tokens?
Design tokens are named entities that store visual design attributes. They help maintain a consistent visual language across products and platforms by providing a centralized way to define and manage design decisions.
Benefits of using tokens
- Single source of truth for design values
- Easy theme customization and white-labeling
- Consistent design language across platforms
- Easier maintenance and updates
Color Tokens
Our color system is built around brand colors, semantic colors, and neutral scales.
Brand Colors
The core brand colors define the visual identity of Everforth.
--df-color-primary--df-color-secondary--df-color-accent--df-color-navySemantic Colors
Semantic colors convey meaning and status in the interface.
--df-color-success--df-color-error--df-color-warning--df-color-infoNeutral Scale
A comprehensive grayscale for text, backgrounds, and borders.
| Token | Value | Usage |
|---|---|---|
--df-color-gray-50 | #f8fafc | Lightest backgrounds |
--df-color-gray-100 | #f1f5f9 | Subtle backgrounds |
--df-color-gray-200 | #e2e8f0 | Borders, dividers |
--df-color-gray-300 | #cbd5e1 | Disabled states |
--df-color-gray-400 | #94a3b8 | Placeholder text |
--df-color-gray-500 | #64748b | Secondary text |
--df-color-gray-600 | #475569 | Body text |
--df-color-gray-700 | #334155 | Primary text |
--df-color-gray-800 | #1e293b | Headlines |
--df-color-gray-900 | #0f172a | Darkest text |
Typography Tokens
Typography tokens define the font families, sizes, weights, and line heights used throughout the system.
Font Families
| Token | Value | Usage |
|---|---|---|
--df-font-family-sans | Work Sans, sans-serif | Body text, UI elements |
--df-font-family-serif | Source Serif Pro, serif | Headlines, marketing |
--df-font-family-mono | SF Mono, monospace | Code, technical content |
Font Sizes
| Token | Size | Example |
|---|---|---|
--df-font-size-xs | 12px | The quick brown fox |
--df-font-size-sm | 14px | The quick brown fox |
--df-font-size-base | 16px | The quick brown fox |
--df-font-size-lg | 18px | The quick brown fox |
--df-font-size-xl | 20px | The quick brown fox |
--df-font-size-2xl | 24px | The quick brown fox |
--df-font-size-3xl | 30px | The quick brown fox |
--df-font-size-4xl | 36px | The quick brown fox |
Font Weights
| Token | Value | Example |
|---|---|---|
--df-font-weight-light | 300 | Light text |
--df-font-weight-normal | 400 | Normal text |
--df-font-weight-medium | 500 | Medium text |
--df-font-weight-semibold | 600 | Semibold text |
--df-font-weight-bold | 700 | Bold text |
Spacing Tokens
A consistent spacing scale based on a 4px (0.25rem) base unit.
| Token | Value | Visual |
|---|---|---|
--df-spacing-1 | 4px | |
--df-spacing-2 | 8px | |
--df-spacing-3 | 12px | |
--df-spacing-4 | 16px | |
--df-spacing-5 | 20px | |
--df-spacing-6 | 24px | |
--df-spacing-8 | 32px | |
--df-spacing-12 | 48px | |
--df-spacing-16 | 64px |
Semantic Spacing
| Token | Value | Usage |
|---|---|---|
--df-spacing-xs | 4px | Tight spacing, icons |
--df-spacing-sm | 8px | Compact elements |
--df-spacing-md | 16px | Default spacing |
--df-spacing-lg | 24px | Section spacing |
--df-spacing-xl | 32px | Large sections |
--df-spacing-2xl | 48px | Page sections |
Border Tokens
Border Radius
| Token | Value | Preview |
|---|---|---|
--df-radius-none | 0 | |
--df-radius-sm | 2px | |
--df-radius-md | 4px | |
--df-radius-lg | 8px | |
--df-radius-xl | 12px | |
--df-radius-full | 9999px |
Shadow Tokens
| Token | Preview |
|---|---|
--df-shadow-sm | |
--df-shadow-md | |
--df-shadow-lg | |
--df-shadow-xl |
Animation Tokens
Durations
| Token | Value | Usage |
|---|---|---|
--df-duration-fast | 150ms | Hover states, micro-interactions |
--df-duration-normal | 200ms | Default transitions |
--df-duration-slow | 300ms | Complex animations |
--df-duration-slower | 500ms | Page transitions |
Easing Functions
| Token | Value | Usage |
|---|---|---|
--df-ease-in | cubic-bezier(0.4, 0, 1, 1) | Elements leaving |
--df-ease-out | cubic-bezier(0, 0, 0.2, 1) | Elements entering |
--df-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | General purpose |
Using Tokens
Tokens can be used directly in your CSS via custom properties:
.my-component {
/* Colors */
color: var(--df-color-text-primary);
background-color: var(--df-color-surface);
border-color: var(--df-color-border);
/* Typography */
font-family: var(--df-font-family-sans);
font-size: var(--df-font-size-base);
font-weight: var(--df-font-weight-medium);
/* Spacing */
padding: var(--df-spacing-md);
margin-bottom: var(--df-spacing-lg);
/* Borders */
border-radius: var(--df-radius-lg);
/* Shadows */
box-shadow: var(--df-shadow-md);
/* Transitions */
transition: all var(--df-duration-normal) var(--df-ease-out);
}Figma Export
Our design tokens are also available as a Figma-compatible JSON export: