Design tokens are the single source of truth for all visual values in Syhrezz. Every color, size, spacing, shadow, radius, and transition is defined as a CSS custom property in ds-tokens.css. Never hardcode values in components.
Import once: Add <link rel="stylesheet" href="path/to/ds-tokens.css"/> to your page head. All tokens are available globally via CSS custom properties (var(--token-name)).
Color Tokens
Token
Value
Usage
--primary
#3B5BDB
Main brand blue — links, focus rings
--primary-light
#EEF2FF
Tinted surfaces, badge backgrounds
--accent-director
#6366F1
Accent role accent color
--success
#0E9F6E
Positive states, icon strokes
--warning
#E3A008
Warnings, caution states
--danger
#F05252
Errors, destructive actions
--surface
#F8FAFC
Page background
--card
#FFFFFF
Card/panel background
--border
#E2E8F0
Default borders
--text-primary
#0F172A
Headings, primary content
--text-secondary
#64748B
Sub-labels, secondary content
--text-muted
#94A3B8
Placeholders, disabled, hints
Spacing Tokens
Token
Value
Common Usage
--sp-1
2px
Tight gaps, badge padding-y
--sp-2
4px
Nav item margin-bottom, dot indicators
--sp-4
8px
btn-sm padding, badge padding, small gap
--sp-5
10px
Nav item padding, compact card padding
--sp-6
12px
Nav item gap, sidebar padding, button gap
--sp-8
16px
Modal header padding-y, grid gaps
--sp-10
20px
Card padding (sm), stat card padding
--sp-12
24px
Card padding (default), modal body, logo area
--sp-14
28px
Page header margin-bottom
--sp-16
32px
Hero banner padding-x, main content padding
Border Radius Tokens
Token
Value
Usage
--r-xs
6px
Tiny elements, nav active bar
--r-sm
8px
btn-sm, small inputs, dropdown items
--r-md
10px
Nav items, inputs, buttons (Dark), dropdowns
--r-lg
12px
Nav items (Accent), logo icon, modals
--r-xl
14px
Stat cards, table containers
--r-2xl
16px
Modals, sales cards, KPI cards
--r-3xl
18px
Hero banner
--r-4xl
20px
Standard cards (default)
--r-full
999px
Badges, pills, avatars, nav-badge
Shadow Tokens
Token
Value
Usage
--shadow-xs
0 1px 3px rgba(0,0,0,0.06)
Subtle lift, table wrap
--shadow-sm
0 4px 6px rgba(0,0,0,0.02)
Card default state
--shadow-md
0 4px 16px rgba(37,99,235,0.06)
Sales/manager cards
--shadow-lg
0 12px 30px rgba(0,0,0,0.06)
Card hover state
--shadow-xl
0 12px 40px rgba(67,56,202,0.35)
Hero banner, director cards
--shadow-btn-primary
0 4px 14px rgba(99,102,241,0.3)
Primary button default
--shadow-btn-hover
0 6px 20px rgba(99,102,241,0.4)
Primary button hover
--shadow-modal
0 20px 60px rgba(0,0,0,0.2)
Modal dialog
--shadow-toast
0 8px 24px rgba(0,0,0,0.1)
Toast notifications
--shadow-sidebar
10px 0 30px rgba(0,0,0,0.1)
Sidebar right edge
Motion Tokens
Token
Value
Usage
--transition-fast
all 0.15s ease
Row hover, feed item, tooltip
--transition-base
all 0.2s ease
Buttons, badges, nav items (Dark)
--transition-smooth
all 0.2s cubic-bezier(0.4,0,0.2,1)
Nav items (Accent), card hover, button hover
--transition-sidebar
all 0.35s cubic-bezier(0.4,0,0.2,1)
Sidebar collapse/expand
Z-Index Tokens
Token
Value
Element
--z-topbar
100
Top navigation bar
--z-sidebar
1000
Fixed sidebar
--z-modal
200
Modal overlay
--z-dropdown
300
Dropdown menus
--z-tooltip
400
Tooltips
--z-toast
9999
Toast notifications (always on top)
Complete Token File
All tokens are defined in shared/ds-tokens.css. Import this file before any component styles.
/* In your HTML head */<linkrel="stylesheet"href="path/to/ds-tokens.css"/>/* In your CSS — use tokens everywhere */.my-component {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-4xl);
padding: var(--sp-12);
box-shadow: var(--shadow-sm);
transition: var(--transition-smooth);
font-family: var(--font-primary);
color: var(--text-primary);
}