Emergent
Design System · Generated 15/04/2026 · 33 colors · 41 type tokens · 27 spacing steps · 9 breakpoints · 3 motion tokens
April 2026
Color Palette
Background Colors
Black
#000000
Black 3
#0A0A0A
Dark Gray 6
#1A1A1A
Dark Gray 7
#252528
Dark Gray 8
#2A2A2A
Dark Gray 4
#525252
Dark Gray
#666666
Light Gray 2
#EBEBEB
Light Gray 3
#F0F0EF
White 2
#F5F4F2
White
#FFFFFF
Text Colors
Black 2
#050505
Dark Gray 2
#0E0E0E
Dark Gray 5
#0E0E0F
Dark Gray 3
#262629
Dark Blue
#4B5563
Mid Gray 2
#808080
Dark Green
#00661F
Dark Green 2
#00330F
Green 2
#338037
Border Colors
Light Gray (Primary)
#E5E3E1
Light Gray 4
#E3E3E2
Blue 3
#6B7280
Fill & Accent Colors
Mid Gray
#8A8A8A
Blue
#4E9BEE
Cyan
#57D5FE
Blue 2
#3489FE
Orange
#E57845
Red
#FF5F57
Orange 2
#FFBD2E
Green
#28C840
Light Green
#E5FFED
Green 3
rgba(0,204,11,.1)
Brand Gradient
Auth Gradient
Blue → Cyan → Blue 2
Typography
Primary Display · Brockmann
Emergent
Build the future with AI — ship products at unprecedented speed.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
UI Font · Inter / ui-sans-serif
Inter
Build intelligent applications. Ship with confidence. Scale without limits.
Regular · 400 Medium · 500 Semibold · 600
Emergent.
Display Hero · 72px · Bold · line-height: 72px · letter-spacing: −3px
Build the future with AI
Heading XL · 36px · Bold · line-height: 40px · letter-spacing: −1.8px
Intelligent apps, fast
Heading Large · 32px · Semibold · line-height: 36px · letter-spacing: −1.2px
From concept to production in hours, not months.
Heading Medium · 24px · Semibold · line-height: 32px · letter-spacing: −0.9px
Emergent combines powerful AI models with an intuitive interface so your team can ship products at unprecedented velocity.
Body Large · 18px · Regular · line-height: 24px · letter-spacing: −0.44px
Connect your data sources, define your workflows, and let AI handle the implementation details.
Body Default · 16px · Regular · line-height: 24px · letter-spacing: −0.32px
Last deployed 3 minutes ago · Build #2847 · Production
Body Small · 14px · Regular · line-height: 20px · letter-spacing: −0.15px
MODELS · WORKFLOWS · DEPLOYMENTS
Caption / Label · 12px · Semibold · uppercase · letter-spacing: 1.2px
Line Heights
Tight
20px
Snug
21px
Normal
24px
Relaxed
32px
Loose
33px
Spacious
36px
Open
40px
Display
72px
Letter Spacing
Emergent
Tight
−3px · hero display
Build faster
Normal
−1.8px · main headings
Ship smarter
Wide
−1.2px · subheadings
DEPLOY
Positive
+1.4px · labels
Spacing
Spacing Scale
27 tokens — 2px → 428px
2
4
6
8
10
12
16
20
24
28
32
40
48
50
64
68
80
102
120
200
428
Borders
Border Radii
md
4px
lg
5px
xl
6px
2xl
8px
full
12px
r7
16px
r8
20px
r9
28px
r10
50px
r11 / Pill
9999px
Border Width
Hairline
1px · ×16
Single border width used across the system — cards, inputs, separators, and table rows via --border-width-hairline: 1px. Note: --radius-sm uses asymmetric value 0px 0px 6px 6px for bottom-only rounding.
Shadow / Elevation
Shadow Tokens
3 tokens
Subtle
×4
rgba(0,0,0,.05) 1px · lightweight surface lift
Raised
×2
rgba(0,0,0,.1) 10px 15px · cards, panels, dropdowns
Floating
×1
rgba(0,0,0,.25) 25px 50px · modals, command palette
Z-Index
LayerValueUsage
z-1 (Background)-10Background decorations, canvas layers behind content
z-2 (Navigation)10Sticky headers, fixed sidebars, top navigation
z-3 (Overlay)100Dropdowns, tooltips, context menus, popovers
z-4 (Modal)1000Modal dialogs, full-screen overlays, command palette
z-5 (Toast)1002Toast notifications layered above modals
Breakpoints
XS
379px
SM
600px
MD
640px
LG
767px
XL
768px
2XL
1024px
3XL
1280px
BP-8
1536px
BP-9
1920px
9 breakpoints — from 379px (narrow mobile) through 1920px (ultrawide). Notably starts at 379px for very small phones, and extends up to 1920px for large displays.
Opacity
Opacity Scale
3 tokens — 0.50 · 0.60 · 0.80
Half
50% · ×6
Muted
60% · ×2
Strong
80% · ×3
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
Dark Gray 2 (#0E0E0E)Black (#000000)1.09:1Fail
Dark Gray 2 (#0E0E0E)Dark Gray (#666666)3.36:1AA Large
Dark Gray 2 (#0E0E0E)White (#FFFFFF)19.3:1AAA
Dark Gray 2 (#0E0E0E)Light Gray 2 (#EBEBEB)16.19:1AAA
Dark Gray 3 (#262629)Black (#000000)1.39:1Fail
Dark Gray 3 (#262629)White (#FFFFFF)15.09:1AAA
Dark Gray 3 (#262629)Light Gray 2 (#EBEBEB)12.66:1AAA
Dark Blue (#4B5563)Black (#000000)2.78:1Fail
Dark Blue (#4B5563)White (#FFFFFF)7.56:1AAA
Dark Blue (#4B5563)Light Gray 2 (#EBEBEB)6.34:1AA
Dark Green (#00661F)Black (#000000)2.92:1Fail
Dark Green (#00661F)White (#FFFFFF)7.19:1AAA
Dark Green (#00661F)Light Gray 2 (#EBEBEB)6.03:1AA
Dark Gray 5 (#0E0E0F)Dark Gray (#666666)3.36:1AA Large
Dark Gray 5 (#0E0E0F)White (#FFFFFF)19.29:1AAA
CSS Variables Reference
Background Colors11 tokens
Black--color-black#000000
Black 3--color-black-3#0A0A0A
Dark Gray 6 (Card)--color-dark-gray-6#1A1A1A
Dark Gray 7 (Header)--color-dark-gray-7#252528
Dark Gray 8 (Hover)--color-dark-gray-8#2A2A2A
Dark Gray 4--color-dark-gray-4#525252
Dark Gray (Mid)--color-dark-gray#666666
Light Gray 2--color-light-gray-2#EBEBEB
Light Gray 3--color-light-gray-3#F0F0EF
White 2--color-white-2#F5F4F2
White--color-white#FFFFFF
Text, Border & Fill Colors22 tokens
Black 2--color-black-2#050505
Dark Gray 2 (Primary Text)--color-dark-gray-2#0E0E0E
Dark Gray 3 (Body Text)--color-dark-gray-3#262629
Mid Gray (Muted)--color-mid-gray#8A8A8A
Mid Gray 2--color-mid-gray-2#808080
Dark Blue--color-dark-blue#4B5563
Dark Green--color-dark-green#00661F
Dark Green 2--color-dark-green-2#00330F
Light Gray (Border)--color-light-gray#E5E3E1
Light Gray 4 (Border)--color-light-gray-4#E3E3E2
Blue 3 (Border)--color-blue-3#6B7280
Blue (Brand)--color-blue#4E9BEE
Cyan (Brand)--color-cyan#57D5FE
Blue 2 (Brand)--color-blue-2#3489FE
Orange--color-orange#E57845
Red--color-red#FF5F57
Orange 2--color-orange-2#FFBD2E
Green--color-green#28C840
Green 2--color-green-2#338037
Light Green--color-light-green#E5FFED
Green 3--color-green-3rgba(0,204,11,.1)
Typography41 tokens
Brockmann--font-family-3Brockmann
Inter / ui-sans-serif--font-family-4Inter
Ndot--font-family-6Ndot
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs--font-size-2xs12px
xs--font-size-xs14px
sm--font-size-sm15px
base--font-size-base16px
lg--font-size-lg18px
xl--font-size-xl22px
2xl--font-size-2xl24px
3xl--font-size-3xl32px
4xl--font-size-4xl36px
5xl (Display)--font-size-5xl72px
Tight--letter-spacing-tight−3px
Normal--letter-spacing-normal−1.8px
Wide--letter-spacing-wide−1.2px
Wider--letter-spacing-wider−1px
LS-8--letter-spacing-ls-8−0.44px
LS-10--letter-spacing-ls-10−0.15px
LS-11--letter-spacing-ls-11+0.4px
LS-12--letter-spacing-ls-12+1.2px
LS-13--letter-spacing-ls-13+1.4px
Spacing27 tokens
Space 1--space-12px
Space 2--space-24px
Space 3--space-36px
Space 4 (SM)--space-48px
Space 5--space-510px
Space 6--space-612px
Space 8 (MD)--space-816px
Space 10--space-1020px
Space 12 (LG)--space-1224px
Space 16--space-1628px
Space 20 (XL)--space-2032px
Space 32--space-3240px
Space 48--space-4848px
Space 64--space-6450px
Space 80--space-8064px
Space 128--space-12880px
Space 192--space-192102.5px
Space 256--space-256120px
Space 25--space-25200px
Space 28 (Max)--space-28428px
Borders & Radius11 tokens
Hairline--border-width-hairline1px
sm (bottom-only)--radius-sm0 0 6px 6px
md--radius-md4px
lg--radius-lg5px
2xl--radius-2xl8px
full--radius-full12px
r7--radius-r716px
r8--radius-r820px
r9--radius-r928px
r10--radius-r1050px
r11 / Pill--radius-r119999px
Motion, Opacity & Layers17 tokens
Instant--duration-instant0.15s · ×68
Fast--duration-fast0.2s · ×125
Normal--duration-normal0.3s · ×35
Easing—None defined
Half 50%--opacity-500.5
Muted 60%--opacity-600.6
Strong 80%--opacity-800.8
Background--z-1-10
Navigation--z-210
Overlay--z-3100
Modal--z-41000
Toast--z-51002
XS--breakpoint-xs379px
SM--breakpoint-sm600px
2XL--breakpoint-2xl1024px
BP-9--breakpoint-bp-91920px
Emergent Design System · Generated 15/04/2026 · 33 color tokens · 41 type tokens · 27 spacing steps · 11 border radii · 1 border width · 3 shadows · 3 durations · 5 z-index layers · 9 breakpoints · 3 opacity tokens