officialofficial/heritage
Heritage
Journalistic high-contrast neutrals with a deep red accent. Serif headings, generous leading, strong rules.
install
npx designkit add designkit-sh/heritagepreviewrenderPreviewHtml
source
---
name: Heritage
description:
Journalistic high-contrast neutrals with a deep red accent. Serif headings,
generous leading, strong rules.
colors:
background: "#FBF8F1"
surface: "#FFFFFF"
ink: "#1A1A1A"
ink-muted: "#55504A"
accent: "#8B1A1A"
accent-soft: "#C9524F"
border: "#E2DCD0"
link: "{colors.accent}"
typography:
h1:
family: "'Playfair Display', Georgia, serif"
size: "3.5rem"
weight: 700
lineHeight: 1.05
letterSpacing: "-0.02em"
h2:
family: "'Playfair Display', Georgia, serif"
size: "2.25rem"
weight: 700
lineHeight: 1.15
h3:
family: "'Playfair Display', Georgia, serif"
size: "1.5rem"
weight: 600
lineHeight: 1.25
body:
family: "Georgia, 'Times New Roman', serif"
size: "1.0625rem"
weight: 400
lineHeight: 1.7
spacing:
xs: "0.5rem"
sm: "0.75rem"
md: "1.25rem"
lg: "2rem"
xl: "3rem"
rounded:
sm: "2px"
md: "4px"
lg: "6px"
components:
button-primary:
background: "{colors.accent}"
color: "{colors.surface}"
border: "1px solid {colors.accent}"
radius: "{rounded.sm}"
padding: "0.75rem 1.5rem"
button-secondary:
background: "transparent"
color: "{colors.ink}"
border: "1px solid {colors.ink}"
radius: "{rounded.sm}"
padding: "0.75rem 1.5rem"
card:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "{spacing.lg}"
---
## Overview
Heritage is a journalistic design language inspired by classic print layouts. It
pairs dense serif typography with generous whitespace and a single deep-red
accent, optimised for long-form reading and editorial content.
## Colors
- Background is a warm off-white (`#FBF8F1`) to soften the eye.
- Ink stays near-black for maximum contrast against the background.
- The accent is a muted oxblood red, reserved for links, primary buttons, and
editorial call-outs.
## Typography
- Headings use Playfair Display (fallback to Georgia), with tight letter-spacing
and a short leading.
- Body copy is Georgia at 17px with a 1.7 leading for comfortable reading at
newspaper-column widths.
## Usage
Use Heritage for content-heavy pages, long-form articles, manifestos, or
anywhere the writing is the product. Pair with thin rules (`1px solid border`)
and avoid drop shadows — the serifs and spacing carry the hierarchy.