Design System & Component Library
A living catalog of design tokens, multi-theme color palettes, typography specimens, interactive component primitives, and responsive viewport simulators for croatto.co.uk.
01. Theme Engine & Frontmatter Pairings
Global light/dark mode + per-project theme pairings
The site operates on a clean 2-tier color system: a global Light / Dark mode (toggled via the sun/moon icon in the global footer), and optional frontmatter theme pairings (e.g. theme: "editorial"). Every theme pairing fully supports both light and dark modes.
Standard site styling. Light canvas (`#FAFAFA`) or deep charcoal (`#1A1A1A`) with signature safety orange (`#F58426`).
Declared via theme: editorial. Light mode uses warm archival paper (`#F7F4EB`); dark mode uses espresso ink (`#1C1917`) with amber accents.
Declared via theme: bauhaus-nasa. Features Space Mono, stark borders, and signal red (`#FF3B30`). Adapts between stark white and deep space black.
Declared via theme: cyber-orange. Industrial hazard aesthetic. Light mode uses concrete steel (`#EAECEF`); dark mode uses deep obsidian (`#0D0E11`) with laser orange.
Declared via theme: source-code. Monospace editorial style. Set in Source Code Pro at 400 weight with background #EFEFEF and ink #242424.
02. Color Token Architecture
Click any card to copy token referenceCanvas & Surface Architecture
Typography & Content Contrast
Brand Accents & Feedback States
03. Typography Architecture
Explicit 16px baseline with optical serif & monospace tiersThe craft of thinking through making
Selected Works & Architectural Systems
Jason looks for ideas and concepts through trying, play, exploration, conversations and other methods to tryout in the journey to solve problems.
We design tools to eliminate developer friction, crafting resilient design token hierarchies that ensure long-term stability across device generations, themes, and client-side rendering engines.
const pipeline = new BuildPipeline({ target: "hostinger-vps", ssl: "traefik-le", engine: "11ty-v3" });
04. Interactive Components & Primitives
Tactile buttons, category chips, status tags, and content blocksUsed across the portfolio archive for real-time category filtering.
Header pill showing active accent dot and current theme title.
Three-tier visibility indicators used in dev previews and client review flows.
Non-hyperlinked, 500-weight accent element that randomizes on load and cycles on tap.
Material Symbols Outlined 'dropdown' icon button triggering the fullscreen centered navigation modal.
"Ideas and concepts don't happen in isolation; they appear through trying, play, exploration, conversations and relentless iteration." — Jason Croatto // Design Systems & Engineering