Onyx

v15 · published

Black, white, and one electric line.

starkmonochromaticgeometricelectric

Onyx is a re-reading of deploy-platform minimalism taken to its absolute: a near-black canvas ruled by crisp hairlines and a geometric grid, where almost nothing has color. Type is a clean grotesque doing nearly all the work, technical labels stamped in mono. A single electric blue carries every action and link; the only burst of spectrum is a rare conic aurora reserved for hero moments. Surfaces lift not with shadow but with a brightening border. Motion is fast and mechanical. It reads as confident restraint - the interface gets out of the way.

Fork it into your own →Open the playground →

re-imagined from https://vercel.com

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Brings the system in

npx synthesisui@latest init --styles tailwind --ds onyx

2 · Turns the check and the tools on

npx synthesisui@latest connect

2 · Turn the check and the tools on

npx synthesisui@latest connect

Ask your agent

Use the "Onyx" design system (slug: onyx) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add onyx` if `_synthesisui/ds/onyx/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/onyx/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/onyx/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/onyx/v15/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="onyx"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use onyx "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Geist, Geist Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.ink

50#ffffff

100#fafafa

200#ebebeb

300#e1e1e1

400#a1a1a1

500#737373

600#525252

700#404040

800#2e2e2e

900#171717

950#0a0a0a

color.veil

500#000000b3

color.amber

400#f5a623

500#d98e00

600#a96e00

color.emerald

400#45d27a

500#1a9f54

600#10793f

color.scarlet

400#ff4d4d

500#e5484d

600#c0353a

color.electric

300#6cb1ff

400#3291ff

500#0070f3

600#0761d1

700#0a4ba0

color.semantic - resolved live via CSS variables

info

{color.electric.400}

faint

{color.ink.500}

muted

{color.ink.400}

scrim

{color.veil.500}

accent

{color.electric.400}

border

{color.ink.800}

canvas

{color.ink.950}

danger

{color.scarlet.400}

raised

{color.ink.800}

overlay

{color.ink.800}

primary

{color.electric.500}

success

{color.emerald.400}

surface

{color.ink.900}

warning

{color.amber.400}

foreground

{color.ink.50}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs2px

2xs4px

xs8px

sm12px

md16px

lg24px

xl40px

2xl64px

3xl96px

shadow

ring

Typography

The voice of the system.

Display: Geist · Body: Geist · Mono: Geist Mono

xsDesign, set free0.75rem / 1.4

smDesign, set free0.875rem / 1.45

baseDesign, set free1rem / 1.55

lgDesign, set free1.25rem / 1.35

xlDesign, set free1.5rem / 1.25

2xlDesign, set free2rem / 1.15

displayDesign, set free3rem / 1.05

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 7 live

fade

rise

blink

press

pulse

aurora

shimmer

easings

swiftcubic-bezier(0.3, 0.57, 0.07, 0.95)

linearlinear

standardcubic-bezier(0.4, 0, 0.2, 1)

durations

base · 0.15sfast · 0.1sslow · 0.3sambient · 0.8s

interaction patterns

presspress-in

Mechanical press feedback.

enterenter-rise

Content rises a few pixels and fades in.

focusfocus-ring

An electric ring snaps on around the focused control.

hoverborder-lift

Surface border brightens on hover instead of casting a shadow.

loopambient-aurora

The hero's conic spectrum rotates slowly.

Components · 11

Blueprints, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

kbd

bespoke · pill

Keyboard key - a mono chip for shortcuts, stamped in a hairline ring.

⌘K

aurora-hero

bespoke · surface

The rare burst of spectrum - a conic aurora rotating over black, reserved for hero moments.

Ship on the edge

card

bespoke · surface

Graphite panel defined by a hairline; the border brightens on hover rather than lifting.

padding

A card wearing this system.

emphasis

A card wearing this system.

chip

bespoke · pill

Compact entity/filter token - a pill holding an avatar/icon, a label and an optional ds-chip-remove. Set data-active="true" for a selected filter (tints the primary); use a <button> or add ds-chip-remove for a dismissible chip.

active

MAMaya AndersenMAMaya Andersen

link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

link

alert

bespoke · surface

Inline message. Tone maps onto the system's own semantic accents.

tone

A message wearing this system.

badge

bespoke · surface

Mono-stamped pill with a hairline ring; a status dot reads at a glance.

intent

PillPillPillPillPillPill

input

bespoke · surface

Crisp field on graphite; an electric ring snaps on at focus.

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

High-contrast action. Primary inverts to a solid white slab; the rest stay quiet.

intent

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

Icons · lucide

A consistent icon set.

Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.