Brand System · v1.0

coron8.dev

Ship to the web like royalty. A crown-forward identity for the build & deploy platform behind Duff Cloud Services — geometric, high-contrast, and engineered for dark and light alike.

Primary · GoldAccent · RedType · Space Grotesk / GeistTokens · oklch · Tailwind v4

01 — The Mark

A crown built from three peaks

The mark is a flat, geometric crown — sharp enough to read at 16px, regal enough to anchor the wordmark. Gold is the default fill. The 8 in the wordmark always carries a gold tie-in to the crown.

Icon · dark

Icon · light

Icon · on gold

Horizontal · darkcoron8.dev

Horizontal · lightcoron8.dev

Stacked · darkcoron8.dev

Monochrome · single-colorcoron8.dev

App icon & faviconCrown centered on a rounded tile — gold on near-black is the default.

02 — Usage

Clearspace & guardrails

Keep one crown-width of clearspace on every side. Minimum mark size is 16px; minimum lockup height is 20px.

Use gold on near-black or white — the highest-contrast pairings.
Keep the crown and wordmark on a shared baseline in the horizontal lockup.
Go monochrome (single neutral) when a context can't carry gold.
Let the 8 carry the only gold accent inside the wordmark.

Don't

Recolor the crown in red — red is an accent, never the mark.
Add gradients, bevels, or drop shadows to the flat crown.
Stretch, rotate, or re-space the wordmark.
Place gold on mid-tone backgrounds where contrast drops below 3:1.

03 — Color

Gold leads. Red sharpens. Neutrals carry.

Gold is the brand constant and the shadcn primary. Red is the accent and maps to destructive. Neutrals are warm with near-zero chroma so gold always feels like the warm voice in the room. Every value is authored in oklch.

Gold--primary · --ring · brand

100

200

300

400

500

600

700

800

900

950

Red--destructive · accent · alert

100

200

300

400

500

600

700

800

900

950

Neutralsurfaces · text · borders (warm, chroma < 0.01)

100

200

300

400

500

600

700

800

900

950

Semantic tokensMapped for shadcn — identical names, mode-aware values.

Light

background

oklch(0.992 0.002 90)

foreground

oklch(0.175 0.004 76)

card

oklch(1 0 0)

primary

oklch(0.779 0.146 85)

primary-fg

oklch(0.205 0.012 80)

muted

oklch(0.970 0.003 90)

muted-fg

oklch(0.530 0.007 84)

accent

oklch(0.945 0.040 91)

destructive

oklch(0.631 0.221 27)

border

oklch(0.916 0.004 89)

ring

oklch(0.779 0.146 85)

Dark

background

oklch(0.145 0.004 75)

foreground

oklch(0.970 0.003 90)

card

oklch(0.190 0.004 78)

primary

oklch(0.818 0.128 86)

primary-fg

oklch(0.205 0.012 80)

muted

oklch(0.270 0.005 80)

muted-fg

oklch(0.708 0.006 86)

accent

oklch(0.299 0.058 68)

destructive

oklch(0.704 0.185 27)

border

oklch(1 0 0 / 10%)

ring

oklch(0.818 0.128 86)

04 — Typography

Three voices, one system

Space Grotesk gives the brand its geometric, slightly technical character. Geist keeps product UI neutral and legible. Geist Mono labels everything that's code, config, or a token.

Display · brand

Space Grotesk

Headlines, the wordmark, hero numerals.
aA bB cC · 0123456789

Sans · UI & body

Geist

Body copy, controls, navigation.
aA bB cC · 0123456789

Mono · code & labels

Geist Mono

Tokens, code, eyebrows, metadata.
aA bB cC · 0123456789

Deploy in secondsDisplay / 600 / -2% · clamp 40–64

Section headingDisplay / 600 · 28–34

The quick brown fox builds, ships, and scales.Geist / 400 · 16–18 · body

$ npx coron8 deploy --prodGeist Mono / 400 · 12–14

05 — Handoff

Ready for shadcn & Tailwind v4

The full token set lives in the theme's tailwind.css — semantic variables in :root and .dark, exposed to utilities via @theme inline. Replace your shadcn globals and the whole UI re-skins.

tailwind.css — excerpt

@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --background: oklch(0.992 0.002 90);
  --foreground: oklch(0.175 0.004 76);
  --primary: oklch(0.779 0.146 85);        /* gold */
  --destructive: oklch(0.631 0.221 27);     /* red  */
  --ring: oklch(0.779 0.146 85);
}
.dark {
  --background: oklch(0.145 0.004 75);
  --primary: oklch(0.818 0.128 86);
}
@theme inline {
  --color-primary: var(--primary);
  --font-display: "Space Grotesk", sans-serif;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", monospace;
}