Skip to content
Octane Design
Library
Librarylight
brand referencelightfeatured

Claude

Claude AI interface with warm parchment tones
Export
---
name: "Claude"
mode: "light"
---

# Claude

## Visual theme and atmosphere
Warm, literary, restrained, and printed-paper.

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

## Color palette and roles
- **Bone Parchment (#f8f8f6)**: Page canvas, large background areas.
- **Paper White (#ffffff)**: Elevated card surfaces.
- **Carbon Ink (#121212)**: Primary text, headings.
- **Graphite (#373734)**: Secondary headings, button text.
- **Ashen (#7b7974)**: Muted helper text, captions.
- **Clay (#d97757)**: Orange decorative accent for icons and small graphic details.

## Typography rules
- **Display**: Anthropic Serif, 400, 30px. Display and editorial headlines.
- **Body**: Anthropic Sans, 400, 14px. All interface text: body, nav, buttons.
- **Label**: Anthropic Sans, 600, 12px. Small labels and badges.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 24px.
- Control corners: 8px.
- Pills: 9999px.

## Motion
Use still motion. Fast feedback lasts 120ms; composed transitions last 280ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Bone Parchment as the default canvas — never pure white for large backgrounds.
- Set display headlines in Anthropic Serif weight 400.
- Keep the palette monochrome — Clay is reserved for decorative marks only.
- Do not introduce cool blues or greens.
- Do not use pure black for body text — Carbon Ink is warmer.
- Do not set headlines at weight 700+.
---
name: "Claude"
mode: "light"
---

# Claude

## Visual theme and atmosphere
Warm, literary, restrained, and printed-paper.

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

## Color palette and roles
- **Bone Parchment (#f8f8f6)**: Page canvas, large background areas.
- **Paper White (#ffffff)**: Elevated card surfaces.
- **Carbon Ink (#121212)**: Primary text, headings.
- **Graphite (#373734)**: Secondary headings, button text.
- **Ashen (#7b7974)**: Muted helper text, captions.
- **Clay (#d97757)**: Orange decorative accent for icons and small graphic details.

## Typography rules
- **Display**: Anthropic Serif, 400, 30px. Display and editorial headlines.
- **Body**: Anthropic Sans, 400, 14px. All interface text: body, nav, buttons.
- **Label**: Anthropic Sans, 600, 12px. Small labels and badges.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 24px.
- Control corners: 8px.
- Pills: 9999px.

## Motion
Use still motion. Fast feedback lasts 120ms; composed transitions last 280ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Bone Parchment as the default canvas — never pure white for large backgrounds.
- Set display headlines in Anthropic Serif weight 400.
- Keep the palette monochrome — Clay is reserved for decorative marks only.
- Do not introduce cool blues or greens.
- Do not use pure black for body text — Carbon Ink is warmer.
- Do not set headlines at weight 700+.
---
name: "Claude"
mode: "light"
---

# Claude

## Visual theme and atmosphere
Warm, literary, restrained, and printed-paper.

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

## Color palette and roles
- **Bone Parchment (#f8f8f6)**: Page canvas, large background areas.
- **Paper White (#ffffff)**: Elevated card surfaces.
- **Carbon Ink (#121212)**: Primary text, headings.
- **Graphite (#373734)**: Secondary headings, button text.
- **Ashen (#7b7974)**: Muted helper text, captions.
- **Clay (#d97757)**: Orange decorative accent for icons and small graphic details.

## Typography rules
- **Display**: Anthropic Serif, 400, 30px. Display and editorial headlines.
- **Body**: Anthropic Sans, 400, 14px. All interface text: body, nav, buttons.
- **Label**: Anthropic Sans, 600, 12px. Small labels and badges.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 24px.
- Control corners: 8px.
- Pills: 9999px.

## Motion
Use still motion. Fast feedback lasts 120ms; composed transitions last 280ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Bone Parchment as the default canvas — never pure white for large backgrounds.
- Set display headlines in Anthropic Serif weight 400.
- Keep the palette monochrome — Clay is reserved for decorative marks only.
- Do not introduce cool blues or greens.
- Do not use pure black for body text — Carbon Ink is warmer.
- Do not set headlines at weight 700+.
---
name: "Claude"
mode: "light"
---

# Claude

## Visual theme and atmosphere
Warm, literary, restrained, and printed-paper.

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

## Color palette and roles
- **Bone Parchment (#f8f8f6)**: Page canvas, large background areas.
- **Paper White (#ffffff)**: Elevated card surfaces.
- **Carbon Ink (#121212)**: Primary text, headings.
- **Graphite (#373734)**: Secondary headings, button text.
- **Ashen (#7b7974)**: Muted helper text, captions.
- **Clay (#d97757)**: Orange decorative accent for icons and small graphic details.

## Typography rules
- **Display**: Anthropic Serif, 400, 30px. Display and editorial headlines.
- **Body**: Anthropic Sans, 400, 14px. All interface text: body, nav, buttons.
- **Label**: Anthropic Sans, 600, 12px. Small labels and badges.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 24px.
- Control corners: 8px.
- Pills: 9999px.

## Motion
Use still motion. Fast feedback lasts 120ms; composed transitions last 280ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Bone Parchment as the default canvas — never pure white for large backgrounds.
- Set display headlines in Anthropic Serif weight 400.
- Keep the palette monochrome — Clay is reserved for decorative marks only.
- Do not introduce cool blues or greens.
- Do not use pure black for body text — Carbon Ink is warmer.
- Do not set headlines at weight 700+.
---
name: "Claude"
mode: "light"
---

# Claude

## Visual theme and atmosphere
Warm, literary, restrained, and printed-paper.

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

## Color palette and roles
- **Bone Parchment (#f8f8f6)**: Page canvas, large background areas.
- **Paper White (#ffffff)**: Elevated card surfaces.
- **Carbon Ink (#121212)**: Primary text, headings.
- **Graphite (#373734)**: Secondary headings, button text.
- **Ashen (#7b7974)**: Muted helper text, captions.
- **Clay (#d97757)**: Orange decorative accent for icons and small graphic details.

## Typography rules
- **Display**: Anthropic Serif, 400, 30px. Display and editorial headlines.
- **Body**: Anthropic Sans, 400, 14px. All interface text: body, nav, buttons.
- **Label**: Anthropic Sans, 600, 12px. Small labels and badges.

## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 32px.
- Section padding: 80px.
- Card corners: 24px.
- Control corners: 8px.
- Pills: 9999px.

## Motion
Use still motion. Fast feedback lasts 120ms; composed transitions last 280ms; easing is cubic-bezier(0.16, 1, 0.3, 1).

## Guardrails
- Use Bone Parchment as the default canvas — never pure white for large backgrounds.
- Set display headlines in Anthropic Serif weight 400.
- Keep the palette monochrome — Clay is reserved for decorative marks only.
- Do not introduce cool blues or greens.
- Do not use pure black for body text — Carbon Ink is warmer.
- Do not set headlines at weight 700+.

Overview

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

Warm, literary, restrained, and printed-paper.

Color palette

6 semantic roles

Bone Parchment

#f8f8f6

Paper White

#ffffff

Carbon Ink

#121212

Graphite

#373734

Ashen

#7b7974

Clay

#d97757

Specification

Type scale · Fonts · Spacing & Shape · Guidelines

  1. Display30px · 400 · —

    The quick brown fox jumps

  2. Body14px · 400 · —

    The quick brown fox jumps

  3. Label12px · 600 · —

    The quick brown fox jumps

Display

Anthropic Serif

Weight
400
Sizes
30px
Line height
—
Letter spacing
—
Fallback
system-ui

Display and editorial headlines

Body

Anthropic Sans

Weight
400
Sizes
14px
Line height
—
Letter spacing
—
Fallback
system-ui

All interface text: body, nav, buttons

Label

Anthropic Sans

Weight
600
Sizes
12px
Line height
—
Letter spacing
—
Fallback
system-ui

Small labels and badges

Spacing

Base unit
8px
Element gap
16px
Card padding
32px
Section gap
80px

Border Radius

cards
24px
controls
8px
pills
9999px
  • Use Bone Parchment as the default canvas — never pure white for large backgrounds.
  • Set display headlines in Anthropic Serif weight 400.
  • Keep the palette monochrome — Clay is reserved for decorative marks only.
  • Do not introduce cool blues or greens.
  • Do not use pure black for body text — Carbon Ink is warmer.
  • Do not set headlines at weight 700+.

Templates

4 page patterns

Hero / Landing5 patterns

Full marketing landing page with sticky nav, centered hero, stats bar, feature cards, CTA banner, and footer. Fully responsive.

navigationherostats barfeature gridcta banner

Related systems

Anthropic website with ivory paper and clay accent

Anthropic

Scientific field journal on warm parchment — ivory surfaces, editorial serif, single clay accent.

light
ElevenLabs voice AI with warm eggshell tones

ElevenLabs

Bauhaus studio notebook — eggshell paper, black ink, violet and orange sparks for product moments.

light
OpenAI research page with minimal typography

OpenAI

Scientific restraint with near-white spaciousness and a single quiet green thread.

light