Design System
The system behind every build.
A look at the systems thinking behind every BytGlen build — real tokens, live components, and the motion patterns you see across the site.
Preview theme
01 · Foundations
Color tokens
Every color is a semantic CSS variable defined in src/styles.css. Tap any variable name or value to copy it — values swap live with the theme toggle.
Background
Foreground
Surface
Card
Primary
Primary FG
Secondary
Muted
Muted FG
Accent
Destructive
Border
Input
Ring
Gradient · Hero
Text · Gradient
Design meets intelligence
Glow · Primary
02 · Foundations
Typography scale
Display / H1
72px · 600 · -0.02em
Where design meets intelligence.
H2 · Section
60px · 600
Work that speaks for itself.
H3 · Card
30px · 600
A full creative technology studio.
H4 · Subhead
18px · 600
Systems thinking, from token to launch.
Body · Large
18px · 400 · 1.6
Every deliverable is built on the same design system you see here — real components, live tokens, and motion baked into every interaction.
Body
14px · 400 · 1.6
Muted foreground, used for supporting copy and descriptions across the site.
Eyebrow / Caption
12px · 400 · 0.3em
Design System
04 · Components
Cards
Glass card
Frosted surface with subtle border, primary glow on hover. Used across Services, Why Us and Approach.
Trailer
Case study
PROJECT CARD
05 · Components
Form elements
FlexibleASAP
06 · Foundations
Spacing & radius
Radius scale
base = 1.25rem (20px)Spacing scale
step = 0.25rem (4px)07 · Interaction
States & accessibility
Every interactive component exposes the four canonical states. Tab through this section with the keyboard to see focus-visible rings on real controls.
Button states
Default
Hover (forced)
Focus-visible
Disabled
Destructive
Input states
Default
Focus-visible
Filled
Disabled
Error
Enter a valid email address.
Toggle, checkbox & radio
Switch
Checkbox
Radio