Tokens

The atomic elements of the GateFlow design system. Browsable, previewable, and ready to use in any workspace.

Install
pnpm add @gateflow/tokens

Token Explorer

Use the explorer below to browse our semantic token library. You can preview how tokens look in both light and dark modes.

Showing 20 tokens
--ds-layer-01
T2 Semantic

Application canvas & background base level

Light Modeoklch(98.5% 0.005 250) · #f8f9fa
Dark Modeoklch(8% 0.012 250) · #0b0d11
--ds-layer-02
T2 Semantic

Default card, table row, and container surface

Light Modeoklch(100% 0 0) · #ffffff
Dark Modeoklch(12% 0.015 250) · #12151c
--ds-layer-03
T2 Semantic

Raised headers, sticky navbars, and elevated widgets

Light Modeoklch(100% 0 0) · #ffffff
Dark Modeoklch(16% 0.018 250) · #191d26
--ds-layer-04
T2 Semantic

Modal overlays, dialogs, dropdowns, and flyout sheets

Light Modeoklch(100% 0 0) · #ffffff
Dark Modeoklch(20% 0.020 250) · #212633
--ds-color-primary
T2 Semantic

Primary brand accent & default CTA fill (Kimchi Vermilion)

Light Modeoklch(62% 0.22 38) · #ed4b00
Dark Modeoklch(62% 0.22 38) · #ed4b00
--ds-color-primary-hover
T2 Semantic

Interactive button hover and pressed highlight

Light Modeoklch(54% 0.20 38) · #c73800
Dark Modeoklch(67% 0.21 38) · #ff6b2b
--ds-color-primary-subtle
T2 Semantic

Translucent active state and chip pill background

Light Modeoklch(96% 0.02 38) · rgba(237, 75, 0, 0.08)
Dark Modeoklch(26% 0.12 38) · rgba(237, 75, 0, 0.18)
--ds-color-ai-lab
T2 Semantic

Virtual Lab & GateAI conversational accent (Orchid)

Light Modeoklch(58% 0.23 300) · #8b5cf6
Dark Modeoklch(68% 0.22 300) · #a78bfa
Aa
--ds-text-primary
T2 Semantic

Headlines, titles, and high-contrast primary body text

Light Modeoklch(12% 0.015 250) · Contrast 17.8:1
Dark Modeoklch(98.5% 0.005 250) · Contrast 18.5:1
Aa
--ds-text-subtle
T2 Semantic

Secondary descriptions, labels, and table metadata

Light Modeoklch(48% 0.022 250) · Contrast 7.6:1
Dark Modeoklch(76% 0.018 250) · Contrast 7.1:1
Aa
--ds-text-subtlest
T2 Semantic

Disabled indicators, placeholders, and subtle captions

Light Modeoklch(62% 0.020 250) · Contrast 4.6:1
Dark Modeoklch(62% 0.020 250) · Contrast 4.8:1
Aa
--ds-text-brand
T2 Semantic

Branded links, interactive highlights, and active items

Light Modeoklch(54% 0.20 38) · Contrast 5.3:1
Dark Modeoklch(67% 0.21 38) · Contrast 6.4:1
--ds-border-subtle
T2 Semantic

Standard card borders, table dividers, and subtle lines

Light Modeoklch(92.5% 0.012 250) · Delicate Satin Slate
Dark Modergba(255, 255, 255, 0.08) · Satin Rim Shader
--ds-border-bold
T2 Semantic

Active card outlines, grouped dividers, and inputs

Light Modeoklch(86.5% 0.015 250) · Defined Neutral
Dark Modergba(255, 255, 255, 0.16) · Elevated Rim
--ds-border-focused
T2 Semantic

Accessible keyboard focus ring & active field boundary

Light Modeoklch(62% 0.22 38) · Kimchi 500
Dark Modeoklch(67% 0.21 38) · Kimchi 400
--ds-border-danger
T2 Semantic

Validation error boundary and invalid input outline

Light Modeoklch(57% 0.23 25) · Ruby Crimson
Dark Modeoklch(65% 0.22 25) · Ruby 400
--ds-color-success
T2 Semantic

Access granted, active shift, and verified pass badge

Light Modeoklch(58% 0.20 150) · #10b981 (Emerald)
Dark Modeoklch(68% 0.18 150) · #34d399
--ds-color-warning
T2 Semantic

Expiring visitor pass, maintenance notice, and guard alerts

Light Modeoklch(64% 0.18 80) · #f59e0b (Solar Amber)
Dark Modeoklch(74% 0.16 80) · #fbbf24
--ds-color-danger
T2 Semantic

Access denied, security breach, and emergency blacklist

Light Modeoklch(57% 0.23 25) · #ef4444 (Ruby Crimson)
Dark Modeoklch(65% 0.22 25) · #f87171
--ds-color-info
T2 Semantic

System announcements, telemetry stats, and info logs

Light Modeoklch(52% 0.23 250) · #0052cc (Electric Cobalt)
Dark Modeoklch(65% 0.20 250) · #388bfd