Design system
ZextAI Design Language
The tokens, type, and components powering the system. Every section component is props-driven and maps cleanly to a headless CMS.
Color tokens
--bg
#060810
--surface
#0A0E1A
--surface-2
#0B1224
--accent-blue
#2E6BFF
--accent-cyan
#22D3EE
--accent-glow
#35E3FF
--text
#EAF0F7
--muted
#8B97AD
Type scale
DisplayProduction AISG · 700
H1Production AISG · 700
H2Production AISG · 600
H3Production AISG · 600
BodyProduction AISora · 400
Mono labelProduction AIJBM · 500
Spacing scale
4px
8px
16px
24px
32px
48px
64px
96px
Motion tokens
ease-out-expocubic-bezier(.16,1,.3,1)
duration-base0.85s
reveal-shifttranslateY(30px)
stagger-step60–80ms
Component inventory & states
Buttons · primary / secondary / ghost / glow + disabled
Form fields · default / focus / error / success
Enter a valid email
Looks good
Tabs
Tabs switch related content in place without a route change — useful for product specs, docs, and comparison views. Keyboard-navigable with roving focus.
Breadcrumb · badges · pills
Home/Services/AI Agents
LIVEBETAChip