Colophon

How this site was built.

Tech Stack

Next.jsApp Router, server components, static generation
TypeScriptEnd-to-end type safety
CascadeDSDesign system with token-first architecture
CSS ModulesScoped styles with CDS design tokens
Framer MotionPage transitions and micro-interactions
VercelDeployment and edge infrastructure
PlausiblePrivacy-friendly analytics

Typography

This site uses a deliberate three-font system. Each typeface has a specific voice and purpose. “What and why” gets General Sans. “How and with what” gets Space Grotesk. The thing itself gets JetBrains Mono.

General Sans

The Strategist

Page titles, section headings, navigation. The voice of strategy and narrative.

The quick brown fox jumps over the lazy dog.

--font-family-display

Space Grotesk

The Builder

Technical details, tech stack labels, metadata. The voice of how things were built.

The quick brown fox jumps over the lazy dog.

--font-family-technical

Inter

Body Text

All paragraph text, descriptions, and long-form reading.

The quick brown fox jumps over the lazy dog.

--font-family-body

JetBrains Mono

The Code

Inline code, code blocks, terminal references, and technical specifications.

const site = await build(ideas);

--font-family-mono

Design Principles

  • Tokens, not hardcodes. Every color, spacing value, and font size comes from CascadeDS design tokens.
  • Dark mode first. Designed in dark mode, then verified in light. Both themes use the same token system.
  • No Tailwind. CSS Modules with design tokens. Styles are co-located with components.
  • Server-first. Every page is a server component. Client code only where interaction requires it.

Credits

Designed and built by Britton Lorentzen. Powered by CascadeDS, an Empac project.