Kalag Design System
Style guide
A single reference for tokens, typography, and components used across the Kalag Marketing platform. Toggle themes in the navbar to preview light and dark modes.
Color tokens
Semantic colors driven by CSS variables.
background
--background
foreground
--foreground
primary
--primary
primary-glow
--primary-glow
secondary
--secondary
muted
--muted
accent
--accent
border
--border
success
--success
warning
--warning
info
--info
destructive
--destructive
Typography
Plus Jakarta Sans for headings, Inter for body.
Display / H1 — 48px
Heading / H2 — 30px
Heading / H3 — 24px
Heading / H4 — 20px
Body — the quick brown fox jumps over the lazy dog. Highly readable Inter at 16px with tuned OpenType features.
Small / muted — supporting copy for captions, hints, and secondary information.
Mono — const kalag = "marketing";
Border radius
Favor xl / 2xl for cards and surfaces.
sm
md
lg
xl
2xl
3xl
full
Shadow scale
Soft, layered elevation.
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
Spacing scale
Tailwind's 4px base grid.
14px
28px
312px
416px
624px
832px
1248px
1664px
2496px
Buttons
Badges
Default
Secondary
Outline
Destructive
Success
Warning
Info
Cards
Standard card
Clean surface for content and forms.
Use for talent profiles, listings, and dashboard tiles.
Brand card
Gradient surface for highlights.
Use sparingly for promos and hero calls-to-action.
Glass card
Frosted panel accent.
Reserved for overlays and popover surfaces.
Form controls
Tabs
Overview content — talent bio, skills, and rate card.
Avatars & Tooltip
KMADJL
Dialog & Toast
Skeleton loaders
End of style guide