Design System
Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.
Foundations
Design tokens that everything else builds on. Colors, typography, spacing, borders, breakpoints.
Colors
Color palette and CSS variables used throughout the website.
Background Colors
--background-color #181927 --background-frosted rgba(24, 25, 39, 0.05) Surface Colors
--card-surface-raised #2d2d3b --card-surface #1c2638 --card-surface-hover #313d50 Text Colors
--color #e0e0e0 --light-color #f6f5f7 Color Scales
Each section uses a themed color palette. These override --accent-color and --secondary-accent-color at the section level.
--orange-bg --orange-tint --orange-border --orange-lightest --orange-light --orange --orange-dark --orange-darker --orange-darkest --red-bg --red-tint --red-border --red-lightest --red-light --red --red-dark --red-darker --red-darkest --green-bg --green-tint --green-border --green-lightest --green-light --green --green-dark --green-darker --green-darkest --pink-bg --pink-tint --pink-border --pink-lightest --pink-light --pink --pink-dark --pink-darker --pink-darkest --purple-bg --purple-tint --purple-border --purple-lightest --purple-light --purple --purple-dark --purple-darker --purple-darkest --blue-bg --blue-tint --blue-border --blue-lightest --blue-light --blue --blue-dark --blue-darker --blue-darkest --cyan-bg --cyan-tint --cyan-border --cyan-lightest --cyan-light --cyan --cyan-dark --cyan-darker --cyan-darkest Border Colors
--border-color rgba(255, 255, 255, 0.1) --border-hover-color rgba(255, 255, 255, 0.2) Usage
Import variables from @/styles/variables.css or use CSS custom
properties directly in your styles.
Typography
Outfit, weights 100–800. Article typography is the baseline — hero uses oversized variants.
Headings
--h2-size Article Title
clamp(24px, …, 30px) Heading 2
1.15em Heading 3
1em Heading 4
Body
--font-size · line-height: 1.7 Body text. Longer line-height for reading comfort, em-based margins between paragraphs.
--subtitle-size Subtitle text
--button-font-size Hero (oversized)
The hero section uses larger heading sizes for the landing page. These override the defaults.
--h1-size Hero Title
--h2-size Section Title
--h3-size Card Title
Size Variables
| Variable | Value | Min | Max |
|---|---|---|---|
--h1-size | clamp(48px, 1.58rem + 5.05vw, 96px) | 48px | 96px |
--h2-size | clamp(42px, 2.21rem + 1.47vw, 56px) | 42px | 56px |
--h3-size | clamp(18px, 0.95rem + 0.63vw, 24px) | 18px | 24px |
--subtitle-size | clamp(20px, 1.19rem + 0.21vw, 22px) | 20px | 22px |
--font-size-lg | clamp(16px, 0.89rem + 0.42vw, 20px) | 16px | 20px |
--font-size | clamp(16px, 0.89rem + 0.21vw, 18px) | 16px | 18px |
--font-size-sm | clamp(14px, 0.78rem + 0.21vw, 16px) | 14px | 16px |
--font-size-xs | clamp(13px, 0.69rem + 0.42vw, 17px) | 13px | 17px |
--font-size-2xs | 12px | 12px | 12px |
--font-size-3xs | 11px | 11px | 11px |
--button-font-size | 15px | 15px | 15px |
Font Family
The website uses Outfit as the primary font family with weights from 100 to 800.
Spacing
Consistent spacing scale used throughout the application.
Scale
4px 8px 12px 16px 24px 32px 48px 64px Section Spacing
| Variable | Value | Min | Max |
|---|---|---|---|
--section-margin | clamp(96px, 4.11rem + 6.74vw, 160px) | 96px | 160px |
--h2-margin-bottom | clamp(40px, 1.79rem + 2.53vw, 64px) | 40px | 64px |
Borders
Border tokens and radius conventions.
Border Colors
--border-color rgba(255, 255, 255, 0.1) --border-hover-color rgba(255, 255, 255, 0.2) accent-color 35% Focus state borders Accent Border Scales
Each color scale includes a --{color}-border token at 35% opacity, used for chromatic borders.
--orange-border --red-border --green-border --pink-border --purple-border --blue-border --cyan-border Radius Scale
3px Chips, scale indicators 4px Code blocks, small elements 6px Links, badges, nested details 8px Sidebar items, inputs (search), cards (small) 10px Form fields 12px Buttons, cards, preview containers 32px Spotlight, pill shapes 9999px Full circle (spotlight glow) Common Patterns
| Pattern | Border | Radius |
|---|---|---|
| Card | 1px solid var(--border-color) | 12px |
| Form field | 2px solid var(--border-color) | 10px |
| Preview container | 1px solid rgba(255,255,255,0.1) | 12px |
| Sidebar item | none | 8px |
| Button | none | 12px |
| Button (small) | none | 8px |
Breakpoints
SCSS mixins from _breakpoints.scss. All mobile-first, triggered at max-width.
Scale
Mixins
| Mixin | Max Width | Typical Use |
|---|---|---|
@include mobile | 600px | Single column, compact spacing |
@include tablet | 900px | Stacked layouts, smaller typography |
@include desktop | 1100px | Sidebar collapse, grid adjustments |
@include wide | 1200px | Minor width tweaks |
@include ultrawide | 1368px | Max content width boundary |
Usage
@use "@/styles/breakpoints" as *;
.component {
display: grid;
grid-template-columns: 1fr 1fr;
@include tablet {
grid-template-columns: 1fr;
}
@include mobile {
padding: 16px;
}
}
Import with @use "@/styles/breakpoints" as * to use mixins without a namespace prefix.