---
version: alpha
name: Studio Vellum
description: Luxury editorial. Ivory, ink, antique gold, a high-contrast didone, hairline rules and a great deal of nothing.
meta:
  id: "theme-studio-vellum"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Fashion-house editorial — ivory, ink, and expensive emptiness
  bestFor: Brand sites, agency and studio portfolios, luxury commerce, manifestos, long-form essays
  avoidFor: Dashboards, dense catalogues, anything with more than a handful of items per screen
  defaultMode: light
  surfaceStyle: ruled
  accentUse: underline
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: grayscale
  motion:
    intensity: 6
    duration: 420ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "Slow clip-path mask reveals; rules and underlines draw left to right."
  displayFont: Bodoni Moda
  displayKind: serif
  bodyFont: Inter
  monoFont: IBM Plex Mono
colors:
  background: "#FBFAF6"
  foreground: "#14130F"
  card: "#FFFFFF"
  card-foreground: "#14130F"
  popover: "#FFFFFF"
  popover-foreground: "#14130F"
  primary: "#14130F"
  primary-foreground: "#FBFAF6"
  secondary: "#F1EEE6"
  secondary-foreground: "#35322A"
  muted: "#F1EEE6"
  muted-foreground: "#6A6558"
  accent: "#8A6E2C"
  accent-foreground: "#FBFAF6"
  destructive: "#8E2318"
  destructive-foreground: "#FBFAF6"
  border: "#E2DED2"
  input: "#E2DED2"
  ring: "#14130F"
  chart-1: "#14130F"
  chart-2: "#8A6E2C"
  chart-3: "#4A5A52"
  chart-4: "#8A5A4A"
  chart-5: "#6A6558"
colorsDark:
  background: "#100F0C"
  foreground: "#F4F1E8"
  card: "#191710"
  card-foreground: "#F4F1E8"
  popover: "#191710"
  popover-foreground: "#F4F1E8"
  primary: "#F4F1E8"
  primary-foreground: "#100F0C"
  secondary: "#22201A"
  secondary-foreground: "#E8E4D8"
  muted: "#22201A"
  muted-foreground: "#A29C8C"
  accent: "#D8B972"
  accent-foreground: "#1C1503"
  destructive: "#E8695E"
  destructive-foreground: "#2A0705"
  border: "#2E2B22"
  input: "#2E2B22"
  ring: "#F4F1E8"
  chart-1: "#F4F1E8"
  chart-2: "#D8B972"
  chart-3: "#8FA69A"
  chart-4: "#D09A86"
  chart-5: "#A29C8C"
typography:
  display-lg:
    fontFamily: Bodoni Moda
    fontSize: 84px
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Bodoni Moda
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Bodoni Moda
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
  body-lg:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.75
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  label-caps:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.24em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.06em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  base: 16px
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 128px
  gutter: 32px
  margin: 64px
  measure: 58ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 16px
  button-line:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 16px
  card-plate:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 0px
  rule-hairline:
    height: 1px
    backgroundColor: "{colors.border}"
  eyebrow:
    typography: "{typography.label-caps}"
    textColor: "{colors.muted-foreground}"
---

# Studio Vellum

## Overview

Studio Vellum is a fashion house's press book. Enormous didone display type,
ivory paper, hairline rules, and long stretches of nothing at all. Emptiness is
the product here: the amount of unused space is what signals that the thing
being shown is worth the room.

Use it for brand sites, studio and agency portfolios, luxury commerce, manifestos
and long essays. It holds roughly three to six ideas per screen. Push more into
it and the effect inverts — it stops reading as expensive and starts reading as
unfinished.

Personality: austere, confident, expensive, quiet.

## Colors

Ivory, ink, and one antique gold.

- **Primary (#14130F ink):** The button colour, the rule colour, the type colour.
  In this system the primary action is black, not coloured — colour would cheapen
  it.
- **Accent (#8A6E2C antique gold):** Used only as a thin underline or a small
  mark. Never a fill larger than a few square centimetres.
- **Neutral (#FBFAF6):** Vellum. The page is never white; white is reserved for
  image plates so photography reads as brighter than the page.
- **Muted foreground (#6A6558):** Captions, credits, running heads.

Dark mode is the same book printed on black stock: ink and page swap, gold warms
to `#D8B972`.

## Typography

Bodoni Moda for display, Inter for everything a reader actually has to read.

- **Display:** Bodoni Moda 400 at 84px and up, tracking `-0.03em`, line height
  under 1.0. High-contrast didones need size to survive; do not set this face
  below 24px anywhere.
- **Body:** Inter 15–17px / 1.7 at a 58ch measure. Short measure, long leading.
- **Eyebrows / labels:** Inter 10px uppercase at `0.24em` tracking — extreme
  letterspacing is a signature of the system, and it is used only at 10–11px.
- **Credits:** IBM Plex Mono 11px for dates, editions, numbering.

Never bold the didone. Never letterspace the body. The tracking contrast between
the tight display and the wide eyebrow is the whole typographic idea.

## Layout

An asymmetric editorial grid: 12 columns, 32px gutters, 64px page margins, with
content deliberately placed off-centre. A headline may occupy columns 1–7 while
its supporting paragraph sits in columns 9–12, lower on the page.

Vertical rhythm is enormous: 128px between sections, 64px between blocks. Full
-bleed image plates alternate with heavily indented text blocks.

On mobile, keep the extreme vertical spacing (do not compress to 24px) and let
the display type drop to ~44px. The generosity is the brand.

## Elevation & Depth

No elevation whatsoever. No shadows, no fills, no cards. Structure is made of
**hairline rules** in `border` and of empty space. A "section" is a rule plus an
eyebrow plus a great deal of air.

## Shapes

Zero radius everywhere except avatars, which are fully round. Images are
uncropped rectangles at their natural aspect ratio, aligned to the grid, never
inside a container.

## Components

- **Buttons:** square, ink fill, 16px/32px padding, uppercase 10px label with
  `0.24em` tracking. The alternative is a text button with a 1px underline that
  extends 8px past the text on each side.
- **Image plate:** full-bleed or grid-aligned rectangle with a small mono caption
  set flush-left beneath it.
- **Section head:** a 1px full-width rule, an uppercase eyebrow directly beneath
  it at left, then the didone headline in the next grid block.
- **Link:** gold 1px underline with a 4px offset; on hover the underline
  thickens to 2px. No colour change.
- **List:** no bullets. Items are separated by hairline rules with the index set
  in mono at the left margin.
- **Nav:** flush-left wordmark, flush-right uppercase links at `0.24em`, one 1px
  rule beneath. No background, no blur, no sticky drop shadow.

## Do's and Don'ts

- Do keep the vertical spacing enormous, including on mobile.
- Do place content off-centre — symmetry reads as a template here.
- Do let the didone run very large and very tight.
- Don't use a coloured primary button; the primary action is ink.
- Don't add cards, shadows, or fills of any kind.
- Don't put more than about six items on a screen.
- Don't set the display face below 24px, and never bold it.