source

---
name: Claude (Anthropic)
description:
  Warm parchment canvas with Fraunces-like serif headlines, terracotta accents,
  warm-toned neutrals, and ring-based shadow depth.
originalFonts:
  primary: "Anthropic Serif"
  mono: "Anthropic Mono"
  fallbacks:
    - "Georgia"
colors:
  background: "#f5f4ed"
  surface: "#faf9f5"
  surface-raised: "#ffffff"
  ink: "#141413"
  ink-muted: "#5e5d59"
  accent: "#c96442"
  accent-alt: "#d97757"
  border: "#f0eee6"
  link: "#c96442"
  danger: "#b53333"
  focus: "#3898ec"
  anthropic-near-black: "#141413"
  terracotta-brand: "#c96442"
  coral-accent: "#d97757"
  error-crimson: "#b53333"
  focus-blue: "#3898ec"
  parchment: "#f5f4ed"
  ivory: "#faf9f5"
  pure-white: "#ffffff"
  warm-sand: "#e8e6dc"
  dark-surface: "#30302e"
  deep-dark: "#141413"
  charcoal-warm: "#4d4c48"
  olive-gray: "#5e5d59"
  stone-gray: "#87867f"
  dark-warm: "#3d3d3a"
  warm-silver: "#b0aea5"
  border-cream: "#f0eee6"
  border-warm: "#e8e6dc"
  border-dark: "#30302e"
  ring-warm: "#d1cfc5"
  ring-subtle: "#dedc01"
  ring-deep: "#c2c0b6"
typography:
  h1:
    family: "Fraunces"
    size: "4rem"
    weight: 500
    lineHeight: 1.1
  h2:
    family: "Fraunces"
    size: "3.25rem"
    weight: 500
    lineHeight: 1.2
  h3:
    family: "Fraunces"
    size: "2rem"
    weight: 500
    lineHeight: 1.1
  body:
    family: "Inter"
    size: "1rem"
    weight: 400
    lineHeight: 1.6
  button:
    family: "Inter"
    size: "1rem"
    weight: 500
    lineHeight: 1.25
  caption:
    family: "Inter"
    size: "0.88rem"
    weight: 400
    lineHeight: 1.43
  code:
    family: "JetBrains Mono"
    size: "0.94rem"
    weight: 400
    lineHeight: 1.6
spacing:
  xs: "0.375rem"
  sm: "0.5rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "5rem"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
  xl: "32px"
shadows:
  sm: "#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px"
  md: "rgba(0,0,0,0.05) 0px 4px 24px"
  lg: "rgba(0,0,0,0.08) 0px 8px 32px"
components:
  button-primary:
    background: "{colors.accent}"
    color: "{colors.ivory}"
    border: "1px solid {colors.accent}"
    radius: "{rounded.lg}"
    padding: "0.5rem 1rem"
  button-secondary:
    background: "{colors.warm-sand}"
    color: "{colors.charcoal-warm}"
    border: "1px solid {colors.ring-warm}"
    radius: "{rounded.md}"
    padding: "0.5rem 0.75rem"
  card:
    background: "{colors.ivory}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "1.5rem"
  input:
    background: "{colors.surface}"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "12px"
    padding: "0.1rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Claude (Anthropic)

## 1. Visual Theme & Atmosphere

Claude's interface is a literary salon reimagined as a product page — warm,
unhurried, and quietly intellectual. The entire experience is built on a
parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of
high-quality paper rather than a digital surface. Where most AI product pages
lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as
if the AI itself has good taste in interior design.

The signature move is the custom Anthropic Serif typeface — a medium-weight
serif with generous proportions that gives every headline the gravitas of a book
title. Combined with organic, hand-drawn-feeling illustrations in terracotta
(`#c96442`), black, and muted green, the visual language says "thoughtful
companion" rather than "powerful tool." The serif headlines breathe at
tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels
more like reading an essay than scanning a product page.

