CSS Design Tokens Reference
Complete reference of all customizable CSS custom properties (design tokens) in Alviere UI components.
All tokens use the --alv- prefix to avoid naming conflicts.
Colors
Primary Colors
Core brand colors and their variations.
| Token | Value | Preview |
|---|---|---|
--alv-color-primary |
#227e9e |
Main brand color
|
--alv-color-primary-hover |
#1b6680 |
Hover state
|
--alv-color-primary-active |
#145164 |
Active/pressed state
|
--alv-color-primary-light |
#e8f4f8 |
Light background variant
|
--alv-color-primary-light-hover |
#d1e8f0 |
Light variant hover
|
--alv-color-on-primary |
#ffffff |
Text color on primary background
|
Success Colors
For success states, confirmations, and positive actions.
| Token | Value | Preview |
|---|---|---|
--alv-color-success |
#436b1d |
Success color
|
--alv-color-success-light |
#d4edda |
Light background
|
--alv-color-success-border |
#c3e6cb |
Border color
|
--alv-color-success-text |
#155724 |
Text color
|
--alv-color-on-success |
#ffffff |
Text on success background
|
--alv-color-success-rgb |
67, 107, 29 |
RGB values for alpha
|
Error Colors
For error states, validation failures, and destructive actions.
| Token | Value | Preview |
|---|---|---|
--alv-color-error |
#b3311f |
Error color
|
--alv-color-error-light |
#f8d7da |
Light background
|
--alv-color-error-border |
#f5c6cb |
Border color
|
--alv-color-error-text |
#721c24 |
Text color
|
--alv-color-on-error |
#ffffff |
Text on error background
|
--alv-color-error-rgb |
179, 49, 31 |
RGB values for alpha
|
Warning Colors
For warnings, cautions, and important notices.
| Token | Value | Preview |
|---|---|---|
--alv-color-warning |
#ffc107 |
Warning color
|
--alv-color-warning-light |
#fff3cd |
Light background
|
--alv-color-warning-border |
#ffeaa7 |
Border color
|
--alv-color-warning-text |
#856404 |
Text color
|
--alv-color-on-warning |
#000000 |
Text on warning background
|
Info Colors
For informational messages and neutral notifications.
| Token | Value | Preview |
|---|---|---|
--alv-color-info |
#175db8 |
Info color
|
--alv-color-info-light |
#d1ecf1 |
Light background
|
--alv-color-info-border |
#bee5eb |
Border color
|
--alv-color-info-text |
#0c5460 |
Text color
|
--alv-color-on-info |
#ffffff |
Text on info background
|
Gray Scale
Neutral colors for text, borders, and backgrounds.
| Token | Value | Preview |
|---|---|---|
--alv-color-gray-50 |
#fafafa |
Lightest gray
|
--alv-color-gray-100 |
#f4f4f5 |
|
--alv-color-gray-200 |
#e4e4e7 |
|
--alv-color-gray-300 |
#d4d4d8 |
|
--alv-color-gray-400 |
#a1a1aa |
|
--alv-color-gray-500 |
#71717a |
Middle gray
|
--alv-color-gray-600 |
#52525b |
|
--alv-color-gray-700 |
#3f3f46 |
|
--alv-color-gray-800 |
#27272a |
|
--alv-color-gray-900 |
#18181b |
Darkest gray
|
Surface Colors
Background colors for different elevation levels.
| Token | Value | Preview |
|---|---|---|
--alv-color-surface |
#ffffff |
Base surface
|
--alv-color-surface-secondary |
#f9fafb |
Secondary surface
|
--alv-color-surface-tertiary |
#f4f4f5 |
Tertiary surface
|
--alv-color-surface-elevated |
#ffffff |
Elevated/floating surface
|
Text Colors
Text colors for different emphasis levels.
| Token | Value | Preview |
|---|---|---|
--alv-color-text-primary |
#18181b |
Primary text
|
--alv-color-text-secondary |
#52525b |
Secondary text
|
--alv-color-text-tertiary |
#71717a |
Tertiary/muted text
|
--alv-color-text-disabled |
#a1a1aa |
Disabled text
|
--alv-color-text-on-primary |
#ffffff |
Text on primary color
|
--alv-color-text-on-surface |
#18181b |
Text on surface
|
Border Colors
Border colors for various states.
| Token | Value | Preview |
|---|---|---|
--alv-color-border |
#e4e4e7 |
Default border
|
--alv-color-border-hover |
#d4d4d8 |
Hover state
|
--alv-color-border-focus |
#227e9e |
Focus state
|
--alv-color-border-error |
#b3311f |
Error state
|
--alv-color-border-success |
#436b1d |
Success state
|
Background Colors
General background colors and states.
| Token | Value | Preview |
|---|---|---|
--alv-color-background |
#ffffff |
Default background
|
--alv-color-background-disabled |
#f4f4f5 |
Disabled state
|
--alv-color-background-hover |
#f9fafb |
Hover state
|
--alv-color-background-active |
#f4f4f5 |
Active/pressed state
|
Typography
Font Families
--alv-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--alv-font-family-grotesque: "Darker Grotesque", sans-serif;
--alv-font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
Font Sizes
--alv-font-size-3xs: 0.625rem; /* 10px */
--alv-font-size-2xs: 0.75rem; /* 12px */
--alv-font-size-xs: 1rem; /* 16px */
--alv-font-size-sm: 1.125rem; /* 18px */
--alv-font-size-base: 1.25rem; /* 20px */
--alv-font-size-lg: 1.5rem; /* 24px */
--alv-font-size-xl: 1.75rem; /* 28px */
Font Weights
--alv-font-weight-light: 300;
--alv-font-weight-normal: 400;
--alv-font-weight-medium: 500;
--alv-font-weight-semibold: 600;
--alv-font-weight-bold: 700;
Line Heights
--alv-line-height-tight: 1.25;
--alv-line-height-normal: 1.5;
--alv-line-height-relaxed: 1.75;
Spacing
Standard spacing scale for margins, padding, and gaps.
--alv-spacing-xs: 0.25rem; /* 4px */
--alv-spacing-sm: 0.5rem; /* 8px */
--alv-spacing-md: 1rem; /* 16px */
--alv-spacing-lg: 1.5rem; /* 24px */
--alv-spacing-xl: 2rem; /* 32px */
--alv-spacing-2xl: 3rem; /* 48px */
--alv-spacing-3xl: 4rem; /* 64px */
Border Radius
Corner radius values for different sizes.
--alv-border-radius-none: 0;
--alv-border-radius-sm: 0.125rem; /* 2px */
--alv-border-radius: 0.25rem; /* 4px - default */
--alv-border-radius-md: 0.375rem; /* 6px */
--alv-border-radius-lg: 0.5rem; /* 8px */
--alv-border-radius-xl: 0.75rem; /* 12px */
--alv-border-radius-2xl: 1rem; /* 16px */
--alv-border-radius-full: 9999px; /* Fully rounded */
Shadows
Box shadow values for elevation.
--alv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--alv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--alv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--alv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--alv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--alv-shadow-none: none;
Transitions
Transition duration and timing functions.
--alv-transition-fast: 150ms ease-in-out;
--alv-transition-normal: 250ms ease-in-out;
--alv-transition-slow: 350ms ease-in-out;
--alv-transition-none: none;
Z-Index
Stacking order values for layered elements.
--alv-z-dropdown: 1000;
--alv-z-sticky: 1020;
--alv-z-fixed: 1030;
--alv-z-modal-backdrop: 1040;
--alv-z-modal: 1050;
--alv-z-popover: 1060;
--alv-z-tooltip: 1070;
Component-Specific Tokens
Input Fields
--alv-input-height-sm: 2.5rem; /* Small input */
--alv-input-height: 3.25rem; /* Default input */
--alv-input-height-lg: 3.75rem; /* Large input */
--alv-input-padding-x: 0.75rem; /* Horizontal padding */
--alv-input-padding-y: 0.5rem; /* Vertical padding */
--alv-input-border-color: var(--alv-color-border);
--alv-input-border-hover: var(--alv-color-border-hover);
--alv-input-border-focus: var(--alv-color-border-focus);
--alv-input-bg: var(--alv-color-background);
--alv-input-bg-disabled: var(--alv-color-background-disabled);
Buttons
/* Primary Button */
--alv-button-primary-bg: var(--alv-color-primary);
--alv-button-primary-bg-hover: var(--alv-color-primary-hover);
--alv-button-primary-bg-active: var(--alv-color-primary-active);
--alv-button-primary-text: var(--alv-color-on-primary);
--alv-button-primary-border: var(--alv-color-primary);
/* Secondary Button */
--alv-button-secondary-bg: transparent;
--alv-button-secondary-bg-hover: var(--alv-color-primary-light);
--alv-button-secondary-bg-active: var(--alv-color-primary-light-hover);
--alv-button-secondary-text: var(--alv-color-primary);
--alv-button-secondary-border: var(--alv-color-primary);
/* Tertiary Button */
--alv-button-tertiary-bg: transparent;
--alv-button-tertiary-bg-hover: var(--alv-color-gray-100);
--alv-button-tertiary-bg-active: var(--alv-color-gray-200);
--alv-button-tertiary-text: var(--alv-color-text-primary);
--alv-button-tertiary-border: transparent;
/* Link Button */
--alv-button-link-bg: transparent;
--alv-button-link-bg-hover: transparent;
--alv-button-link-bg-active: transparent;
--alv-button-link-text: var(--alv-color-primary);
--alv-button-link-text-hover: var(--alv-color-primary-hover);
--alv-button-link-border: transparent;
Spinner
--alv-spinner-color: var(--alv-color-text-primary);
--alv-spinner-size-sm: 1rem;
--alv-spinner-size-md: 1.5rem;
--alv-spinner-size-lg: 4rem;
--alv-spinner-stroke-width: 2px;
Timeline
--alv-timeline-color: var(--alv-color-gray-600);
--alv-timeline-completed-color: var(--alv-color-success);
--alv-timeline-error-color: var(--alv-color-error);
--alv-timeline-pending-color: var(--alv-color-gray-400);
--alv-timeline-step-size-sm: 1.25rem;
--alv-timeline-step-size-md: 2rem;
--alv-timeline-step-size-lg: 2.5rem;
--alv-timeline-connector-width: 3px;
--alv-timeline-font-size: var(--alv-font-size-base);
Badge
--alv-badge-primary-bg: var(--alv-color-primary);
--alv-badge-primary-text: var(--alv-color-on-primary);
--alv-badge-secondary-bg: var(--alv-color-gray-200);
--alv-badge-secondary-text: var(--alv-color-text-primary);
--alv-badge-success-bg: var(--alv-color-success);
--alv-badge-success-text: var(--alv-color-on-success);
--alv-badge-error-bg: var(--alv-color-error);
--alv-badge-error-text: var(--alv-color-on-error);
--alv-badge-warning-bg: var(--alv-color-warning);
--alv-badge-warning-text: var(--alv-color-on-warning);
--alv-badge-info-bg: var(--alv-color-info);
--alv-badge-info-text: var(--alv-color-on-info);
List
--alv-list-bg: var(--alv-color-surface);
--alv-list-border: var(--alv-color-border);
--alv-list-item-bg: transparent;
--alv-list-item-bg-hover: var(--alv-color-background-hover);
--alv-list-item-bg-active: var(--alv-color-background-active);
--alv-list-item-text: var(--alv-color-text-primary);
--alv-list-item-text-secondary: var(--alv-color-text-secondary);
Radio Button
--alv-radio-border: var(--alv-color-border);
--alv-radio-border-hover: var(--alv-color-border-hover);
--alv-radio-border-focus: var(--alv-color-border-focus);
--alv-radio-bg: var(--alv-color-background);
--alv-radio-checked-bg: var(--alv-color-primary);
--alv-radio-checked-border: var(--alv-color-primary);
--alv-radio-text: var(--alv-color-text-primary);
--alv-radio-text-disabled: var(--alv-color-text-disabled);
💡 Usage Examples
Example 1: Dark Theme
:root {
/* Colors */
--alv-color-primary: #8b5cf6;
--alv-color-background: #1f2937;
--alv-color-surface: #374151;
--alv-color-text-primary: #f9fafb;
--alv-color-text-secondary: #d1d5db;
--alv-color-border: #4b5563;
}
Example 2: Compact Layout
:root {
/* Spacing */
--alv-spacing-md: 0.75rem;
--alv-spacing-lg: 1rem;
/* Typography */
--alv-font-size-base: 1rem;
--alv-font-size-lg: 1.25rem;
/* Components */
--alv-input-height: 2.5rem;
--alv-border-radius: 0.375rem;
}
Example 3: Corporate Branding
:root {
/* Brand colors */
--alv-color-primary: #0066cc;
--alv-color-primary-hover: #0052a3;
/* Typography */
--alv-font-family-sans: "Inter", sans-serif;
--alv-font-weight-normal: 500;
/* Borders */
--alv-border-radius: 0.25rem;
--alv-border-radius-lg: 0.375rem;
}