A toolkit for building foundational prototypes — fast, modular, precise.
Everything you need to build a prototype. Snap together, iterate fast.
12-column fluid grid with responsive breakpoints and named areas for rapid layout prototyping.
grid-template-columns: repeat(12, 1fr);
All variant states: default, hover, active, disabled, loading. Configurable via CSS vars.
Fluid typographic scale using clamp() across 6 heading levels.
Modular card components with optional media, metadata slots, and hover states.
Sidebar, topbar, breadcrumb, and tab navigation archetypes — all keyboard-navigable.
Semantic color system with light/dark modes and 8-step value scales.
Base-4 spacing tokens mapped to design variables for consistent rhythm.
Input, select, checkbox, radio — validated states included, no framework dependency.
Comprehensive references for every module. Designed for rapid comprehension.
prototypic.dev is a zero-dependency toolkit for building software prototypes. Every component is a self-contained unit — no build step, no framework, no opinions. Import what you need.
npm install prototypic
# or include directly
<link rel="stylesheet" href="prototypic.css">
All values are CSS custom properties. Override at `:root` to theme the entire system without touching component code.
Each component exposes a predictable slot API. Content areas, control props, and variant modifiers follow a consistent naming convention.
Shared values that power the entire system. Change once, cascade everywhere.