What makes Claude's design truly distinctive is its warm neutral palette. Every
gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are
no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`),
shadows use warm transparent blacks, and even the darkest surfaces (`#141413`,
`#30302e`) carry a barely perceptible olive warmth. This chromatic consistency
creates a space that feels lived-in and trustworthy.

**Key Characteristics:**

- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens
- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech
- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
- Organic, editorial illustrations replacing typical tech iconography
- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth
  without visible borders
- Magazine-like pacing with generous section spacing and serif-driven hierarchy

## 2. Color Palette & Roles

### Primary

- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme
  surface — not pure black but a warm, almost olive-tinted dark that's gentler
  on the eyes. The warmest "black" in any major tech brand.
- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown
  used for primary CTA buttons, brand moments, and the signature accent.
  Deliberately earthy and un-tech.
- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color
  used for text accents, links on dark surfaces, and secondary emphasis.

### Secondary & Accent

- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious
  without being alarming.
- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only
  cool color in the entire system, used purely for accessibility.

### Surface & Background

- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a
  yellow-green tint that feels like aged paper. The emotional foundation of the
  entire design.
- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated
  containers on the Parchment background. Barely distinguishable but creates
  subtle layering.
- **Pure White** (`#ffffff`): Reserved for specific button surfaces and
  maximum-contrast elements.
- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive
  surfaces — a noticeably warm light gray.
- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated
  dark elements — warm charcoal.
- **Deep Dark** (`#141413`): Dark-theme page background and primary dark
  surface.

### Neutrals & Text

- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to
  dark-on-light text.
- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm
  medium-dark gray.
- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized
  metadata.
- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.
- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted
  light gray.

### Semantic & Accent

- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible
  warm cream, creating the gentlest possible containment.
- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and
  emphasized containment on light surfaces.
- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the
  warm tone.
- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.
- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive
  surfaces.
- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.

### Gradient System

- Claude's design is **gradient-free** in the traditional sense. Depth and
  visual richness come from the interplay of warm surface tones, organic
  illustrations, and light/dark section alternation. The warm palette itself
  creates a "gradient" effect as the eye moves through cream → sand → stone →
  charcoal → black sections.

## 3. Typography Rules

### Font Family

