Identity

Brand & Design System

The visual language of Court of Dans — minimal and monochrome, built around the cod mark. Every token here lives in one place (src/app/globals.css) and drives the whole site, including this page.

Logo

The Mark & Wordmark

Court of DansThe cod mark
Court of DansThe wordmark
  • · The cod mark stands alone — e.g. in the nav and as a favicon.
  • · The wordmark is set in Inter, bold, uppercase, tightened.
  • · Don't lock the mark and wordmark together as one unit.
  • · Give each room — clear space ≥ the cap height.

Colour

Palette

Monochrome by design — ink on paper, with two greys between. No accent colour.

#FFFFFF

Paper

--color-paper

Page background

#F5F4F2

Mist

--color-mist

Raised surfaces

#E4E2DD

Line

--color-line

Hairline borders

#6F6A64

Ink Dim

--color-ink-dim

Secondary text

#141110

Ink

--color-ink

Primary text / fills

Typography

Type Scale

One typeface — Inter — across everything. Headings are bold and tightened; body stays regular and legible.

Heading / XLCourt of Dans
Heading / LOn the Road
Heading / MMeet the Band
Body / LargeNew noise from the practice room — follow along.
Body / BaseBrooding low end, blown-out guitars, choruses built to be shouted back.
EyebrowOn the Road

Components

Buttons & Surfaces

PrimaryGhostPrimary SmallGhost Small

Built from the .btn-primary, .btn-ghost, .btn-sm, and .surface classes in globals.css — use these instead of ad-hoc styling so the system stays consistent.

Voice

Tone of Voice

We sound like

  • · Bold, direct, a little defiant.
  • · Short, declarative, built to be shouted.
  • · Confident — never apologetic.

We avoid

  • · Corporate, hype-y marketing speak.
  • · Emoji and exclamation spam.
  • · Clutter — keep it minimal.

For Devs

Tweaking the System

  1. 1. Edit tokens in src/app/globals.css (the @theme block).
  2. 2. Edit content in src/app/data.ts (shows, members, socials — and releases/merch when they exist).
  3. 3. Compose pages from the shared primitives in src/app/components.