Design system
web
v1.0.0
90/100

Vintage Letterpress

@dante · Aesthetic

Aged-paper letterpress system with oxblood and forest accents, slab serif headlines, asterism dividers, and rule-line composition for nostalgic editorial UI.

HTML/CSS
React
shadcn/ui
Tailwind
#aesthetic
#letterpress
#ornament
#paper
#serif
Vintage Letterpress
Downloads5
Download package
DESIGN.mdSKILL.md

Overview

Vintage Letterpress

Principles

  • Aged paper, not white. The canvas is #F2E9D2 with optional grain. White is reserved for moments of contrast inside printed elements; never as a page background.
  • Ink hierarchy beats color hierarchy. Bodies are set in dark ink (#1B140C); oxblood (#6E1F1F) and forest (#2F4A33) appear only on accents, the single primary action, and editorial flourishes.
  • Rules do the dividing. A thin sepia rule, a double black rule, and an asterism (⁂) cover almost every section break. Boxes, drop shadows, and gradients are out of period.
  • Two type tracks. Slab serif (Rockwell-style) for labels, eyebrows, buttons, and small caps; transitional serif (Caslon-style) for headlines, body, and numerals. A neutral sans serif is permitted for dense forms but should not dominate.

Color

Reserve oxblood for one CTA per page and one stamp or eyebrow per section. Forest is the secondary editorial accent, used for archival or success-tone flourishes. Sepia (#8A6A3B) and ochre (#B5832A) carry tertiary marks: rule lines, captions, dingbats. Avoid neon, gradients, and saturated blues; the period predates them.

Typography

Headlines run in transitional serif at h1 44px / h2 30px with tight leading (1.05–1.2). Body sets in the same family at 16/1.6 for long-form, or in body sans at 14/1.6 for product surfaces. Small-caps slab at 11px / 0.20em letter-spacing labels every section, button, and eyebrow. Italic transitional serif handles decks, helper text, and colophon notes.

Spacing & rhythm

A 4 / 8 / 12 / 16 / 24 / 32 scale governs spacing. Vertical rhythm is generous: 32–48px between sections, with a thin or double rule absorbing the transition. Corners stay nearly square (radius 2–4px); cards earn their boundary from a 1px sepia border plus a top double rule.

Voice

Write as a print editor would: confident, plainspoken, slightly archaic but never costumey. Numerals, datelines, and volume marks ("Vol. III · No. 12") give surfaces a periodical feel without parody.

Anti-patterns

No glassmorphism, mesh gradients, neon, drop shadows in color, photographic backdrops, emoji, or sans-serif body in long-form. No more than one drop cap, one stamp, and one ornament per page.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (13)

paper
#F2E9D2
paperDeep
#E8DCBE
paperEdge
#D9C9A3
ink
#1B140C
inkSoft
#3A2E22
oxblood
#6E1F1F
oxbloodDeep
#4F1414
forest
#2F4A33
sepia
#8A6A3B
sepiaPale
#C9B58A
ochre
#B5832A
rule
#7A5A3A
muted
#A89172

Typography (8)

display
"Rockwell", "Roboto Slab", "Clarendon", Georgia, serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
headline
"Caslon", "Libre Caslon Text", "Playfair Display", Georgia, serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
"Source Sans Pro", "Helvetica Neue", Arial, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
serifBody
"Libre Caslon Text", Georgia, serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
"Courier Prime", "Courier New", ui-monospace, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
scale
unparsed
{
  "h1": "44px/1.1",
  "h2": "30px/1.18",
  "h3": "22px/1.25",
  "body": "16px/1.6",
  "caption": "12px/1.4"
}
weights
unparsed
{
  "regular": 400,
  "bold": 700
}
smallcaps
letter-spacing:0.14em;text-transform:uppercase
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234

Components (15)

Button

Stamped action with thin oxblood border on aged paper. Square corners, slab serif label.

html
Hand-tuned letterpress CSS
1 props · 6 states · 8 tags · 2 sources

Input

Underline-only field with serif label set in small caps. Bottom rule deepens on focus.

html
Hand-tuned letterpress CSS
2 props · 5 states · 8 tags · 2 sources

Card

Aged paper card with thin sepia border, top double rule, and oxblood eyebrow.

html
Hand-tuned letterpress CSS
0 props · 2 states · 6 tags · 2 sources
Missing states: focus-visible, disabled

Badge

Small-caps tag with thin oxblood or forest rule. No fill, no rounding.

html
Hand-tuned letterpress CSS
1 props · 1 states · 9 tags · 2 sources
Missing states: hover, focus-visible, disabled

Heading

Editorial headline stack: small-caps eyebrow, transitional serif H1, italic deck.

html
Hand-tuned letterpress CSS
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Link

Inline serif link, oxblood with thin underline; hover thickens underline.

html
Hand-tuned letterpress CSS
0 props · 4 states · 5 tags · 2 sources
Missing states: disabled

Hero

Masthead-style hero: nameplate rule, large transitional headline, italic deck, double-rule footer.

html
Hand-tuned letterpress CSS
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Nav

Horizontal nav with small-caps slab labels, separated by thin pipe rules.

html
Hand-tuned letterpress CSS
0 props · 3 states · 6 tags · 2 sources
Missing states: focus-visible, disabled

Footer

Three-column colophon footer with double rule top and italic small-print line.

html
Hand-tuned letterpress CSS
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Stat

Numerical figure block: oversized transitional serif numeral, slab small-caps label, italic note.

html
Hand-tuned letterpress CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

SerifHeadline

Drop-cap opener: oxblood initial cap floats into transitional serif paragraph.

html
Hand-tuned letterpress CSS
0 props · 1 states · 3 tags · 2 sources
Missing states: hover, focus-visible, disabled

RuleDivider

Section break with thin rule, double rule, and centered asterism options.

html
Hand-tuned letterpress CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

OrnamentMark

Centered fleuron ornament flanked by sepia rules. Used between articles or above bylines.

html
Hand-tuned letterpress CSS
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

StampBadge

Tilted oxblood rubber-stamp impression with double inner rule.

html
Hand-tuned letterpress CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

NumberedList

Editorial numbered list with oxblood roman numerals and thin sepia separator rules.

html
Hand-tuned letterpress CSS
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

DESIGN.md

Vintage Letterpress

Principles

  • Aged paper, not white. The canvas is #F2E9D2 with optional grain. White is reserved for moments of contrast inside printed elements; never as a page background.
  • Ink hierarchy beats color hierarchy. Bodies are set in dark ink (#1B140C); oxblood (#6E1F1F) and forest (#2F4A33) appear only on accents, the single primary action, and editorial flourishes.
  • Rules do the dividing. A thin sepia rule, a double black rule, and an asterism (⁂) cover almost every section break. Boxes, drop shadows, and gradients are out of period.
  • Two type tracks. Slab serif (Rockwell-style) for labels, eyebrows, buttons, and small caps; transitional serif (Caslon-style) for headlines, body, and numerals. A neutral sans serif is permitted for dense forms but should not dominate.

Color

Reserve oxblood for one CTA per page and one stamp or eyebrow per section. Forest is the secondary editorial accent, used for archival or success-tone flourishes. Sepia (#8A6A3B) and ochre (#B5832A) carry tertiary marks: rule lines, captions, dingbats. Avoid neon, gradients, and saturated blues; the period predates them.

Typography

Headlines run in transitional serif at h1 44px / h2 30px with tight leading (1.05–1.2). Body sets in the same family at 16/1.6 for long-form, or in body sans at 14/1.6 for product surfaces. Small-caps slab at 11px / 0.20em letter-spacing labels every section, button, and eyebrow. Italic transitional serif handles decks, helper text, and colophon notes.

Spacing & rhythm

A 4 / 8 / 12 / 16 / 24 / 32 scale governs spacing. Vertical rhythm is generous: 32–48px between sections, with a thin or double rule absorbing the transition. Corners stay nearly square (radius 2–4px); cards earn their boundary from a 1px sepia border plus a top double rule.

Voice

Write as a print editor would: confident, plainspoken, slightly archaic but never costumey. Numerals, datelines, and volume marks ("Vol. III · No. 12") give surfaces a periodical feel without parody.

Anti-patterns

No glassmorphism, mesh gradients, neon, drop shadows in color, photographic backdrops, emoji, or sans-serif body in long-form. No more than one drop cap, one stamp, and one ornament per page.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions