---
name: Claude
description: "Worth including as a masterclass in restrained, premium AI product design that uses traditional typography in a modern web context."
version: alpha

colors:
  background: "#FAF9F5"
  primary: "#141413"
  secondary: "#30302E"
  neutral: "#87867F"
  bg-soft: "#E8E6DC"
  line: "rgba(209,207,197,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.02em"
  heading:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.01em"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A refined, serif-led AI interface that balances premium restraint with warm, human-centric aesthetics.

*A highly sophisticated AI assistant that blends academic rigor with modern, approachable design.*

## Colors

Warm monochrome palette relying on off-white backgrounds and deep charcoal text, using subtle warm grays for borders and muted elements.

- **Background (`#FAF9F5`)** — uses `bg` token
- **Primary text (`#141413`)** — uses `ink` token
- **Secondary text (`#30302E`)** — uses `ink-soft` token
- **Muted (`#87867F`)** — uses `muted` token
- **Borders (`rgba(209,207,197,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

- Use transitional-serif for all major headlines and display text.
- Use humanist-sans for all body copy, navigation, and UI components.
- Keep body font weight consistently at 400 to maintain a calm, readable rhythm.

## Layout

A clean, centered 12-column grid with generous gutters and distinct content blocks.

*Rhythm:* Clean, generous spacing with a consistent 4px base grid and ample vertical padding in containers.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 4px 16px 0px
- rgba(209, 207, 197, 1.0) 0px 0px 0px 1px
- Borders: Thin 1px borders using a warm neutral gray (rgba(209, 207, 197, 1.0)).

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid black or white buttons with rounded corners (4px-8px radius) and simple sans-serif labels.
- **card:** Cards with subtle 1px warm-gray borders, generous padding, and soft rounded corners (12px).
- **chip:** Simple checkmarks with text labels for feature lists.
- **input:** Clean, borderless or subtly bordered inputs focused on readability.
- **hero:** A split layout with large serif headlines on the left and illustrative UI mockups on the right.

## Do's and Don'ts

**Don't:**
- Don't use bright, neon, or high-saturation accent colors — the palette is warm and monochrome.
- Don't use heavy, blocky sans-serifs for headlines — the display font is a refined transitional-serif.
- Don't use tight, dense layouts with small padding — the design prioritizes ample white space.
- Don't use harsh, pure black (#000000) and pure white (#FFFFFF) — the palette uses warm off-whites (#FAF9F5) and deep charcoals (#141413).
- Don't use aggressive, springy, or complex easing curves — transitions are smooth and subtle.
- Don't use rounded pill-shaped buttons everywhere — standard rounded rectangles (4px-8px) are the default for primary actions.

---

## System Prompt (paste into AI agent)

```
You are a senior visual systems analyst describing a premium AI product website. The site is positioned as a calm, capable, and highly refined AI assistant. Use a warm monochrome palette anchored by off-white (#FAF9F5) backgrounds and deep charcoal (#141413) text, avoiding any bright accent colors. Typography relies on a transitional-serif for display and a humanist-sans for body text. Layout is centered on a 12-column grid with generous gutters and ample white space. Critical constraints: Do not invent high-chroma colors. Do not use blocky sans-serifs for headlines. Do not create dense or cluttered layouts. Keep the voice professional, intelligent, and remarkably calm, prioritizing clarity and restraint over flashy visuals.
```