Logo, color, type.

Logo

The mark and the wordmark.

• — Mark: a contained square. White lowercase italic c in Fraunces, centered on a 135° gradient from ink to terracotta. Square is rounded only at small sizes (≤32px) to preserve the glyph's optical balance; canonical 48px+ uses a hard square.
• — Wordmark: cadenza, lowercase, Fraunces italic 400. Never caps. Never another font. Set in ink on warm white or warm white on ink.
• — Product shell treatment: in app/admin navigation, the wordmark appears alone at the same quiet size as the marketing header. No icon lockup, no oversized brand moment in navigation chrome.
• — Clear space: equal to the height of the mark on all sides.
• — Minimum size: 24px tall on screen, 8mm in print.
• — Mark + wordmark: the mark works alone. The wordmark works alone. When paired, the mark sits to the left, vertically centered on the wordmark's x-height.

Logo do / don’t

Color system

Five tokens. Terracotta is the punctuation.

Every swatch below ships as a CSS custom property. Click a value to copy it.

• — Ink and Warm White carry 90% of every page.
• — Terracotta is the punctuation. If a screen has more than two terracotta elements, one of them is wrong.
• — Amber and Cream support Terracotta — never compete with it.
• — Every text/background pair must hit WCAG AA at minimum. Ink-on-Warm-White and Warm-White-on-Ink both pass AAA.

Typography

The voice and the room.

Fraunces is the voice. Geist Sans is the room.

Type scale

• — Fraunces never appears in body copy.
• — Geist never appears in the wordmark.
• — If you find yourself reaching for one in the other’s territory, the design is wrong.

Logo system

Three assets. One signature.

The mark carries Cadenza into small spaces. The wordmark carries the name. The lockup is the full signature. Every asset ships as an SVG in /static/brand/.

• mark

  /brand/cadenza-mark.svg

  The italic "c" set in an Ink-to-Terracotta gradient square. Reads at a single glance.

  Use when

  Favicons, app icons, avatars, and any context narrower than 200px where a wordmark cannot breathe.

  Min size

  24px on screen. 8mm in print.

  Clear space

  One mark-height of empty space on every side. Never let copy touch the square.

• wordmark

  /brand/cadenza-wordmark.svg

  The word "cadenza" set in Fraunces italic 400, lowercase. The voice, visible.

  Use when

  Headers, footers, long-form openers, first-run screens — any surface where the name should be heard.

  Min size

  80px wide on screen. 32mm in print.

  Clear space

  Half an x-height of empty space around the word. Enough to keep it legible; never padded to look important.

• lockup

  /brand/cadenza-lockup.svg

  Mark and wordmark, horizontally paired. The full signature.

  Use when

  Brand-first surfaces: marketing hero, press kits, investor decks, anywhere the product is being introduced.

  Min size

  120px wide on screen. 40mm in print.

  Clear space

  The gap between mark and wordmark, mirrored on every side. The lockup does not compress.

Icons

Lucide, line weight only.

Cadenza uses a single icon set. Line weight, single color, never filled.

Library

@lucide/svelte

Import pattern

Individual imports only: `import IconName from '@lucide/svelte/icons/icon-name'`. No barrel imports from the package root.

Sizing

• — 16px for dense UI
• — 20px for default UI
• — 24px for primary actions and empty states

Stroke & color

Stroke 1.5. currentColor — icons inherit the surrounding text color. Never hardcode a brand color on an icon.

• — No filled icons. Cadenza is a line-weight brand.
• — No duotone, no gradient fills. Single stroke, single color.
• — Do not mix icon sets. Lucide only.
• — Icons exist to disambiguate, not to decorate. If the label is clear, the icon is optional.

Imagery

Editorial, not advertorial.

The shader carries most of the brand. Photography appears on long-form surfaces only — documentary, warm, specific. Never stock.

• Editorial, not advertorial.

  Imagery should feel cut from a print magazine, not lifted from a stock library. Real rooms, real light, real hands. If it looks staged for a sales deck, it is wrong.

• Characters, not categories.

  When we photograph a person, they are a specific person with a name and a job we can defend. We do not cast a "founder" or a "sales lead" — we photograph an actual one. No mood-board cliches.

• Warm, grounded, specific.

  Daylight before softboxes. A real desk before a rendered one. A specific object before a generic one. Texture is welcome. Dust is welcome. Perfection is not.

• Rare is the point.

  The shader carries almost every surface. Photography appears on long-form pages, the About page, and the occasional editorial piece. A photograph on every screen turns the brand into a catalogue.

• Humans on both sides.

  Cadenza is about humans sending messages to humans. Imagery should feel like both sides are present — even when only one is in frame.

Open Graph

One template. Four parts.

Every shareable Cadenza URL resolves to a single OG template. Shader, wordmark, title, optional subtitle. No per-page art.

Dimensions

1200 × 630

Safe area

80px on all sides. Nothing touches within the safe area except the wordmark.

Background

Cadence shader rendered at full bleed, with a Warm-White-to-Ink vertical gradient overlay at 40% opacity. The overlay keeps type legible without muting the shader.

Wordmark placement

Bottom-left, 48px from the left safe edge and 48px from the bottom safe edge. Mark alone on favicon-sized fallbacks.

Title slot

Fraunces italic 400, 72px. Max 3 lines, 96 characters.

Subtitle slot

One line of Geist 500 at 28px directly below the title. Optional. Used for section labels ("Voice & Tone", "Resources") on brand-doc routes.