Overview

crisp is a small design system rebuilt by measuring Attio's live UI pixel-for-pixel — heights, radii, color, spacing, shadows. This documentation renders every example with crisp's actual generated CSS (dist/styles.css), not hand-approximated styles.

Foundations

Before the components: Foundations — the measured dimensional scale (spacing, radius, sizing) that every component references instead of raw px, plus the rule for when a divider is warranted.

Components

• Button — 4 intents · 3 sizes · text/icon shape
• Badge — 5 tones · 3 sizes · soft/solid
• Input — 2 sizes · invalid state
• Avatar — 4 sizes · circle/rounded · 6 tones

Product

A separate product/ layer (navigation items, sidebars, and other app-shell pieces built from the components above) is in progress — see Sidebar.

Installation

bun add crisp

import "crisp/styles.css";

Every component below is a small React wrapper around a statically-generated CSS recipe — variant props map directly to class names, resolved ahead of time. No CSS-in-JS at render time.