Design System

A comprehensive design system built on Tailwind CSS with OKLCH colors, consistent spacing, and reusable components.

Recommended design patterns for each content type. Match your content to the right layout, cell type, and visual style.

Colors, typography, spacing, buttons, badges, cards, inputs, code blocks, animations, and UI patterns.

Hero container and header components for page introductions.

Section containers and headers for page content.

FlexibleGrid2 component for responsive layouts.

CellContainer, TextCell, and ShowcaseCell components.

VisualCell, patterns, and background components.

Full-page background components for heroes and sections.

Timeline, steps, and other specialized section components.