Design System Reference

This document outlines all design variables available in our system. Use this as a reference guide when implementing UI components.

Table of Contents

Colors

Brand Colors

VariableLight ModeDark ModeUsage
--brand-100#F9FAF7#252c28Lightest brand shade, backgrounds
--brand-200#F5A300#e8b544Primary accent color, call to action
--brand-300#7C8463#a1a687Secondary brand color
--brand-400#5C6066#969b93Subtle brand elements
--brand-500#343A40#878c94Section headers, strong elements
--brand-600#2D3C33#F9FAF7Main text color, strong contrast

Neutral Colors

VariableLight ModeDark ModeUsage
--neutral-000#ffffff#161a19Pure white/black, base surfaces
--neutral-100#F9FAF7#232a26Background, subtle off-white/black
--neutral-200#E9ECEF#2D3C33Subtle containers, dividers
--neutral-300#DEE2E6#343A40Borders, separators, hover states
--neutral-400#CED4DA#444A51Disabled elements, secondary borders
--neutral-500#ADB5BD#5C6066Placeholder text, disabled text
--neutral-600#868E96#7C8463Muted text, secondary content
--neutral-700#495057#b3b8aeBody text in dark mode
--neutral-800#343A40#e0e2dfHeadings in dark mode
--neutral-900#2D3C33#F9FAF7Highest contrast text in dark mode

Surface Colors

VariableValueUsage
--surface-pagevar(--neutral-100)Main page background
--surface-cardvar(--neutral-000)Card and container backgrounds
--surface-variantvar(--brand-100)Alternative surface for variety
--surface-elevatedvar(--neutral-200)Elevated components (modals, popovers)
--surface-hovervar(--neutral-300)Hover state backgrounds
--surface-activevar(--neutral-400)Active/pressed state backgrounds
--surface-disabledvar(--neutral-300)Disabled component backgrounds

Text Colors

VariableValueUsage
--text-primaryvar(--brand-600)Main text color
--text-secondaryvar(--brand-400)Secondary text, subtitles
--text-mutedvar(--neutral-600)Less prominent text, captions
--text-inversevar(--neutral-000)Text on dark backgrounds
--text-on-brandvar(--neutral-000)Text on brand-colored backgrounds
--text-disabledvar(--neutral-500)Disabled text

Accent & Interactive Colors

VariableValueUsage
--accent-mainvar(--brand-200)Primary accent/highlight color
--accent-hover#e29300Hover state for accent elements
--accent-active#b87800Active state for accent elements
--interactive-defaultvar(--brand-200)Default state for interactive elements
--interactive-hovervar(--brand-300)Hover state for interactive elements
--interactive-activevar(--brand-400)Active state for interactive elements
--interactive-focusvar(--accent-main)Focus state indicator

Semantic Status Colors

VariableLight ModeDark ModeUsage
--success-main#1B7C38#57e389Success messages, positive indicators
--success-bg#d3e7d9#173b27Success message backgrounds
--warning-main#F5A300#f5c573Warning messages, caution indicators
--warning-bg#fff4d1#3d2f08Warning message backgrounds
--error-main#C1121F#ff6565Error messages, negative indicators
--error-bg#ffd6d6#412021Error message backgrounds
--info-main#005ca3#69b8f4Informational messages
--info-bg#e0f0ff#143a53Info message backgrounds

Border Colors

VariableValueUsage
--border-light#E9ECEFSubtle borders, dividers
--border-medium#ADB5BDStandard borders
--border-dark#343A40Emphasized borders
--border-focusvar(--accent-main)Focus state borders

Shadow Effects

VariableValueUsage
--shadow-sm0 1px 2px rgba(0,0,0,0.04)Subtle elevation
--shadow-md0 4px 8px rgba(0,0,0,0.10)Medium elevation
--shadow-lg0 8px 16px rgba(0,0,0,0.18)High elevation
--focus-ring0 0 0 3px rgba(245, 163, 0, 0.35)Focus state indicator
--overlay-bgrgba(44, 44, 44, 0.65)Modal/dialog overlays

Gradient Effects

VariableValueUsage
--gradient-brandlinear-gradient(90deg, var(--brand-200), var(--brand-300))Brand gradient for emphasis
--gradient-accentlinear-gradient(90deg, var(--accent-main), var(--accent-hover))Accent gradient for CTAs

Typography

Font Families

VariableValueUsage
--font-brand'Eurostile', sans-serifBrand identity, headings
--font-brand-condensed'Eurostile Condensed', sans-serifSpace-efficient brand text
--font-brand-extended'Eurostile Extended', sans-serifExpanded brand text, hero headers
--font-body'Inter', sans-serifMain body text
--font-accent'JetBrains Mono', monospaceCode, technical content
--font-accent-nl'JetBrains Mono NL', monospaceCode without ligatures

Font Sizes

