dkdk/heritage
Heritage
Journalistic high-contrast neutrals with a deep red accent. Serif headings, generous leading, strong rules.
install
npx designkit-cli add designkit-sh/heritageTypography
Every text element the kit ships — headings through code
Headings
The quick brown fox
Section heading
Subsection heading
Minor heading
Overline heading
Body text
Lead paragraph.Body text sits at the backbone of any interface — if it reads well, everything else has a chance. If it doesn't, nothing else matters.
Standard paragraph at the body size. Type hierarchies work best when the jump from body to subheading is clear but not disruptive — around 1.25-1.5× works across most contexts. Inline elements like a link, inline code, emphasis, strong, and highlighted text should all feel native to the kit.
Small / caption text — used for metadata, timestamps, descriptions under labels. Usually 14px or slightly smaller.
Lists
Unordered
- Token-driven styling
- Agent-readable format
- Composable kits
- Colors
- Typography
- Component stylings
- Portable between projects
Ordered
- Describe the kit in prose
- Extract colors and typography
- Apply to a sample UI
- Iterate on token values
Blockquote
“Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.”
Code
// install a kit
$ npx designkit-cli add airbnb
// apply it to your project
import { applyKit } from "@designkit/theme"
applyKit("airbnb")Rule
Buttons
Primary, secondary, outline, ghost — every state the kit ships
Default
Sizes
With icon
Form fields
Every input control the kit ships — text, select, checkboxes, radios, switches, file
Text inputs
Textarea
Select
Checkboxes
Radio group
Toggle switch
File input
Feedback
Alerts, badges, progress, tooltips, avatars — the signal surface of every UI
Alerts
Scheduled maintenance
We'll be rolling out a new version on Friday at 22:00 UTC. Expect a short read-only window.
Kit published
Your DESIGN.md is live. Anyone can now install it with `npx designkit-cli add you/my-kit`.
Deprecated API
You're calling /v1/kits which will be removed in 30 days. Migrate to /v2/kits.
Build failed
Two component tokens reference an undefined color. Run `designkit lint` to see them.
Badges & tags
Avatars
Jeremy Dupont
Author
Progress
Spinner
Tooltip (static)
Keyboard shortcut
Press ⌘ K to open the command palette, or Esc to dismiss.
Data display
Table, definition list, empty state — how the kit shows structured data
Table
| Kit | Author | Installs | Updated | Status |
|---|---|---|---|---|
| airbnb | getdesign | 12.4K | 2d ago | Active |
| claude | getdesign | 8.1K | 5d ago | Active |
| stripe | getdesign | 7.9K | 1w ago | Active |
| linear.app | getdesign | 6.2K | 2w ago | Beta |
| heritage | dk | 2.1K | 1mo ago | Draft |
Definition list
- Name
- Airbnb
- Author
- getdesign · Claude
- Format
- DESIGN.md (Google Stitch spec)
- Primary font
- Nunito (substitute for Airbnb Cereal VF)
- Installs
- 12,408
- License
- MIT
Empty state
No kits yet
You haven't published any kits on this account. Drop a DESIGN.md in a public repo to get started.
Breadcrumbs
Tabs
Sign in
Centered auth card — the most scrutinised surface in any app
Dashboard KPIs
Four-card stat row — the staple of every internal dashboard
Overview
Performance for the last 30 days
Active users
12,408
+4.2% vs last period
MRR
$28.9K
+12.1% vs last period
Churn
1.8%
-0.3% vs last period
NPS
72
+5 vs last period
Chat thread
Agent + user turn-based chat — bubbles, avatar, timestamp
Design Agent
online · responds in seconds
Hero
Landing-page headline + subtitle + primary CTA
Designed for humans. Built for agents.
Ship a brand-aligned product in hours. Coding agents write UI that matches your design system — no brief, no handoff.
Pricing
Three-tier comparison grid with a highlighted middle tier
Simple pricing
Pay for what you use. Change plans any time.
Hobby
- 1 project
- Community support
- Public kits only
Pro
Popular- Unlimited projects
- Private kits
- Priority support
- AI kit generator
Team
- Everything in Pro
- Shared workspace
- SSO + audit logs
- Dedicated support
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.