- **Headline**: `Anthropic Serif`, with fallback: `Georgia`
- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`
- **Code**: `Anthropic Mono`, with fallback: `Arial`

_Note: These are custom typefaces. For external implementations, Georgia serves
as the serif substitute and system-ui/Inter as the sans substitute._

### Hierarchy

| Role              | Font            | Size                | Weight  | Line Height    | Letter Spacing | Notes                                |
| ----------------- | --------------- | ------------------- | ------- | -------------- | -------------- | ------------------------------------ |
| Display / Hero    | Anthropic Serif | 64px (4rem)         | 500     | 1.10 (tight)   | normal         | Maximum impact, book-title presence  |
| Section Heading   | Anthropic Serif | 52px (3.25rem)      | 500     | 1.20 (tight)   | normal         | Feature section anchors              |
| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500     | 1.30           | normal         | Secondary section markers            |
| Sub-heading       | Anthropic Serif | 32px (2rem)         | 500     | 1.10 (tight)   | normal         | Card titles, feature names           |
| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500     | 1.20           | normal         | Smaller section titles               |
| Feature Title     | Anthropic Serif | 20.8px (1.3rem)     | 500     | 1.20           | normal         | Small feature headings               |
| Body Serif        | Anthropic Serif | 17px (1.06rem)      | 400     | 1.60 (relaxed) | normal         | Serif body text (editorial passages) |
| Body Large        | Anthropic Sans  | 20px (1.25rem)      | 400     | 1.60 (relaxed) | normal         | Intro paragraphs                     |
| Body / Nav        | Anthropic Sans  | 17px (1.06rem)      | 400–500 | 1.00–1.60      | normal         | Navigation links, UI text            |
| Body Standard     | Anthropic Sans  | 16px (1rem)         | 400–500 | 1.25–1.60      | normal         | Standard body, button text           |
| Body Small        | Anthropic Sans  | 15px (0.94rem)      | 400–500 | 1.00–1.60      | normal         | Compact body text                    |
| Caption           | Anthropic Sans  | 14px (0.88rem)      | 400     | 1.43           | normal         | Metadata, descriptions               |
| Label             | Anthropic Sans  | 12px (0.75rem)      | 400–500 | 1.25–1.60      | 0.12px         | Badges, small labels                 |
| Overline          | Anthropic Sans  | 10px (0.63rem)      | 400     | 1.60           | 0.5px          | Uppercase overline labels            |
| Micro             | Anthropic Sans  | 9.6px (0.6rem)      | 400     | 1.60           | 0.096px        | Smallest text                        |
| Code              | Anthropic Mono  | 15px (0.94rem)      | 400     | 1.60           | -0.32px        | Inline code, terminal                |

### Principles

- **Serif for authority, sans for utility**: Anthropic Serif carries all
  headline content with medium weight (500), giving every heading the gravitas
  of a published title. Anthropic Sans handles all functional UI text — buttons,
  labels, navigation — with quiet efficiency.
- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no
  bold, no light. This creates a consistent "voice" across all headline sizes,
  as if the same author wrote every heading.
- **Relaxed body line-height**: Most body text uses 1.60 line-height —
  significantly more generous than typical tech sites (1.4–1.5). This creates a
  reading experience closer to a book than a dashboard.
- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings
  are tight but never claustrophobic. The serif letterforms need breathing room
  that sans-serif fonts don't.
- **Micro letter-spacing on labels**: Small sans text (12px and below) uses
  deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny
  sizes.

## 4. Component Stylings

### Buttons

**Warm Sand (Secondary)**

- Background: Warm Sand (`#e8e6dc`)
- Text: Charcoal Warm (`#4d4c48`)
- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
- Radius: comfortably rounded (8px)
- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
- The workhorse button — warm, unassuming, clearly interactive

**White Surface**

- Background: Pure White (`#ffffff`)
- Text: Anthropic Near Black (`#141413`)
- Padding: 8px 16px 8px 12px
- Radius: generously rounded (12px)
- Hover: shifts to secondary background color
- Clean, elevated button for light surfaces

**Dark Charcoal**

- Background: Dark Surface (`#30302e`)
- Text: Ivory (`#faf9f5`)
- Padding: 0px 12px 0px 8px
- Radius: comfortably rounded (8px)
- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
- The inverted variant for dark-on-light emphasis

**Brand Terracotta**

- Background: Terracotta Brand (`#c96442`)
- Text: Ivory (`#faf9f5`)
- Radius: 8–12px
- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
- The primary CTA — the only button with chromatic color

**Dark Primary**

- Background: Anthropic Near Black (`#141413`)
- Text: Warm Silver (`#b0aea5`)
- Padding: 9.6px 16.8px
- Radius: generously rounded (12px)
- Border: thin solid Dark Surface (`1px solid #30302e`)
- Used on dark theme surfaces

### Cards & Containers

- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces;
  Dark Surface (`#30302e`) on dark
- Border: thin solid Border Cream (`1px solid #f0eee6`) on light;
  `1px solid #30302e` on dark
- Radius: comfortably rounded (8px) for standard cards; generously rounded
  (16px) for featured; very rounded (32px) for hero containers and embedded
  media
- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content
- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states
- Section borders: `1px 0px 0px` (top-only) for list item separators

### Inputs & Forms

- Text: Anthropic Near Black (`#141413`)
- Padding: 1.6px 12px (very compact vertical)
- Border: standard warm borders
- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color
  moment
- Radius: generously rounded (12px)

### Navigation