VariableValuePixelsUsage
--text-xs0.75rem12pxFine print, captions
--text-sm0.875rem14pxSmall text, secondary info
--text-base1rem16pxBody text, default size
--text-lg1.125rem18pxSlightly larger body text
--text-xl1.25rem20pxLead paragraphs, small headings
--text-2xl1.5rem24pxSubheadings, h4-h6
--text-3xl1.875rem30pxMedium headings, h3
--text-4xl2.25rem36pxLarge headings, h2
--text-5xl3rem48pxExtra large headings, h1
--text-6xl3.75rem60pxDisplay headings
--text-7xl4.5rem72pxHero headings
--text-8xl6rem96pxLarge display headings
--text-9xl8rem128pxExtra large display headings

Font Weights

VariableValueUsage
--font-thin100Extremely light text
--font-extralight200Very light text
--font-light300Light text
--font-normal400Regular text (default)
--font-medium500Medium emphasis
--font-semibold600Semi-bold emphasis
--font-bold700Bold text
--font-extrabold800Extra bold text
--font-black900Heaviest weight

Line Heights

VariableValueUsage
--leading-none1No line spacing (headings)
--leading-tight1.25Tight line spacing (compact headings)
--leading-snug1.375Reduced line spacing
--leading-normal1.5Default line spacing
--leading-relaxed1.625Increased line spacing
--leading-loose2Double line spacing

Letter Spacing

VariableValueUsage
--tracking-tighter-0.05emVery tight letter spacing
--tracking-tight-0.025emTight letter spacing
--tracking-normal0emDefault letter spacing
--tracking-wide0.025emWide letter spacing
--tracking-wider0.05emWider letter spacing
--tracking-widest0.1emWidest letter spacing

Text Styling

Text Depth Effects

VariableValueUsage
--text-depth-shadow-sm0.5px 0.5px 0px rgba(0,0,0,0.1)Subtle text shadow
--text-depth-shadow-md1px 1px 1px rgba(0,0,0,0.15)Medium text shadow
--text-depth-shadow-lg2px 2px 2px rgba(0,0,0,0.2)Pronounced text shadow
--text-depth-insetinset 1px 1px 1px rgba(0,0,0,0.2)Inset/pressed text effect
--text-depth-emboss-1px -1px 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(0,0,0,0.1)Embossed text effect

Text Container Widths

ClassValueUsage
.text-container-xsmax-width: 20chVery narrow text container
.text-container-smmax-width: 45chNarrow text container
.text-container-mdmax-width: 65chOptimal reading width
.text-container-lgmax-width: 75chWide text container
.text-container-xlmax-width: 85chVery wide text container

Text Manipulation

ClassEffectUsage
.truncateTruncates with ellipsisSingle-line truncation
.line-clamp-2Clamps to 2 linesMulti-line truncation (2 lines)
.line-clamp-3Clamps to 3 linesMulti-line truncation (3 lines)
.break-normalNormal word breaksDefault word wrapping
.break-wordsBreak on wordsWrap long words
.break-allBreak anywhereBreak at any character

Text Decoration & Transformation

ClassEffectUsage
.text-uppercaseAll capsTransform text to uppercase
.text-lowercaseAll lowercaseTransform text to lowercase
.text-capitalizeTitle CaseCapitalize first letter of each word
.text-underlineUnderlinedAdd underline to text
.text-line-throughStrikethroughAdd line through text
.text-italicItalicizedMake text italic

Special Text Effects

ClassEffectUsage
.text-gradient-brandBrand gradient textApply brand gradient to text
.text-gradient-accentAccent gradient textApply accent gradient to text
.text-outline-smThin text outlineThin outlined text (0.5px)
.text-outline-mdMedium text outlineMedium outlined text (1px)
.text-outline-lgThick text outlineThick outlined text (2px)
.text-depth-smSubtle shadowApply subtle text shadow
.text-depth-mdMedium shadowApply medium text shadow
.text-depth-lgLarge shadowApply large text shadow
.text-depth-insetInset effectApply inset text effect
.text-depth-embossEmbossed effectApply embossed text effect

Responsive Design

Responsive Typography

These classes automatically adjust text size based on viewport width:

ClassSize RangeUsage
.text-responsive-sm0.875rem to 1remSmall responsive text
.text-responsive-md1rem to 1.25remMedium responsive text
.text-responsive-lg1.125rem to 1.875remLarge responsive text
.text-responsive-xl1.25rem to 3remExtra large responsive text
.text-responsive-2xl1.5rem to 4.5remDouble extra large responsive text

Responsive Breakpoints

Typography automatically adjusts at these breakpoints:

BreakpointScreen WidthEffect
Tablet768pxReduced heading sizes
Mobile480pxFurther reduced heading sizes

At tablet breakpoint (max-width: 768px):

  • h1: 36px (was 48px)
  • h2: 30px (was 36px)
  • h3: 24px (was 30px)
  • h4: 20px (was 24px)
  • .heading-hero: 60px (was 72px)
  • .lead: 18px (was 20px)

At mobile breakpoint (max-width: 480px):

  • h1: 30px
  • h2: 24px
  • h3: 20px
  • h4: 18px
  • .heading-hero: 48px