EQL Rebuild — Design System Variables

Collection: Primitives

Colors

Variable	Value
White	white
Neutral Lightest	#eee
Neutral Lighter	#ccc
Neutral Light	#aaa
Neutral	#666
Neutral Dark	#444
Neutral Darker	#222
Neutral Darkest	black

Opacity

Variable	Value
Transparent	transparent
White 5	rgba(255, 255, 255, 0.05)
White 10	rgba(255, 255, 255, 0.1)
White 15	rgba(255, 255, 255, 0.15)
White 20	rgba(255, 255, 255, 0.2)
White 30	rgba(255, 255, 255, 0.3)
White 40	rgba(255, 255, 255, 0.4)
White 50	rgba(255, 255, 255, 0.5)
White 60	rgba(255, 255, 255, 0.6)
Neutral Darkest 5	rgba(0, 0, 0, 0.05)
Neutral Darkest 10	rgba(0, 0, 0, 0.1)
Neutral Darkest 15	rgba(0, 0, 0, 0.15)
Neutral Darkest 20	rgba(0, 0, 0, 0.2)
Neutral Darkest 30	rgba(0, 0, 0, 0.3)
Neutral Darkest 40	rgba(0, 0, 0, 0.4)
Neutral Darkest 50	rgba(0, 0, 0, 0.5)
Neutral Darkest 60	rgba(0, 0, 0, 0.6)

Collection: Color Schemes

Brand

Variable	Value	Alias / Source
Black	black	→ Neutral Darkest
White	white	→ White
Yellow	#ffde2f
Yellow Light	#fff6c7
Luminous Grey	#e1dfd1
Taupe	#baaea3
Sand	#fae3bc
Red Orange	#ff5c00
Red Orange Light	#ffad80
Neon Purple	#d12ef6
Fuchsia	#e391f5
Neon Pink	#ff7ada
Neon Pink Light	#ffbdec
Pastel Green	#90e768
Pastel Green Light	#c7f3b3
Maya Blue	#56c2ff
Maya Blue Light	#abe1ff

Collection: Typography

Font Families

Heading	Frequenz
Body	Lab Grotesque

Font Size

Variable	Mobile	Desktop	Fluid	Formula
Heading – H1	42px 2.625rem	50px 3.125rem	● Yes	clamp(2.625rem, …, 3.125rem)
Heading – H2	30px 1.875rem	36px 2.25rem	● Yes	clamp(1.875rem, …, 2.25rem)
Heading – H3	26px 1.625rem	26px 1.625rem	— Static	clamp(1.625rem, …, 1.625rem)
Heading – H4	18px 1.125rem	18px 1.125rem	— Static	clamp(1.125rem, …, 1.125rem)
Heading – H5	17px 1.06rem	20px 1.25rem	● Yes	clamp(1.06rem, …, 1.25rem)
Data Heading	80px	80px	— Static	80px
Introduction	22px 1.375rem	22px 1.375rem	— Static	clamp(1.375rem, …, 1.375rem)
Body	18px 1.125rem	18px 1.125rem	— Static	clamp(1.125rem, …, 1.125rem)
Small	15px 0.9375rem	16px 1rem	● Yes	clamp(0.9375rem, …, 1rem)
Label	15px 0.94rem	16px 1rem	● Yes	clamp(0.94rem, …, 1rem)
Boxed Text – Heading	26px 1.63rem	55px 3.44rem	● Yes	clamp(1.63rem, …, 3.44rem)
Legend	16px 1rem	16px 1rem	— Static	clamp(1rem, …, 1rem)
Button	16px 1rem	16px 1rem	— Static	clamp(1rem, …, 1rem)

Line Height

Variable	Mobile	Desktop	Fluid	Formula
Heading – H1	52px 3.25rem	60px 3.75rem	● Yes	clamp(3.25rem, …, 3.75rem)
Heading – H2	40px 2.5rem	46px 2.875rem	● Yes	clamp(2.5rem, …, 2.875rem)
Heading – H3	32px 2rem	32px 2rem	— Static	clamp(2rem, …, 2rem)
Heading – H4	24px 1.5rem	24px 1.5rem	— Static	clamp(1.5rem, …, 1.5rem)
Introduction	30px 1.875rem	30px 1.875rem	— Static	clamp(1.875rem, …, 1.875rem)
Body	24px 1.5rem	24px 1.5rem	— Static	clamp(1.5rem, …, 1.5rem)
Small	17px 1.06rem	20px 1.25rem	● Yes	clamp(1.06rem, …, 1.25rem)
Label	20px 1.25rem	20px 1.25rem	— Static	clamp(1.25rem, …, 1.25rem)
Boxed Text – Heading	30px 1.88rem	60px 3.75rem	● Yes	clamp(1.88rem, …, 3.75rem)
Legend	20px 1.25rem	20px 1.25rem	— Static	clamp(1.25rem, …, 1.25rem)
Button	16px 1rem	29px 1.8125rem	● Yes	clamp(1rem, …, 1.8125rem)
Data Heading	75%	75%	— Static	75%

