Vintage
Ages interfaces gracefully with muted palettes and timeworn textures.
- Version
- v1.0.0 · Updated Jul 18, 2026
- Context
- ≈1,440 tokens
- Security
- ✓ scanned
- License
- Single seat
- Works with
- Claude Code, Cursor, Codex
Checkout opens soon · launches at $9
≈1,440 tokens · v1.0.0
Live demo — an original page built in the Vintage style. Open in new tab
About this skill
Vintage design evokes nostalgia through classic typography, muted palettes, and timeworn textures, giving interfaces a timeless, character-rich feel. Its live demo renders an e-commerce storefront — collection hero, product cards, lookbook strip, and reviews.
The skill file
Vintage wraps an interface in the warmth of something printed decades ago. Cream paper, faded ink, slab serifs, and a whisper of grain give it the patina of a well-loved book or a hand-set menu.
The feeling is nostalgic, crafted, and trustworthy — as if the design has history. Reach for Vintage when a brand wants to feel artisanal and human: coffee roasters, makers, storytellers, restaurants, and any product that benefits from character over chrome.
Design principles
- Earn the patina. Subtle texture, muted ink, and aged paper signal age without ever looking dirty.
- Classic type leads. Slab and old-style serifs carry the voice; ornament merely supports it.
- Muted, earthy color. Nothing pure or neon — every hue is slightly faded and warm.
- Printed-page structure. Double rules, drop caps, leader dots, and framed images echo print.
- Warmth over precision. Soft edges and gentle shadow stand in for hard digital sharpness.
- Restrained ornament. A flourish here and there, never a flood of decoration.
Color
The foundation is aged cream paper (#F2E8D5) with a deeper tan surface (#EADBC0) for cards and panels. Ink is a deep coffee brown (#3A2E24) rather than black, which softens the entire palette.
The primary accent is a burnt sienna / brick orange (#A8452C) for links, buttons, and emphasis. A faded olive green (#557153) serves as the secondary accent, while aged gold (#C9A24B) adds occasional richness for badges and ornament. Muted writing (#8A7C68) handles captions and metadata, borders sit at a soft #D8C5A4, and a very faint paper grain lies over the backgrounds.
Light mode is the home of this style: cream, coffee ink, and warm earth accents. Dark mode shifts to a deep walnut background (#241C16), #2E251D surfaces, warm parchment text (#E8DBC2), and #A89880 muted; warm the accent to #C8623F so it glows against the dark wood tone, and move borders to #3D3226.
- Typography
- Layout & spacing
- Components
- Motion
- Accessibility
- Use it with your AI tool
Preview ends here
Typography, Layout & spacing, Components, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified
What's inside
- SKILL.md5.7 KB
More in Design
View allEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
More from @staqd
View profileEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.