Skip to content

PUBLIC REFERENCE

Grand Matter

Editorial Art House

2026-04-30 Source style Original site
Grand Matter captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Pitch Black #000000

Primary text, strong borders, navigation accents, foundational UI elements

Deep Charcoal #0f2226

Secondary text, subtle borders, input text and outlines

Canvas White #ffffff

Primary page background, prominent card surfaces, essential text against dark backgrounds

Light Mist #f8f7f7

Subtle background for UI sections, secondary card surfaces, input backgrounds

Warm Parchment #ede8e0

Section backgrounds, image backgrounds, tertiary surface levels, subtle borders

Ash Gray #020202

Darkest background for subtle elevation, alternative text color

Radiant Orange #f25f29

Navigation active states, decorative accents — a vibrant punctuation against the neutral palette

Electric Blue #1573dd

Outlined action borders, interactive links, image borders — providing a clear interactive signal

Do

  • Prioritize big-caslon-fb or adobe-caslon-pro for headings and display text to establish an editorial and authoritative tone.
  • Use Pitch Black (#000000) for primary text and Deep Charcoal (#0f2226) for secondary text and borders to maintain high contrast and sophistication.
  • Employ Light Mist (#f8f7f7) for section backgrounds and Warm Parchment (#ede8e0) for subtler background variations to create depth across surfaces.
  • Utilize Radiant Orange (#f25f29) for key navigation accents and Electric Blue (#1573dd) for interactive link borders, ensuring color is used as functional punctuation.
  • Apply 5px border-radius to all interactive input and button components, creating a subtle softness without compromising structure.
  • Maintain comfortable spacing with 80px section gaps and 20px element gaps, ensuring visual breathing room across the layout.
  • Use Inter at 18px with 1.67 line height for all body text to ensure readability and a clean informational delivery.

Don't

  • Avoid applying heavy drop shadows; the system favors flat surfaces and content-driven elevation.
  • Do not introduce additional vivid colors beyond Radiant Orange and Electric Blue for UI elements; maintain a restricted accent palette.
  • Do not use highly decorative borders or complex background patterns; simple 1px solid borders are preferred.
  • Refrain from using large images as primary page backgrounds; instead, use neutral background colors to frame content.
  • Do not deviate from the specified negative letter-spacing for display typography; it is crucial to the distinctive feel.
  • Avoid overly dense content blocks; prioritize generous white space and clear visual separation between elements.
  • Do not use generic system fonts for headlines; always opt for big-caslon-fb, adobe-caslon-pro, or basis-grotesque-black to preserve brand identity.