Letter Spacing

Variable	Mobile	Desktop	Fluid	Formula
Label	0.6px 0.0375rem	0.64px 0.04rem	● Yes	clamp(0.0375rem, …, 0.04rem)
Legend	1.6px	1.6px	— Static	1.6px

Font Weight

Thin100

Extra Light200

Light300

Regular400

Medium500

Semi-Bold600

Bold700

Extra Bold800

Black900

Collection: UI Styles

Radius

Variable	Value
Large	0px
Medium	0px
Small	0px

Stroke

Variable	Value	Formula / Alias
Border Width	2px
Divider Width	1px
Button Border	2px	→ Border Width
Icon Border	2px	→ Border Width
Image Border	2px	→ Border Width
Navbar	2px	→ Border Width
Negative Border Width	-2px	calc(Border Width * -1)

Padding

Variable	Mobile	Desktop	Fluid	Formula
Padding Global	24px 1.5rem	64px 4rem	● Yes	clamp(1.5rem, …, 4rem)
Icon Padding	12.5%	12.5%	— Static	12.5%

Collection: Spacing

Spacing Scale

Variable	Mobile	Desktop	Fluid	Formula
Spacing 8	8px 0.5rem	8px 0.5rem	— Static	clamp(0.5rem, …, 0.5rem)
Spacing 16	12px 0.75rem	16px 1rem	● Yes	clamp(0.75rem, …, 1rem)
Spacing 24	16px 1rem	24px 1.5rem	● Yes	clamp(1rem, …, 1.5rem)
Spacing 32	24px 1.5rem	32px 2rem	● Yes	clamp(1.5rem, …, 2rem)
Spacing 40	32px 2rem	40px 2.5rem	● Yes	clamp(2rem, …, 2.5rem)
Spacing 48	32px 2rem	48px 3rem	● Yes	clamp(2rem, …, 3rem)
Spacing 56	40px 2.5rem	56px 3.5rem	● Yes	clamp(2.5rem, …, 3.5rem)
Spacing 64	48px 3rem	64px 4rem	● Yes	clamp(3rem, …, 4rem)
Spacing 72	48px 3rem	72px 4.5rem	● Yes	clamp(3rem, …, 4.5rem)
Spacing 80	56px 3.5rem	80px 5rem	● Yes	clamp(3.5rem, …, 5rem)
Spacing 88	56px 3.5rem	88px 5.5rem	● Yes	clamp(3.5rem, …, 5.5rem)
Spacing 96	56px 3.5rem	96px 6rem	● Yes	clamp(3.5rem, …, 6rem)
Spacing 104	64px 4rem	104px 6.5rem	● Yes	clamp(4rem, …, 6.5rem)
Spacing 136	72px 4.5rem	136px 8.5rem	● Yes	clamp(4.5rem, …, 8.5rem)

Stacking Cards Top Padding

Variable	Formula
Card 1	→ Spacing 136
Card 2	calc((Card 1 + Spacing 56) - Border Width)
Card 3	calc((Card 1 + Spacing 56 × 2) - Border Width × 2)
Card 4	calc((Card 1 + Spacing 56 × 3) - Border Width × 3)
Card 5	calc((Card 1 + Spacing 56 × 4) - Border Width × 4)
Card 6	calc((Card 1 + Spacing 56 × 5) - Border Width × 5)
Card 7	calc((Card 1 + Spacing 56 × 6) - Border Width × 6)
Card 8	calc((Card 1 + Spacing 56 × 7) - Border Width × 7)
Card 9	calc((Card 1 + Spacing 56 × 8) - Border Width × 8)
Card 10	calc((Card 1 + Spacing 56 × 9) - Border Width × 9)

Other

Variable	Value
Navbar Header Top Clearance Offset	6.25rem (100px)

Notes: All clamp values scale between 320px (20rem) and 1312px (82rem) viewport widths. "Static" entries use identical min/max — no fluid scaling. Base rem = 16px. Brand colors marked with → are aliases referencing Primitive variables.