Developer
Sign in

Design system

Unify

The design system behind every app. Grown from Coready's design, it gives each app the same components, shapes, type and motion — and its own colour.

Get startedTheming playground
DeveloperSSOCoreadyStudioLerneCrateFolioSpentry

Principles

Greyscale firstAbout 90% of every screen is ink on surfaces. The accent is spent on links, focus, selection and at most one filled button.
One knob per appAn app sets its accent hue (and optionally a neutral tint). Shapes, type, spacing, motion and glass never change.
Borders, not shadowsStructure comes from hairlines. Shadows exist only for chrome that floats above the page.
Concentric radii6 badges · 10 controls · 14 cards · 20 dialogs. A shape inside another is always the smaller step.
Glass only floatsTop bars, menus, dialogs and toasts are glass. Text, tables and forms never sit on glass.
Accessible by defaultAA contrast in both themes, a visible focus ring on every control, reduced motion and transparency respected.

Quick start

Install the package, import one stylesheet, set your hue.

Terminal + app/globals.css
pnpm add @nashyvan/unify

/* app/globals.css */
@import "@nashyvan/unify/styles.css";
:root { --accent-h: 185; }   /* the app's hue */

The full setup (registry access, fonts, theme script, icons) is in Getting started.

Change it once, every app follows

Unify is a versioned package. A change lands in every app through the same automated path — no copying.

  1. 1Change UnifyEdit a token or component in packages/unify and push. No version to bump.
  2. 2PublishCI publishes it, versioned by that commit: 2026-10-12 · 97146a4.
  3. 3UpdateDependabot opens one grouped PR per app; CI checks it and it auto-merges.
  4. 4DeployThe merge to main deploys each app with the new version.

Token and style changes need no code change in the app. Every release is versioned like the apps — the date and commit of the change — and every app runs its own checks on the update before it merges, so a change that breaks an app stops there. Breaking changes are marked with ! in the commit.

What is inside

FoundationsColour, type, spacing, radius, elevation, motion, glass, blueprint.
ComponentsButtons to dialogs to the app shell — 40+ components on Radix.
PatternsSign-in, /system, empty, loading and error states.