Styleguide
Design tokens are the atomic elements of a design system, essentially named variables that store all visual design decisions like colors, typography scales, spacing units, and animation timings. They act as a single source of truth, replacing hard-coded values in code and design tools alike. This allows for seamless updates across all platforms and components, ensuring consistent branding and a cohesive user experience while significantly improving collaboration between designers and developers.
Color Variables
| Variable Name | Value | Color Preview | Description |
|---|---|---|---|
| Base Colors | |||
--color-current | currentColor | - | Inherits the current text color |
--color-transparent | transparent | - | Fully transparent color |
--color-white | #ffffff | Pure white | |
--color-black | #1b1b1b | Dark charcoal black | |
| Main Color Palette (Figma Blue) | |||
--color-main-5 | #ebfbff | Lightest cyan tint | |
--color-main-10 | #caf0f8 | Very light cyan | |
--color-main-15 | #ade8f4 | Light cyan | |
--color-main-25 | #90e0ef | Medium-light cyan | |
--color-main-50 | #48cae4 | Medium cyan | |
--color-main-100 | #00b4d8 | Medium-dark cyan | |
--color-main-150 | #0096c7 | Dark cyan | |
--color-main-200 | #023e8a | Main or Primary blue | |
--color-main-300 | #03045e | Dark navy blue | |
--color-main-400 | #01022d | Very dark navy | |
--color-main-500 | #010121 | Darkest navy | |
| Gray Palette (Figma Neutral) | |||
--color-gray-25 | #f8f8f8 | Ultra light gray | |
--color-gray-50 | #f4f4f4 | Very light gray | |
--color-gray-100 | #e7e7e7 | Light gray | |
--color-gray-200 | #cecece | Medium-light gray | |
--color-gray-300 | #b6b6b6 | Medium gray | |
--color-gray-400 | #9b9b9b | Medium-dark gray | |
--color-gray-500 | #818181 | Dark gray | |
--color-gray-600 | #686868 | Darker gray | |
--color-gray-700 | #4e4e4e | Very dark gray | |
--color-gray-800 | #353535 | Almost black gray | |
--color-gray-900 | #1b1b1b | Darkest gray (same as black) | |
| New Blues (Figma New-Blues) | |||
--color-blue-1 | #023e8a | Primary blue | |
--color-blue-2 | #0096c7 | Medium blue | |
--color-blue-3 | #00b4d8 | Light blue | |
--color-blue-4 | #48cae4 | Light cyan blue | |
--color-blue-5 | #90e0ef | Very light cyan | |
--color-blue-6 | #ade8f4 | Pale cyan | |
--color-blue-7 | #caf0f8 | Lightest cyan | |
--color-blue | #03045e | Blue main (navy) | |
| Red Colors | |||
--color-red-200 | #fecaca | Light red | |
--color-red-300 | #fca5a5 | Medium-light red | |
--color-red-400 | #f87171 | Medium red | |
--color-red-500 | #ef4444 | Base red | |
--color-red-600 | #dc2626 | Dark red | |
--color-red-700 | #b91c1c | Very dark red | |
| Teal Colors | |||
--color-teal-50 | #00cefc | Bright teal | |
--color-teal-100 | #04c3cf | Medium teal | |
--color-teal-200 | #00a4ba | Dark teal | |
--color-teal-300 | #0167a2 | Very dark teal | |
| Status Colors | |||
--color-yellow | var(--color-yellow) | Warning/Attention (Amphenol RF Yellow) | |
--color-error | var(--_error) | Error/danger color (references theme variable) | |
--color-success | var(--_success) | Success color (references theme variable) | |
Typography Variables
| Variable Name | Value | Preview | Description |
|---|---|---|---|
| Heading Typography | |||
--text-h1 | clamp(2.25rem, 2.2488rem + 0.2791vw, 2.5rem) | H1 | Main heading size with responsive scaling |
--text-h1--line-height | 1.2 | - | Line height for H1 headings |
--text-h2 | clamp(2rem, 1.9988rem + 0.2791vw, 2.25rem) | H2 | Secondary heading size with responsive scaling |
--text-h2--line-height | 1.222 | - | Line height for H2 headings |
--text-h3 | clamp(1.75rem, 1.7488rem + 0.2791vw, 2rem) | H3 | Tertiary heading size with responsive scaling |
--text-h3--line-height | 1.25 | - | Line height for H3 headings |
--text-h4 | clamp(1.5rem, 1.4988rem + 0.2791vw, 1.75rem) | H4 | Fourth level heading size with responsive scaling |
--text-h4--line-height | 1.285 | - | Line height for H4 headings |
--text-h5 | clamp(1.25rem, 1.2488rem + 0.2791vw, 1.5rem) | H5 | Fifth level heading size with responsive scaling |
--text-h5--line-height | 1.3333 | - | Line height for H5 headings |
--text-h6 | clamp(1.125rem, 1.1244rem + 0.1396vw, 1.25rem) | H6 | Smallest heading size with responsive scaling |
--text-h6--line-height | 1.4 | - | Line height for H6 headings |
| Display Typography | |||
--text-display-lg | clamp(2.75rem, 2.7476rem + 0.5583vw, 3.25rem) | Display LG | Large display text for hero sections |
--text-display-lg--line-height | 1.2 | - | Line height for large display text |
--text-display-sm | clamp(2.5rem, 2.4988rem + 0.2791vw, 2.75rem) | Display SM | Small display text for prominent sections |
--text-display-sm--line-height | 1.2 | - | Line height for small display text |
| Paragraph Typography | |||
--text-p-lg | 18px | Large paragraph text | Large paragraph text (18px) |
--text-p-lg--line-height | 1.333 | - | Line height for large paragraph text |
--text-p-md | 16px | Medium paragraph text | Medium paragraph text (16px) |
--text-p-md--line-height | 1.5 | - | Line height for medium paragraph text |
--text-p-sm | 14px | Small paragraph text | Small paragraph text (14px) |
--text-p-sm--line-height | 1.4285 | - | Line height for small paragraph text |
--text-p-xs | 12px | Extra small paragraph text | Extra small paragraph text (12px) |
--text-p-xs--line-height | 1.666 | - | Line height for extra small paragraph text |
| Label Typography | |||
--text-label-lg | 16px | Large Label | Large label text (16px) |
--text-label-lg--line-height | 1.125 | - | Line height for large label text |
--text-label-md | 14px | Medium Label | Medium label text (14px) |
--text-label-md--line-height | 1.4285 | - | Line height for medium label text |
--text-label-sm | 12px | Small Label | Small label text (12px) |
--text-label-sm--line-height | 1.3333 | - | Line height for small label text |
--text-label-xs | 10px | Extra Small Label | Extra small label text (10px) |
--text-label-xs--line-height | 1.4 | - | Line height for extra small label text |
| Letter Spacing | |||
--tracking-2 | -0.02em | Tight spacing | Tight letter spacing for headings |
| Font Weights | |||
--font-weight-light | 300 | Light | Light font weight |
--font-weight-normal | 400 | Normal | Normal font weight |
--font-weight-medium | 500 | Medium | Medium font weight |
--font-weight-semibold | 600 | Semibold | Semi-bold font weight |
--font-weight-bold | 700 | Bold | Bold font weight |
--font-weight-extrabold | 800 | Extra Bold | Extra bold font weight |
Other Variables
| Variable Name | Value | Description |
|---|---|---|
| Line Height | ||
--leading-close | 1.1 | Tight line height for headings |
| Shadows | ||
--shadow-border | 0 0 0 -1px --alpha(var(--color-black) / 10%) | Border shadow effect |
--shadow-xs | 0px 1px 2px --alpha(var(--color-black) / 4%) | Extra small shadow |
--shadow-sm | 0px 2px 6px --alpha(var(--color-black) / 6%) | Small shadow |
--shadow-md | 0px 6px 15px -2px --alpha(var(--color-black) / 8%) | Medium shadow |
--shadow-lg | 0px 8px 24px -3px --alpha(var(--color-black) / 10%) | Large shadow |
--shadow-xl | 0px 20px 40px -8px --alpha(var(--color-black) / 10%) | Extra large shadow |
--shadow-2xl | 0px 25px 60px -15px --alpha(var(--color-black) / 12%) | 2X large shadow |
| Border Radius | ||
--radius-xs | 0.125rem | Extra small border radius (2px) |
--radius-sm | 0.25rem | Small border radius (4px) |
--radius-md | 0.5rem | Medium border radius (8px) |
--radius-lg | 0.625rem | Large border radius (10px) |
--radius-xl | 0.5rem | Extra large border radius (8px) |
--radius-2xl | 1.25rem | 2X large border radius (20px) |
--radius-full | 99rem | Full border radius (circular) |
--radius-opposite | 20px 0 20px 0 | Asymmetric corner radius pattern |
| Z-Index | ||
--z-index-0 | 0 | Base z-index level |
--z-index-1 | 1 | Z-index level 1 |
--z-index-2 | 2 | Z-index level 2 |
--z-index-3 | 3 | Z-index level 3 |
--z-index-4 | 4 | Z-index level 4 |
--z-index-5 | 5 | Z-index level 5 |
| Spacing (Character-based) | ||
--spacing-ch-0_5 | 0.5ch | Half character width spacing |
--spacing-ch-1 | 1ch | One character width spacing |
--spacing-ch-2 | 2ch | Two character width spacing |
| Responsive Padding | ||
--pad-2xl | clamp(6rem, 0.05rem + 11.2vw, 7.75rem) | 2X large responsive padding (96px-124px) |
--pad-xl | clamp(4rem, -2.8rem + 12.8vw, 6rem) | Extra large responsive padding (64px-96px) |
--pad-lg | clamp(2rem, -4.8rem + 12.8vw, 4rem) | Large responsive padding (32px-64px) |
--pad-md | clamp(1.5rem, -0.2rem + 3.2vw, 2rem) | Medium responsive padding (24px-32px) |
--pad-sm | 1rem | Small padding (16px) |
--pad-xs | 0.5rem | Extra small padding (8px) |
| Breakpoints | ||
--breakpoint-desktop | 1680px | Desktop breakpoint |
--breakpoint-breakout | 1440px | Breakout layout breakpoint |
--breakpoint-limit | 1290px | Maximum content width breakpoint |
--breakpoint-tablet | 1100px | Tablet breakpoint |
--breakpoint-nav | 1000px | Navigation breakpoint |
--breakpoint-tablet-sm | 849px | Small tablet breakpoint |
--breakpoint-mobile-lg | 700px | Large mobile breakpoint |
--breakpoint-mobile | 500px | Mobile breakpoint |