/tokens

Horizen Labs Design Tokens

Brand Colors

Token	Hex	Usage
--hl-navy	#041742	Primary brand, headings, dark accents
--hl-navy-hover	#0A2460	Navy hover state
--hl-teal	#4CDFDD	Accent, borders, highlights, icons
--hl-teal-text	#00C0BD	Teal for text (meets contrast on white)
--hl-teal-light	#E8FAF9	Card hover bg, teal tint surfaces
--hl-teal-border	#4CDFDD	Border accents
--hl-teal-badge-bg	#D4F7F6	Badge background tint
--hl-white	#FFFFFF	Page backgrounds, card backgrounds
--hl-grey	#BABDC3	Borders, dividers, secondary text
--hl-grey-light	#F5F6F8	Alt section backgrounds, input backgrounds
--hl-grey-text	#6B7280	Muted body text
--hl-grey-input	#E5E7EB	Input borders
--hl-magenta	#F251EA	Accent, highlights, special emphasis

Semantic Colors

Token	Value	Usage
--hl-text-primary	#041742	Primary text (navy)
--hl-text-secondary	#6B7280	Secondary/muted text
--hl-text-inverse	#FFFFFF	Text on dark backgrounds
--hl-text-link	#00C0BD	Link text (teal-text)
--hl-text-link-hover	#041742	Link hover state
--hl-bg-primary	#FFFFFF	Primary backgrounds
--hl-bg-secondary	#F5F6F8	Secondary backgrounds
--hl-bg-dark	#041742	Dark backgrounds (nav CTA, overlays)
--hl-bg-teal	#4CDFDD	Teal backgrounds (footer)
--hl-border-default	#E5E7EB	Default borders
--hl-border-accent	#4CDFDD	Accent borders (teal)

Status Colors

Token	Hex	Usage
--hl-success	#10B981	Success states, confirmations
--hl-error	#EF4444	Error states, destructive actions
--hl-warning	#F59E0B	Warning states, caution
--hl-info	#3B82F6	Informational states

Extended Color Scales

Teal Scale

Token	Hex
--hl-teal-50	#E8FAF9
--hl-teal-100	#D4F7F6
--hl-teal-200	#A8EFED
--hl-teal-300	#7DE7E4
--hl-teal-400	#4CDFDD
--hl-teal-500	#00C0BD
--hl-teal-600	#009E9C
--hl-teal-700	#007D7B
--hl-teal-800	#005C5A
--hl-teal-900	#003B3A

Navy Scale

Token	Hex
--hl-navy-50	#E8EBF2
--hl-navy-100	#C5CCE0
--hl-navy-200	#9EAACC
--hl-navy-300	#7788B8
--hl-navy-400	#5A6FA8
--hl-navy-500	#3D5699
--hl-navy-600	#2D4385
--hl-navy-700	#1C3070
--hl-navy-800	#0A2460
--hl-navy-900	#041742

Magenta Scale

Token	Hex
--hl-magenta-50	#FEE8FD
--hl-magenta-100	#FCC5FB
--hl-magenta-200	#F99EF7
--hl-magenta-300	#F677F3
--hl-magenta-400	#F251EA
--hl-magenta-500	#D83DD0
--hl-magenta-600	#BE29B6
--hl-magenta-700	#A4159C
--hl-magenta-800	#7A0F74
--hl-magenta-900	#50094C

Gradients

