---
version: alpha
name: Apricot Press
description: Apricot stock and deep violet ink — complementary colours at full commitment, set like a recipe book.
meta:
  id: "theme-apricot-press"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Ingredients hang in the margin, steps run down the page.
  bestFor: Recipes and food publishing, instructional content, courses and how-tos, menus, craft documentation
  avoidFor: Dashboards, developer tools, anything with real-time data
  defaultMode: light
  surfaceStyle: ruled
  accentUse: text
  caseStyle: none
  borderWidth: 1px
  imageTreatment: warm
  motion:
    intensity: 1
    duration: 200ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "A completed step dims and its number fills; nothing else in the page reacts."
  displayFont: Bree Serif
  displayKind: serif
  bodyFont: Nunito Sans
  monoFont: Ubuntu Mono
colors:
  background: "#FFD9D2"
  foreground: "#1F110E"
  card: "#E9D1CD"
  card-foreground: "#1F110E"
  popover: "#E9D1CD"
  popover-foreground: "#1F110E"
  primary: "#381C7B"
  primary-foreground: "#FFF8F7"
  secondary: "#E1C2BC"
  secondary-foreground: "#1F110E"
  muted: "#E1C2BC"
  muted-foreground: "#654E49"
  accent: "#435C00"
  accent-foreground: "#FFF8F7"
  destructive: "#6B0006"
  destructive-foreground: "#FFF8F7"
  border: "#D1B6B1"
  input: "#D1B6B1"
  ring: "#381C7B"
  chart-1: "#4A388C"
  chart-2: "#555400"
  chart-3: "#5A2673"
  chart-4: "#426400"
  chart-5: "#213280"
colorsDark:
  background: "#1F0A07"
  foreground: "#EAD6D0"
  card: "#2A1310"
  card-foreground: "#EAD6D0"
  popover: "#2A1310"
  popover-foreground: "#EAD6D0"
  primary: "#D7D3FF"
  primary-foreground: "#180806"
  secondary: "#3C1B16"
  secondary-foreground: "#EAD6D0"
  muted: "#3C1B16"
  muted-foreground: "#A08781"
  accent: "#719900"
  accent-foreground: "#180806"
  destructive: "#FFCAC3"
  destructive-foreground: "#180806"
  border: "#492B25"
  input: "#492B25"
  ring: "#D7D3FF"
  chart-1: "#C4BDFF"
  chart-2: "#C3C354"
  chart-3: "#E7BCFF"
  chart-4: "#99C464"
  chart-5: "#C6D5FF"
typography:
  display-lg:
    fontFamily: Bree Serif
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Bree Serif
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Bree Serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.32
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.72
  body-md:
    fontFamily: Nunito Sans
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.7
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: Ubuntu Mono
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Ubuntu Mono
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  none: 0px
  sm: 3px
  md: 5px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 9px
  md: 18px
  lg: 28px
  xl: 56px
  gutter: 24px
  margin: 34px
  measure: 60ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 13px
  step-row:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.body-lg}"
  ingredient-list:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Apricot Press

## Overview

Apricot Press sets instructions the way a good cookbook does. Ingredients hang
in a narrow left margin where they can be scanned without reading; steps run
down the main column, numbered in the gutter; and a yield line — serves four,
makes twelve, takes ninety minutes — sits directly under the title where it
answers the first question anyone actually has.

The colour is apricot stock with deep violet ink: complementary hues at full
commitment, which is rare because it is hard to keep readable. It works here
because the violet is used almost exclusively as text, at a lightness low enough
that the contrast is never in question.

It suits recipes, courses and craft documentation. It has no components for live
data and should not be asked to grow any.

## Colors

Apricot, violet, and one green.

- **Ground (apricot):** a warm tinted stock, saturated enough to be a colour
  rather than a tint of white.
- **Primary (deep violet):** all body text weight, headings, and the primary
  button. This is the rare system where the primary is essentially the ink.
- **Accent (green):** the aside — a tip, a substitution, a warning about
  timing. Set as *text*, in the same size as the body, distinguished only by
  colour and a hanging label.
- **Neutrals** carry the apricot, so a card reads as a heavier weight of the
  same paper.
- Charts are duotone violet and green. There are rarely charts here.

## Typography

Bree Serif for display, Nunito Sans for reading, Ubuntu Mono for quantities.

- **Display:** Bree Serif at 56px. Friendly, slightly rounded slab — warm
  without being handwritten.
- **Body:** Nunito Sans at 15.5px, 1.7, 60ch. The leading is the loosest in the
  library, because these are instructions someone reads while doing something
  else and losing your place is the main failure mode.
- **Quantities:** Ubuntu Mono. Every amount, temperature and duration. A recipe
  where the amounts are set in the body face is much harder to scan.
- **No uppercase** except the small hanging labels.

## Layout

A 12-column grid at 1240px with 24px gutters. The signature structure is the
**hanging list**: ingredients occupy columns 1–3 in a filled card, the method
occupies columns 4–10, and step numbers hang in the gutter to the left of the
method rather than inline with it.

Vertical rhythm is 6px. Steps are separated by 28px — generously, so a finger or
a cursor can hold a place.

## Elevation & Depth

Ruled and lightly filled. The ingredient card is the only filled surface; the
method is set directly on the stock with hairline rules between steps.

The only motion is a step being completed: its number fills with violet and its
text dims. Nothing else on the page reacts.

## Shapes

Moderately soft — 5px on controls, 8px on cards, 12px on images. Softer than the
technical themes and much firmer than the commerce ones.

Photography is warm-treated and always at the top of a step or full-width above
the title. Never a portrait.

## Components

- **Hanging list:** the signature component. Filled ingredient card on the left,
  method with gutter-hung step numbers on the right.
- **Yield line:** directly under the title, mono, three facts separated by
  middots. Present on every instructional page.
- **Aside:** green text with a small hanging uppercase label. Never boxed.
- **Buttons:** violet fill, 5px radius, 13px padding.
- **Step number:** hangs in the gutter, mono, fills with violet when complete.

## Do's and Don'ts

- Do hang step numbers in the gutter, not inline.
- Do set every quantity, temperature and duration in mono.
- Do put a yield line under the title.
- Do keep the leading loose; these are working instructions.
- Don't box the asides; colour and a hanging label are enough.
- Don't use the green for anything other than an aside.
- Don't add live or real-time components to this system.