The grid carries it.
Nothing else has to.
International Typographic Style, applied to product UI. Hierarchy comes from an eleven-step neutral ramp and a modular type scale — so borders stay at a hairline, there is no elevation ramp, and ornament is absent rather than restrained.
Twelve columns, flush left
A 4px spacing base, a 1.2 type scale, and layout primitives that take a step number rather than a length — an off-scale value isn't expressible.
Depth is tone
Surfaces separate by one step on the ramp plus a hairline. The only shadow in the system is on overlays, which genuinely leave the page.
One accent, two percent
One accent per theme, four status hues, and no pure grey anywhere. Every neutral ramp carries a hue bias so it reads as chosen rather than inherited.
Install
Both packages resolve from this workspace. Nothing is fetched, nothing is published. Import order is load-bearing — theme.css maps properties that tokens.css must already have defined.
// package.json
"@resinen/tokens": "workspace:*",
"@resinen/ui": "workspace:*"
// globals.css
@import "tailwindcss"; /* optional */
@import "@resinen/tokens/tokens.css";
@import "@resinen/tokens/theme.css"; /* optional: Tailwind utilities */
@import "@resinen/tokens/base.css"; /* optional: element defaults */
@import "@resinen/ui/styles.css";
// anywhere
import { Button, Card, Field } from "@resinen/ui";Theming is two attributes on <html> and no provider: data-theme and data-font. They're orthogonal — any of the 4 pairings works with any of the 5 themes.
Foundations
Components
37 components across 7 groups, of which 14 are Client Components — the rest render on the server. See all.
Actions
Button, IconButton, ButtonGroup, Link
Forms
Field, Textarea, Checkbox, RadioGroup, Switch, Select
Feedback
Alert, Spinner, ProgressBar, Skeleton, EmptyState
Data display
Card, Badge, Tag, Avatar, Table, DescriptionList, Stat, Code & Kbd
Navigation
Breadcrumb, Pagination, NavList, Tabs, Accordion
Overlay
Dialog, Popover, Tooltip, Menu
Layout
Stack, Cluster, Grid, Section & Page, Divider
What the build enforces
Components reference only semantic tokens, never primitives. That is what makes 5 themes cost 5 data blocks instead of 5 refactors — and it is checked mechanically rather than trusted. The Tailwind bridge exposes bg-ground but not bg-cool-600, and the token compiler runs 100 contrast checks across every theme, refusing to emit if a single text pair falls below 4.5:1.
That gate has caught two real defects so far: an accent one hundredth of a point under threshold, and placeholder text at 2.46:1 — both invisible to the eye, both of which would have shipped.