- Sticky top nav with warm background
- Logo: Claude wordmark in Anthropic Near Black
- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm
  (`#3d3d3a`)
- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)
- CTA: Terracotta Brand button or White Surface button
- Hover: text shifts to foreground-primary, no decoration

### Image Treatment

- Product screenshots showing the Claude chat interface
- Generous border-radius on media (16–32px)
- Embedded video players with rounded corners
- Dark UI screenshots provide contrast against warm light canvas
- Organic, hand-drawn illustrations for conceptual sections

### Distinctive Components

**Model Comparison Cards**

- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
- Each model gets a bordered card with name, description, and capability badges
- Border Warm (`#e8e6dc`) separation between items

**Organic Illustrations**

- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
- Abstract, conceptual rather than literal product diagrams
- The primary visual personality — no other AI company uses this style

**Dark/Light Section Alternation**

- The page alternates between Parchment light and Near Black dark sections
- Creates a reading rhythm like chapters in a book
- Each section feels like a distinct environment

## 5. Layout Principles

### Spacing System

- Base unit: 8px
- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
- Card internal padding: approximately 24–32px
- Section vertical spacing: generous (estimated 80–120px between major sections)

### Grid & Container

- Max container width: approximately 1200px, centered
- Hero: centered with editorial layout
- Feature sections: single-column or 2–3 column card grids
- Model comparison: clean 3-column grid
- Full-width dark sections breaking the container for emphasis

### Whitespace Philosophy

- **Editorial pacing**: Each section breathes like a magazine spread — generous
  top/bottom margins create natural reading pauses.
- **Serif-driven rhythm**: The serif headings establish a literary cadence that
  demands more whitespace than sans-serif designs.
- **Content island approach**: Sections alternate between light and dark
  environments, creating distinct "rooms" for each message.

### Border Radius Scale

- Sharp (4px): Minimal inline elements
- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements
- Comfortably rounded (8–8.5px): Standard buttons, cards, containers
- Generously rounded (12px): Primary buttons, input fields, nav elements
- Very rounded (16px): Featured containers, video players, tab lists
- Highly rounded (24px): Tag-like elements, highlighted containers
- Maximum rounded (32px): Hero containers, embedded media, large cards

## 6. Depth & Elevation

| Level               | Treatment                                                 | Use                                         |
| ------------------- | --------------------------------------------------------- | ------------------------------------------- |
| Flat (Level 0)      | No shadow, no border                                      | Parchment background, inline text           |
| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections                    |
| Ring (Level 2)      | `0px 0px 0px 1px` ring shadows using warm grays           | Interactive cards, buttons, hover states    |
| Whisper (Level 3)   | `rgba(0,0,0,0.05) 0px 4px 24px`                           | Elevated feature cards, product screenshots |
| Inset (Level 4)     | `inset 0px 0px 0px 1px` at 15% opacity                    | Active/pressed button states                |

**Shadow Philosophy**: Claude communicates depth through **warm-toned ring
shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px`
pattern creates a border-like halo that's softer than an actual border — it's a
shadow pretending to be a border, or a border that's technically a shadow. When
drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) —
barely visible lifts that suggest floating rather than casting.

### Decorative Depth

- **Light/Dark alternation**: The most dramatic depth effect comes from
  alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections
  — entire sections shift elevation by changing the ambient light level.
- **Warm ring halos**: Button and card interactions use ring shadows that match
  the warm palette — never cool-toned or generic gray.

## 7. Do's and Don'ts

### Do

- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream
  tone IS the Claude personality
- Use Anthropic Serif at weight 500 for all headlines — the single-weight
  consistency is intentional
- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal
  brand moments
- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone
- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of
  drop shadows
- Maintain the editorial serif/sans hierarchy — serif for content headlines,
  sans for UI
- Use generous body line-height (1.60) for a literary reading experience
- Alternate between light and dark sections to create chapter-like page rhythm
- Apply generous border-radius (12–32px) for a soft, approachable feel

### Don't

- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned
- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling
  for serifs
- Don't introduce saturated colors beyond Terracotta — the palette is
  deliberately muted
- Don't use sharp corners (< 6px radius) on buttons or cards — softness is core
  to the identity
- Don't apply heavy drop shadows — depth comes from ring shadows and background
  color shifts
- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`)
  or Ivory (`#faf9f5`) are always warmer
