Build something
worth building
A lean, opinionated foundation using semantic HTML, modern CSS with cascade layers, and vanilla JavaScript. No frameworks. No overhead.
What's included
Everything you need,
nothing you don't
A deliberate set of primitives that stay out of your way and scale with your project.
Architecture
CSS Cascade Layers
Layer order is declared once: reset → tokens → base → components → utilities.
Specificity conflicts become a solved problem.
Design Tokens
Three-Tier Token System
Primitives define raw values. Semantic tokens map purpose to primitives. Component tokens scope to their element. Dark mode is a semantic concern.
Theming
Light & Dark Mode
Respects prefers-color-scheme by default. The toggle persists
the user's explicit preference in localStorage.
Typography
Fluid Type Scale
Headings use clamp() for fluid sizing between viewport breakpoints.
A Major Third scale (1.25) gives clear visual hierarchy.
Layout
Four Page Templates
Home, landing page, article/prose, sidebar layout, and full-width canvas. Each demonstrates different composition patterns.
JavaScript
Vanilla & Module-Ready
Pure ES modules with no build step required for development. The codebase is ready to slot into Vite or any other bundler.
Components
Base components
Buttons
Badges
Tags
Callouts
Default callout
Use callouts to surface important information without interrupting the reading flow.
Accent callout
Use the accent variant for tips, highlights, or anything you want to draw attention to.
Code
@layer reset, tokens, base, components, utilities;
/* Semantic tokens reference primitives */
:root {
--text-primary: var(--color-gray-950);
--surface-page: var(--color-gray-50);
--accent-default: var(--color-amber-500);
}Ready to start building?
Clone the repo, open index.html, and make it yours.
The CLAUDE.md file documents every convention so AI assistants
can contribute to your codebase with full context.