officialofficial/heritage

Heritage

Journalistic high-contrast neutrals with a deep red accent. Serif headings, generous leading, strong rules.

install

npx designkit add designkit-sh/heritage
source ↗
previewrenderPreviewHtml

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.