디자인 시스템
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
다운로드5
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (8)

display
"Rockwell", "Roboto Slab", "Clarendon", Georgia, serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
headline
"Caslon", "Libre Caslon Text", "Playfair Display", Georgia, serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
"Source Sans Pro", "Helvetica Neue", Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
serifBody
"Libre Caslon Text", Georgia, serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
"Courier Prime", "Courier New", ui-monospace, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 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
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (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 소스

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 소스

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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전