Design System
This page is generated with Claude CodeOverview
This document defines the design system for stoll.studio, including typography, colors, spacing, layout components, and the theming system. All design tokens are implemented as CSS custom properties in a 3-tier architecture.
| Base Colors | Actual hex/rgba values (text, accents, surfaces, borders) |
| Semantic Tokens | Reference base colors for specific purposes (links, bullets, code) |
| Component Tokens | Reference base/semantic colors for specific components (sticky bar, blockquotes, skip link) |
Typography
Font families and their usage across the site.
| Primary | Hanken Grotesk (variable, 100–900) — body text, headings, labels |
| Monospace | IBM Plex Mono — code blocks, navigation links |
Font sizes (desktop base: 20px, mobile base: 18px).
| H1 | 2rem (40px) — page titles |
| H2 | 1.3rem (26px) desktop, 1.8rem mobile — main statements |
| H3 | 1.25rem (25px) desktop, 1.4rem mobile |
| Body | 1rem (20px) desktop, 1.05rem mobile |
| Masthead | 1.5rem (30px) desktop, 1.6rem mobile |
| Small/Meta | 0.8–0.85rem (16–17px) — captions, dates, notes |
Font weights using variable font capabilities.
| 300 | Light |
| 400 | Regular (default body text) |
| 500 | Medium (navigation links) |
| 550 | Between medium and semi-bold (two-col labels) |
| 600 | Semi-bold (headings, bold text) |
Themes
Four themes available, activated via URL parameter (?theme=name) or the footer switcher. Themes override base color tokens; semantic and component tokens inherit automatically.
| Light | Light theme — white surface, Hanken Grotesk, yellow accent bar with black text |
| Dark | Dark theme — #1a1a1a surface, Hanken Grotesk, blue bar (#5dade2) with black text |
| Vibrant | Vibrant blue (#3D38F5) surface, pink (#FF0080) accents, lime (#D4FF00) links |
| Terminal | Terminal green (#00FF41) on pure black (#000), IBM Plex Mono throughout, normal weight (400) text, bright green links |
Theme switching is handled by theme-switcher.js which reads the URL parameter, applies the data-theme attribute on <html>, and propagates the theme to all internal links. A critical inline script in <head> prevents flash of unstyled content.
Light Theme Colors
Text colors.
| Primary | #313131 — main headings, strong text |
| Secondary | #515151 — body text, paragraphs |
| Tertiary | #7a7a7a — muted text, bullets |
| Quaternary | #9a9a9a — dates, very muted elements |
| Light | #c0c0c0 — taglines, very light text |
Accent, surface and border colors.
| Accent 1 | #ffff00 — signature yellow |
| Accent 2 | #ff0000 — red |
| Surface | #ffffff — main background |
| Surface Emphasized | #f5f5f5 — table headers, cards |
| Surface Secondary | #f9f9f9 — code blocks, blockquotes |
| Border | #eee — primary borders |
| Border Secondary | #e5e5e5 — secondary borders |
Semantic and component colors.
| Divider | #ccc — structural dividers (hr, two-col borders, table rows) |
| Link | #268bd2 — links, interactive elements |
| Link Hover | #268bd2 — same as link |
| Sticky Bar BG | #ffff00 — Accent 1 yellow |
| Sticky Bar Text | #000 — black |
Dark Theme Colors
Text colors.
| Primary | #ffffff — main headings, strong text |
| Secondary | #e0e0e0 — body text, paragraphs |
| Tertiary | #b0b0b0 — muted text, bullets |
| Quaternary | #808080 — dates, very muted elements |
| Light | #606060 — taglines, very light text |
Accent, surface and border colors.
| Accent 1 | #ffff00 — signature yellow |
| Accent 2 | #5dade2 — blue |
| Surface | #1a1a1a — main background |
| Surface Emphasized | #2a2a2a — table headers, cards |
| Surface Secondary | #242424 — code blocks, blockquotes |
| Border | #333 — primary borders |
| Border Secondary | #444 — secondary borders |
Semantic and component colors.
| Divider | #444 — structural dividers (via Border Secondary) |
| Link | #5dade2 — links, interactive elements |
| Link Hover | #7fc4ed — lighter blue on hover |
| Sticky Bar BG | #5dade2 — Accent 2 blue |
| Sticky Bar Text | #000 — black |
Vibrant Theme Colors
Text colors.
| Primary | #ffffff — main headings, strong text |
| Secondary | rgba(255, 255, 255, 0.75) — body text |
| Tertiary | rgba(255, 255, 255, 0.6) — muted text |
| Quaternary | rgba(255, 255, 255, 0.45) — dates, very muted |
| Light | rgba(255, 255, 255, 0.3) — taglines |
Accent, surface and border colors.
| Accent 1 | #FF0080 — pink |
| Accent 2 | #D4FF00 — lime |
| Surface | #3D38F5 — vibrant blue background |
| Surface Emphasized | #312CDB — table headers, cards |
| Surface Secondary | #4942F7 — code blocks, blockquotes |
| Border | rgba(255, 255, 255, 0.15) — primary borders |
| Border Secondary | rgba(255, 255, 255, 0.2) — secondary borders |
Semantic and component colors.
| Divider | rgba(255, 255, 255, 0.2) — structural dividers (via Border Secondary) |
| Link | #D4FF00 — lime links |
| Link Hover | #E5FF33 — lighter lime on hover |
| Sticky Bar BG | #FF0080 — Accent 1 pink |
| Sticky Bar Text | #fff — white |
Terminal Theme Colors
Text colors.
| Primary | #00FF41 — terminal green, headings |
| Secondary | #00D936 — body text (90% brightness) |
| Tertiary | #00B32D — muted text (70% brightness) |
| Quaternary | #009926 — dates, very muted (60% brightness) |
| Light | #007A1F — taglines (50% brightness) |
Accent, surface and border colors.
| Accent 1 | #FFFF00 — yellow (for inline code) |
| Accent 2 | #00FFFF — cyan (reserved) |
| Surface | #000000 — pure black background |
| Surface Emphasized | #0A0A0A — table headers, cards (subtle lift) |
| Surface Secondary | #050505 — code blocks, blockquotes |
| Border | rgba(0, 255, 65, 0.15) — primary borders |
| Border Secondary | rgba(0, 255, 65, 0.2) — secondary borders |
Semantic and component colors.
| Divider | rgba(0, 255, 65, 0.2) — structural dividers (via Border Secondary) |
| Link | #00FF41 — terminal green links (uses Primary color) |
| Link Hover | #66FF99 — lighter green on hover |
| Sticky Bar BG | #00FF41 — terminal green |
| Sticky Bar Text | #000 — black |
Typography — Terminal theme uses monospace font throughout for authentic terminal aesthetic.
| Font Family | IBM Plex Mono everywhere (headings, body, navigation, all text) |
| Font Weight | All weights normalized to 400 (normal) — headings, body, bold text all use regular weight for authentic terminal look |
Spacing
Spacing scale using rem units (scales with base font size).
| XS | 0.25rem (5px) — tight spacing, table cells |
| SM | 0.5rem (10px) — small gaps, heading margins |
| MD | 1rem (20px) — standard spacing, paragraph margins, navigation gap |
| LG | 1.5rem (30px) — section spacing, figures |
| XL | 2rem (40px) — large spacing, project credits |
| 2XL | 2.5rem (50px) — section dividers (two-col margin-bottom) |
| 3XL | 3rem (60px) — masthead margin |
Layout
Breakpoints and responsive behavior.
| Desktop | ≥769px — two-column grids, inline navigation, container max-width 72rem |
| Mobile | ≤768px — single column, hamburger menu with overlay, theme select dropdown, 18px base font |
| Small | ≤600px — project column grids collapse to single column |
Two-column structural layout (.two-col) — the primary layout pattern used across all pages.
| .two-col | Grid section: 30% / 1fr on desktop, stacked on mobile. Top border, 0.75rem padding-top, 2.5rem margin-bottom. |
| .two-col-label | Left column: topic name or section headline. Font-weight 550, primary color. |
| .two-col-role | Right column, row 1: role or subtitle. Secondary color, 0.75rem margin-bottom. |
| .two-col-content | Right column: body text, tables, nested grids. Spans rows 2–20 (or 1–20 when no role). |
| .two-col-note | Left column, row 2: muted sidenote. 0.8rem, quaternary color. |
Project column grids (nest inside .two-col-content).
| .columns-2 | Two equal columns (1fr 1fr) |
| .columns-3 | Three equal columns (1fr 1fr 1fr) |
| .columns-1-2 | Asymmetric, small left (1fr 2fr) |
| .columns-2-1 | Asymmetric, large left (2fr 1fr) |
Components
Navigation — desktop: horizontal inline with masthead (flexbox, baseline-aligned). Mobile: hamburger menu with full-screen overlay.
| Active state | Underline via aria-current="page", 6px offset, 2px thickness |
| Hover state | Same underline style as active state |
| Font | IBM Plex Mono, weight 500 |
| Mobile toggle | CSS-only hamburger icon (3 lines, 24×2px, 7px spacing), animates to X on open. Uses var(--color-primary). |
| Mobile overlay | Full-screen fixed overlay (z-index: 100001), var(--color-surface) background, vertical links at 1.5rem, fadein animation. |
| Mobile a11y | aria-expanded, aria-label toggling, Escape key closes, body scroll lock when open. |
Sticky bar — position sticky at top, z-index 99999.
| Light | Yellow (#ffff00) background, black text |
| Dark | Dimmed yellow (#535314) background, white text |
| Vibrant | Pink (#FF0080) background, white text |
| Terminal | Terminal green (#00FF41) background, black text |
Content table (.content-table) — a lightweight table used for structured lists across all pages.
| .pl-year | Optional first column: year/date, nowrap, secondary color, 1% width |
| .pl-name | Name column: nowrap, bold label with optional small subtitle |
| .pl-desc | Description column: secondary color, wrapping text |
Table behavior rules.
| First row | No top padding (aligns with label baseline) |
| Last row | No bottom border or padding |
| After paragraph | p + .content-table adds top border and padding on first row |
| Mobile | .pl-year hidden, data-year attribute shown as small label above name |
Other components.
| Custom bullets | ⚬ character, tertiary color, 0.9em indent. Navigation excluded. |
| Blockquotes | Surface-secondary background, 4px yellow left border, 0.95rem text |
| Figures | 1.5rem margin, caption 0.8rem italic in meta color |
| CV header | Flex container: H1 left, language switcher right, baseline-aligned |
| Footer | Desktop: flex row, copyright left, theme links + DS link right. Mobile: stacked column, right-aligned, theme <select> dropdown replaces inline links. |
Accessibility
| Skip link | Hidden by default (top: -40px), visible on focus (top: 6px). High contrast black/white. |
| ARIA labels | Navigation: aria-label="Main navigation". Current page: aria-current="page". Mobile toggle: aria-expanded, aria-label toggling. |
| Semantic HTML | <header role="banner">, <nav role="navigation">, <main role="main">, <footer role="contentinfo"> |
| Hreflang | CV pages include hreflang tags for de/en with x-default fallback to English |
CSS Architecture
| poole.min.css | Base framework (Poole by @mdo) |
| poole.overrides.min.css | Custom overrides: two-col layout, content tables, navigation, footer, responsive styles |
| project.css | Project-specific components: column grids, figures, project cards and headers |
| animations.css | Animation definitions |
| themes.css | All CSS custom properties, theme definitions (light, dark, vibrant), and variable application rules |
Changelog
| 2026-02-19 | Renamed .project-list → .content-table across both repos — it's the generic default table style, not project-specific |
| 2026-02-13 | Added Terminal theme with bright green on black aesthetic and IBM Plex Mono throughout. Renamed themes: "default" → "light", "teaching" → "vibrant" |
| 2026-02-12 | Mobile hamburger navigation with full-screen overlay, footer theme select dropdown for mobile, --color-divider semantic token for structural dividers |
| 2026-02-11 | Added theme switcher to footer, dark theme sticky bar fix, navigation active/hover states, content tables across all pages, CV language switcher, Projects in navigation |
| 2026-02-07 | Initial design system documentation, theming system with URL-based switching |