Recital

Recital is for writing that people sit down with: essays, journals, documentation read end to end. It should feel like a well-made paperback, with warm paper, dark brown ink and a serif that has some character. The page is quiet so the words carry it. One oxblood accent marks what the reader can act on.

• Primary (#7B2D26) is oxblood. Use it for links, the main button and the occasional drop cap. Not for backgrounds.
• Secondary (#2B2622) is the ink for secondary buttons and heavy rules.
• Tertiary (#B8892B) is an ochre for badges and highlights, like a margin note in pencil. Use it rarely.
• Neutral (#6F665E) sets captions, bylines and dates.
• Background (#FBF7F0) and Surface (#F3ECE1) are paper tones. Never pure white, never a cool grey.
• Error (#A3261C) is for validation only. It is close to the primary, so always pair it with an icon or a message.

Fraunces sets headings: soft, slightly old-style, never bold beyond 600. Source Sans 3 sets body text at 18px with a 1.65 line height and a measure of 60–70 characters. Source Code Pro sets labels, bylines and code. Body text is never smaller than 16px, and long passages are never centered or justified.

A single reading column, 680px wide, centered on the page. Wider elements such as images and tables may extend to 960px. Spacing comes from the scale (4, 8, 16, 24, 48, 96), with 48px between sections and 96px before a new chapter. Sidebars are the exception: prefer footnotes and inline asides.

Almost flat. A card sits on the page by its surface color and a 1px border. One soft shadow is allowed for things that float over the text, such as menus and dialogs; nothing else casts one.

Gently rounded: 3px for badges, 6px for buttons and inputs, 12px for cards and images. No pills, and no perfect circles except avatars.

• Buttons: oxblood for the main action, ink for the rest. Sentence case, never all caps.
• Cards: surface fill, 12px corners, 24px padding. Used for asides and summaries, not for every paragraph.
• Badges: ochre, small, one or two words.
• Block quotes: a 2px primary rule on the left, set in Fraunces italic.
• Icons: thin line icons, used sparingly. Never emoji.

• Do give text room: wide margins and tall line height.
• Do use italics and small caps for emphasis before reaching for color.
• Don't use pure white, pure black or cool greys.
• Don't use gradients, glows or glass effects.
• Don't put a card inside a card.
• Don't introduce a color, size or radius that is not a token above.