- Don't use geometric/tech-style illustrations — Claude's illustrations are
  organic and hand-drawn-feeling
- Don't reduce body line-height below 1.40 — the generous spacing supports the
  editorial personality
- Don't use monospace fonts for non-code content — Anthropic Mono is strictly
  for code
- Don't mix in sans-serif for headlines — the serif/sans split is the
  typographic identity

## 8. Responsive Behavior

### Breakpoints

| Name         | Width     | Key Changes                                                            |
| ------------ | --------- | ---------------------------------------------------------------------- |
| Small Mobile | <479px    | Minimum layout, stacked everything, compact typography                 |
| Mobile       | 479–640px | Single column, hamburger nav, reduced heading sizes                    |
| Large Mobile | 640–767px | Slightly wider content area                                            |
| Tablet       | 768–991px | 2-column grids begin, condensed nav                                    |
| Desktop      | 992px+    | Full multi-column layout, expanded nav, maximum hero typography (64px) |

### Touch Targets

- Buttons use generous padding (8–16px vertical minimum)
- Navigation links adequately spaced for thumb navigation
- Card surfaces serve as large touch targets
- Minimum recommended: 44x44px

### Collapsing Strategy

- **Navigation**: Full horizontal nav collapses to hamburger on mobile
- **Feature sections**: Multi-column → stacked single column
- **Hero text**: 64px → 36px → ~25px progressive scaling
- **Model cards**: 3-column → stacked vertical
- **Section padding**: Reduces proportionally but maintains editorial rhythm
- **Illustrations**: Scale proportionally, maintain aspect ratios

### Image Behavior

- Product screenshots scale proportionally within rounded containers
- Illustrations maintain quality at all sizes
- Video embeds maintain 16:9 aspect ratio with rounded corners
- No art direction changes between breakpoints

## 9. Agent Prompt Guide

### Quick Color Reference

- Brand CTA: "Terracotta Brand (#c96442)"
- Page Background: "Parchment (#f5f4ed)"
- Card Surface: "Ivory (#faf9f5)"
- Primary Text: "Anthropic Near Black (#141413)"
- Secondary Text: "Olive Gray (#5e5d59)"
- Tertiary Text: "Stone Gray (#87867f)"
- Borders (light): "Border Cream (#f0eee6)"
- Dark Surface: "Dark Surface (#30302e)"

### Example Component Prompts

- "Create a hero section on Parchment (#f5f4ed) with a headline at 64px
  Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black
  (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans
  with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with
  Ivory text, 12px radius."
- "Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream
  (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic
  Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px
  Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px)."
- "Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5)
  headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5)
  for body text. Borders in Dark Surface (#30302e)."
- "Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px
  radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px
  8px."
- "Design a model comparison grid with three cards on Ivory surfaces. Each card
  gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at
  25px, and description in Olive Gray at 15px Anthropic Sans."

### Iteration Guide

1. Focus on ONE component at a time
2. Reference specific color names — "use Olive Gray (#5e5d59)" not "make it
   gray"
3. Always specify warm-toned variants — no cool grays
4. Describe serif vs sans usage explicitly — "Anthropic Serif for the heading,
   Anthropic Sans for the label"
5. For shadows, use "ring shadow (0px 0px 0px 1px)" or "whisper shadow" — never
   generic "drop shadow"
6. Specify the warm background — "on Parchment (#f5f4ed)" or "on Near Black
   (#141413)"
7. Keep illustrations organic and conceptual — describe "hand-drawn-feeling"
   style