Token	Value	Usage
--hl-gradient-brand	linear-gradient(135deg, #4CDFDD 0%, #F251EA 100%)	Special CTAs, hero accents
--hl-gradient-brand-reverse	linear-gradient(135deg, #F251EA 0%, #4CDFDD 100%)	Reverse accent direction

Typography Scale

Headings (Azeret Mono, Bold 700)

Style	Size	Line Height	Letter Spacing	Weight
H0 (Hero)	80px	1.0	-1px	700
H1	65px	1.1	-0.5px	700
H2	50px	1.15	0	700
H3	45px	1.2	0	700
H4	30px	1.3	0	700

Subheadings & Labels (Roboto, Bold/SemiBold, UPPERCASE)

Style	Size	Line Height	Letter Spacing	Weight	Transform
Subheading Large	16px	1.4	3.8px	700	uppercase
Subheading	14px	1.4	3.2px	700	uppercase
Subheading Small	12px	1.4	2.8px	700	uppercase
Nav Link	14px	1.4	3.2px	600	uppercase
CTA Text	14px	1.4	2.8px	700	uppercase
Badge Text	12px	1.4	2.4px	700	uppercase
Label	11px	1.4	2.4px	600	uppercase

Body Text (Roboto)

Style	Size	Line Height	Weight
Body Large	18px	1.7	400
Body	16px	1.7	400
Body Small	14px	1.6	400
Body XSmall	12px	1.5	400
Body Bold	16px	1.7	700
Body SemiBold	16px	1.7	600

Typography Rules

1. Headings always use Azeret Mono Bold — gives the monospace technical feel.
2. Body text always uses Roboto — clean readability.
3. CTAs, nav links, badges, labels are ALWAYS uppercase with wide letter-spacing.
4. Never swap heading and body fonts.
5. Letter-spacing on uppercase elements ranges from 2.4px (badges) to 3.8px (large subheadings).
6. Load fonts:

   Azeret Mono: 700
   Roboto: 400, 500, 600, 700
   

Spacing Tokens

Token	Value	Usage
--hl-space-1	4px	Tight gaps, icon spacing
--hl-space-2	8px	Small gaps, inline spacing
--hl-space-3	10px	Compact padding
--hl-space-4	12px	Badge padding, small gaps
--hl-space-5	16px	Standard inner padding
--hl-space-6	20px	Card padding, medium gaps
--hl-space-8	25px	Component spacing
--hl-space-10	40px	Large component gaps
--hl-space-12	50px	Section inner spacing
--hl-space-14	60px	Large section gaps
--hl-space-16	80px	Section padding
--hl-space-20	100px	Desktop section padding
--hl-space-24	120px	Large section padding
--hl-space-28	150px	Desktop section vertical padding
--hl-space-32	200px	Maximum spacing

Note: This is a custom scale, NOT a strict 8px grid. Values are tuned for the institutional layout.

Section Padding Pattern

/* Large desktop (1280px+) */
.section { padding: 150px 100px; }

/* Desktop (1024px+) */
@media (max-width: 1279px) {
  .section { padding: 100px 60px; }
}

/* Tablet (768px+) */
@media (max-width: 1023px) {
  .section { padding: 80px 40px; }
}

/* Mobile */
@media (max-width: 767px) {
  .section { padding: 40px 20px; }
}

Shadows

Structural Shadows

Token	Value	Usage
--hl-shadow-sm	0 1px 3px rgba(4,23,66,0.04)	Subtle elevation, inputs, default cards
--hl-shadow-md	0 4px 16px rgba(4,23,66,0.06)	Cards, dropdowns
--hl-shadow-lg	0 8px 32px rgba(4,23,66,0.08)	Modals, elevated panels
--hl-shadow-xl	0 16px 48px rgba(4,23,66,0.1)	Large overlays, hero cards
--hl-shadow-card-hover	0 12px 40px rgba(4,23,66,0.1)	Card hover state — pair with translateY lift

Glow Shadows

Token	Value	Usage
--hl-shadow-teal	0 4px 24px rgba(76,223,221,0.15)	Teal-accent elements: balloons, tooltips, active states
--hl-glow-teal-strong	0 0 16px rgba(76,223,221,0.4)	Active progress dots, focused teal elements
--hl-glow-teal-ambient	0 0 40px rgba(76,223,221,0.2)	Architecture node hover, large glow halos
--hl-glow-spinner	0 0 24px rgba(76,223,221,0.3)	Spinner ambient glow
--hl-glow-status	0 0 8px rgba(34,197,94,0.5)	Online/success status dot glow

Rules:

• Structural shadows use navy rgba, never pure black
• Glow shadows use the element's own accent color at 15–40% opacity
• Card hover always pairs shadow escalation with translateY lift
• Glows are additive — they supplement, not replace, structural shadows

Opacity Scale (for dark sections)

When building on dark/navy backgrounds, use consistent opacity for rgba(255,255,255,*):

Opacity	Usage
0.9	Headings, primary text
0.7	Secondary text
0.6	Body text
0.5	Muted text, labels
0.4	Tertiary labels
0.3	Faded text
0.15	Borders, disabled state dots
0.1	Subtle borders, column separators
0.08	Faint borders
0.05	Card/cell backgrounds
0.04	Grid line backgrounds
0.03	Very subtle backgrounds

Transitions & Easing

Token	Value	Usage
--hl-transition-fast	150ms ease	Micro-interactions: color changes, opacity
--hl-transition-normal	all 0.3s ease	Card hover, transforms, border reveals
--hl-transition-slow	500ms ease	Large layout shifts, page transitions
--hl-transition-border	0.4s ease	Gradient border reveals (height/scaleX animations)

Rules:

• Card hover: all 0.3s ease (transform + shadow + color in one transition)
• Border reveals: 0.4s ease (slightly slower than the card lift for staggered feel)
• Color-only changes: 0.2s ease
• Always include transition: none on disabled elements

Additional Color Tokens (V2)

Token	Value	Usage
--hl-navy-deep	#020e2b	Dark section backgrounds (darker than navy)
--hl-navy-90	rgba(4,23,66,0.9)	Default body text
--hl-navy-70	rgba(4,23,66,0.7)	Callout text
--hl-navy-50	rgba(4,23,66,0.5)	Subtitles, secondary text
--hl-navy-30	rgba(4,23,66,0.3)	Inactive tabs, faded elements
--hl-navy-15	rgba(4,23,66,0.15)	Borders, spinner tracks
--hl-navy-10	rgba(4,23,66,0.1)	Dot pattern backgrounds
--hl-navy-05	rgba(4,23,66,0.05)	Grid line backgrounds
--hl-navy-03	rgba(4,23,66,0.03)	Subtle hover backgrounds
--hl-teal-glow	rgba(76,223,221,0.12)	Teal tint surfaces, badge backgrounds
--hl-teal-glow-strong	rgba(76,223,221,0.2)	Focus rings, active borders
--hl-teal-bg	rgba(76,223,221,0.06)	Very subtle teal wash
--hl-magenta-glow	rgba(242,81,234,0.08)	Magenta tint surfaces
--hl-border	rgba(4,23,66,0.08)	Default borders
--hl-border-hover	rgba(4,23,66,0.15)	Hover border strengthening

Gradient Tokens (V2)

Token	Value	Usage
--hl-gradient-brand	linear-gradient(135deg, #4CDFDD 0%, #F251EA 100%)	Special CTAs, hero accents
--hl-gradient-brand-reverse	linear-gradient(135deg, #F251EA 0%, #4CDFDD 100%)	Reverse accent direction
--hl-gradient-accent-bar	linear-gradient(90deg, #F251EA, #4CDFDD)	Top accent bar, footer top border
--hl-gradient-left-border	linear-gradient(180deg, #4CDFDD, #F251EA)	Vertical card left-border reveal
--hl-gradient-bottom-border	linear-gradient(90deg, #4CDFDD, #F251EA)	Horizontal card bottom-border reveal
--hl-gradient-text	linear-gradient(135deg, #00C0BD 0%, #F251EA 100%)	Gradient text (hero emphasis)
--hl-gradient-arch-arrow	linear-gradient(90deg, #00C0BD, #F251EA)	Architecture diagram flow arrows