---
version: alpha
name: Claude Editorial

description: A warm-canvas editorial product system built on cream surfaces, serif display headlines, coral CTAs, and dark product mockups. The voice is literary, calm, and premium rather than cold or hyper-technical.

colors:
  primary: "#cc785c"
  primary-active: "#a9583e"
  primary-disabled: "#e6dfd8"
  ink: "#141413"
  body: "#3d3d3a"
  body-strong: "#252523"
  muted: "#6c6a64"
  muted-soft: "#8e8b82"
  hairline: "#e6dfd8"
  hairline-soft: "#ebe6df"
  canvas: "#faf9f5"
  surface-soft: "#f5f0e8"
  surface-card: "#efe9de"
  surface-cream-strong: "#e8e0d2"
  surface-dark: "#181715"
  surface-dark-elevated: "#252320"
  surface-dark-soft: "#1f1e1b"
  on-primary: "#ffffff"
  on-dark: "#faf9f5"
  on-dark-soft: "#a09d96"
  accent-teal: "#5db8a6"
  accent-amber: "#e8a55a"

typography:
  display-xl:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-lg:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1px
  display-md:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  title-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
  title-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  caption-uppercase:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  code:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  feature-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  product-mockup-card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  code-window-card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.code}"
    rounded: "{rounded.lg}"
    padding: 24px
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 40px
---

## Overview

Claude Editorial is a warm editorial product style built around a cream canvas, dark ink text, serif display headlines, and a single coral accent used on calls-to-action. Instead of cold blue gradients or dashboard chrome, the system feels literary and composed. It alternates between soft cream content cards and dark product mockups so the page breathes between reading mode and product mode.

The dominant contrast pattern is:
1. cream page floor,
2. slightly darker cream feature surfaces,
3. deep dark product cards,
4. coral CTA moments.

That contrast gives the style rhythm without needing loud shadows or decorative gradients.

## Color roles

- **Canvas** `#faf9f5`: default page floor; warm, never pure white.
- **Primary / Coral** `#cc785c`: the signature CTA accent; warm, human, slightly muted.
- **Ink** `#141413`: primary text and high-contrast UI edges.
- **Surface Card** `#efe9de`: light content cards and feature blocks.
- **Surface Dark** `#181715`: product mockups, code windows, footer bands.
- **On Dark** `#faf9f5`: cream-tinted text on dark surfaces.
- **Hairline** `#e6dfd8`: subtle border color for light surfaces.

## Typography rules

- Use a high-contrast serif for hero and section headlines.
- Keep body copy in a humanist sans with generous line-height.
- Use monospace only for code windows, terminal output, and product examples.
- Display headlines should feel literary, not salesy: large, airy, and slightly tight-tracked.

## Component guidance

### Buttons
- Primary button: coral fill, white text, medium radius, no heavy shadow.
- Secondary button: cream surface with ink text and subtle border.
- Buttons should feel calm and polished rather than loud.

### Cards
- Feature cards use `surface-card` with generous padding and minimal ornament.
- Product mockup cards switch to dark surfaces and carry interface fragments, terminal output, or model comparisons.
- Let surface contrast create depth; avoid strong shadows.

### Inputs
- Inputs sit on the cream canvas, with soft hairline borders and 8px radius.
- Focus state can shift the border toward coral.

## Layout principles

- Use large section spacing to create editorial pacing.
- Favor balanced asymmetry: split hero layouts, staggered content bands, and alternating light/dark zones.
- Content should feel readable first and product-forward second.

## Do
- Use coral sparingly so it keeps its signaling power.
- Pair serif headlines with restrained sans body copy.
- Present code or product UI on dark surfaces for strong contrast.

## Don’t
- Don’t introduce cool neon accents.
- Don’t use hard drop shadows as the main depth mechanism.
- Don’t fill every card with the primary color; coral is reserved for emphasis.