ImprintLuxury Design System

Token catalog, type scale, and component gallery. Hidden route — not indexed.

Color Tokens

Background & Surface

--color-bg #0d0905
--color-surface #1a1208
--color-surface-raised #241810
--color-surface-hover #2d2015

Border

--color-border #3d2e1e
--color-border-subtle #2a2016

Text

--color-text #f5ede0
--color-text-muted #a08060
--color-text-inverse #0d0905

Brand

--color-primary #c17f3e
--color-primary-light #d4973f
--color-primary-dark #9a6230
--color-accent #b87333
--color-accent-subtle #1f1408
--color-sage #7a9e7e

Semantic

--color-error #e57373
--color-error-subtle #1f0808
--color-success #6dbf8a
--color-success-subtle #091f10
--color-warning #d97706
--color-warning-subtle #1f1408

Type Scale

Display — Cormorant Garamond

display-lg

Handmade for Someone

display-md

Handmade for Someone

display-sm

Handmade for Someone

4xl

Handmade for Someone

3xl

Handmade for Someone

2xl

Handmade for Someone

Body — Inter

xl

We cut each sign to order — yours ships in 3–5 days from our studio.

lg

We cut each sign to order — yours ships in 3–5 days from our studio.

base (16px)

We cut each sign to order — yours ships in 3–5 days from our studio.

sm (14px)

We cut each sign to order — yours ships in 3–5 days from our studio.

xs (12px)

We cut each sign to order — yours ships in 3–5 days from our studio.

Letter Spacing

--tracking-tight

Personalized wood sign

--tracking-normal

Personalized wood sign

--tracking-wide

Personalized wood sign

--tracking-wider

Personalized wood sign

--tracking-eyebrow

Shop our collection

--tracking-caps

Shop our collection

Spacing Scale

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-7
28px
--space-8
32px
--space-9
36px
--space-10
40px
--space-12
48px
--space-14
56px
--space-16
64px
--space-20
80px
--space-24
96px
--space-28
112px
--space-32
128px

Border Radius

--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-full 9999px

Shadows

--shadow-sm
--shadow-md
--shadow-card
--shadow-lg

Primitives

Button

As link

Eyebrow

Handmade to Order

New Arrivals

Maker's Story

Link

Default link Muted link Accent link External link

PriceTag

$45.00 $78.00 $125.00

Card

Default card — wraps any content with surface-raised background, border, and card shadow.

Card with lift + link overlay — used for product grids and clickable item surfaces.

Stack

Item one Item two Item three
Row one Row two Row three

Breadcrumb

EmptyState

Nothing here yet

Browse the shop to add something.

Your cart is empty

Add something handmade and we'll start on it within 24 hours.

Browse the shop

ErrorState

LoadingState

Field

Form + FormGroup

Your details

Prose

A heading inside prose

Long-form rendered markdown gets readable rhythm, a capped measure, and proper hierarchy. Inline emphasis and links are styled to match the brand.

A subheading

  • Restored list markers, tinted to the brand accent.
  • Consistent spacing between items.

A blockquote reads as a tinted panel, never a side-stripe accent.

Description Renderer

Components that turn product frontmatter and markdown into a structured, scannable description. SpecCallout and MakerNote are also importable inside product .mdx bodies.

SpecGrid

The details

Material
Solid walnut
Finish
Hand-rubbed oil
Dimensions
12 × 8 in
Weight
14 oz
Ships in
3–5 business days

SpecCallout

MakerNote (MDX)

Section + Container

Layout primitives — Section adds vertical band padding with an inner width constraint; Container is the inline-only width wrapper. Both are used structurally across pages rather than shown as swatches.

Container width="narrow" (≈ measure)

Product Components

ProductCard, GuaranteeBadge, PersonalizationInput, and CustomRequestForm are rendered live on the product and shop pages. See /shop and /products/[slug] .

Motion Tokens

fast · 150ms
base · 200ms
slow · 300ms

Hover each chip to see the easing. prefers-reduced-motion disables all transitions globally.