This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Anthropic’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Warm-minimal, serif-forward calm on cream. The canvas is ivory (#faf9f5) layered with two slightly deeper creams (#f0eee6, #e8e6dc) for tonal depth; near-black warm slate (#141413) carries text. A reading serif — "Anthropic Serif" — is the voice for both display and body, with "Anthropic Sans" reserved for UI labels and detail text and "Anthropic Mono" for code. Structure comes from 1px hairline dividers (#1414131a) and background-tone shifts, not from shadow or chrome. A single clay accent (#d97757) does all emphasis, used like a wax seal — punctuation, never fill. Generous, fluid section rhythm keeps the page unhurried at every width. Restraint and warmth over spectacle.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the warm-minimal palette (cream-first backgrounds #faf9f5 / #f0eee6 / #e8e6dc, warm near-black text #141413, a single clay accent #d97757 used sparingly), the serif-forward typographic voice ("Anthropic Serif" or a humanist reading serif for display + body, a clean sans for UI labels and detail text, a mono for code), the hairline-first structure (1px #1414131a dividers and tonal background shifts instead of drop shadows), the soft radius scale (4 / 8 / 16px), the fluid generous spacing rhythm, and the calm GSAP-style motion (0.2s ease for state changes, ~0.8s cubic-bezier(0.16, 1, 0.3, 1) for scroll reveals) across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Layout
Editorial
Content width
Bounded
Framing
Flat
Grid strength
Soft
Warm-minimal earth palette. A cream stack — #faf9f5 (ivory-light, body) → #f0eee6 (ivory-medium, secondary) → #e8e6dc (ivory-dark, hover/tertiary) — does nearly all surface work, with warm near-black slate #141413 for text (descending through #3d3d3a and #5e5d59 for de-emphasis). A single clay accent #d97757 carries every emphasis moment; supporting earth tones (oat #e3dacc, kraft #d4a27f, manilla #ebdbbc, olive #788c5d) appear only as occasional swatch fills, never as primary UI color.
Mode strategysingle
Cream background stack #faf9f5 (body) / #f0eee6 (secondary sections) / #e8e6dc (hover + tertiary) — three near-identical tones create depth without any shadow
Warm near-black text #141413 (the #1 measured surface color, 873 occurrences) on cream — descend to #3d3d3a and #5e5d59 for secondary and muted text
Single clay accent #d97757 (--swatch--clay) for emphasis and key calls-to-action; darker clay #c6613f (--swatch--accent) for the pressed/active variant — keep total accent surface under ~5%
Hairline dividers and borders use slate-faded #1414131a (10% slate) — never a solid heavy line
Cloud neutrals #d1cfc5 / #b0aea5 / #87867f for borders, captions, and disabled states; warm earth swatches (oat / kraft / manilla / olive) reserved for decorative tags and illustration fills only
Buttons are primary-dark by default: #141413 background, #faf9f5 text, hover lightening to slate-medium #3d3d3a
Primary family: "Anthropic Serif" (humanist reading serif, fallback Georgia, serif). This is the VOICE — it sets both display headings and paragraph body text. CSS var: --_typography---font--paragraph-text and --_typography---font--display-serif-family.
UI family: "Anthropic Sans" (fallback Arial, sans-serif) for detail text, UI labels, eyebrows, nav, and dense controls — anywhere the serif would be too literary.
All families are variable, weight axis 300–800. Use weight ladder 400 (serif body + regular) / 500 (medium UI emphasis) / 600 (semibold headings + serif emphasis) / 700 (bold sans display only). Do not stray outside this ladder.
Line-height ladder: 1 / 1.05 / 1.1 (tight display) → 1.3 (subheads) → 1.4 (paragraph default) → 1.5 (long-form). Letter-spacing is near-neutral: 0em default, -0.005em and -0.02em only for large display optical correction.
Text uses cap/baseline trim (text-box trim) — serif trim-top .48em / trim-bottom .3em, sans trim-top .34em / trim-bottom .4em — so type sits optically centered. Honor it when porting to a trim-capable stack.
Paragraph measure 60–72ch at the 1.25rem serif body — long, calm reading lines, not dense UI columns.
Base unit 4px (0.25rem). Core scale (px): 2 / 4 / 8 / 12 / 16 / 22 / 24 / 28 / 32 / 48 — with 8 and 32 as the dominant rhythm beats.
rem spacing tokens: space-1 .25rem / space-2 .5rem / space-3 .75rem / space-4 1rem / space-5 1.5rem / space-6 ~2rem(fluid) / space-7 ~2.5rem(fluid) / space-8 ~3rem(fluid) / space-9 ~4rem(fluid). Gaps clamp with the viewport — they grow on wide screens.
Section vertical rhythm is fluid and generous: section-space--small clamp(2.5–4rem), --medium clamp(3.5–6rem), --main clamp(5.5–10rem), --large clamp(7–14rem), --page-top clamp(6–12rem). Let sections breathe; never use a fixed 64px everywhere.
Container max-width 89.5rem (≈1432px) via --site--width; outer site margin is fluid clamp(2rem, …, 5rem). Narrow content rails: container-small 56.25rem, plus measured clusters at 432 / 500 / 1272 px.
Layout is a 12-column grid (--site--column-count: 12) with a fluid gutter clamp(1.75rem, …, 2rem). Flex/grid gaps draw from 8 / 12 / 16 / 32 / 48 px.
Card / control padding draws from the scale: 16–24px on desktop, 12–16px on mobile. No magic numbers — always pick a scale value.
Surface styleFlat
Default to NO shadow. Structure comes from 1px hairline borders (#1414131a) and tonal background shifts between the three cream tones (#faf9f5 → #f0eee6 → #e8e6dc).
The single captured shadow (shadow-xs) is extremely soft and layered — three stacked shadows at 0.01 / 0.02 / 0.04 alpha. Use it only for genuinely floating surfaces (a popover, a lifted card), never for static page structure.
Cards sit on plain white (#ffffff) or ivory against the cream body, delimited by a hairline border rather than elevation.
Hover deepens a border or shifts the background one cream step — it does not bloom a shadow.
Focus is a ring offset (focus width .125rem, offset-outer .25rem, inner -.125rem) in the text/accent color — not a glow.
Techniques
Hairline divider + tonal shift as structure
Delimit sections and cards with `border: 1px solid #1414131a` (the slate-faded-10 token) and/or by stepping the background from #faf9f5 to #f0eee6 to #e8e6dc. This pair does all the spatial work that shadows do elsewhere — the page stays flat, warm, and calm.
Whisper-soft layered shadow for true float only
When a surface must genuinely float (popover, toast, lifted media), apply `box-shadow: rgba(0,0,0,0.01) 0 2px 2px, rgba(0,0,0,0.02) 0 4px 4px, rgba(0,0,0,0.04) 0 16px 24px`. Note the sub-5% alphas — it reads as a faint settling on paper, never a hard drop.
Hovercolor shift (0.2s ease) — the single most common transition (215+ occurrences), background + border-color shift (0.2s / 0.3s ease) on buttons and cards, text-decoration-color fade (0.2s ease) on inline links, opacity fade (0.1s ease) on quick state changes
Scroll patterns
Intersection-triggered opacity + transform reveals at ~0.8s on cubic-bezier(0.16, 1, 0.3, 1) — the signature slow, settling entrance
Occasional opacity reveals at 0.4s on cubic-bezier(0.77, 0, 0.175, 1) for slower atmospheric beats
Stagger 60–120ms between grouped items — unhurried, never snappy
No parallax beyond gentle translateY; motion is calm, never theatrical
Default interactive easing is the CSS keyword `ease` at 0.2s — this carries the vast majority of color/background/border transitions (the page's quiet baseline).
Scroll-reveal signature is cubic-bezier(0.16, 1, 0.3, 1) at ~0.8s — a long ease-out that makes content settle onto the cream like ink drying. Reserve it for entrance reveals.
Supporting easing cubic-bezier(0.77, 0, 0.175, 1) at 0.4s for slower atmospheric transitions only.
Five captured durations: 0.1 / 0.2 / 0.3 / 0.4 / 0.8 s. Most interaction sits on 0.2s; 0.8s is reserved for reveals.
GSAP is the observed animation library (window.gsap). When porting to React, Framer Motion with matching cubic-beziers reproduces the feel.
useReducedMotion / prefers-reduced-motion mandatory — all reveals collapse to opacity-only or disable (the source ships a prefers-reduced-motion query).
No springs, no loop animations except explicit loaders. Calm and deterministic over playful.
Primary CTA is the dark slate button; the clay accent button is reserved for the single most important conversion moment per view.
Navigation is a calm top bar (4.25rem height) with hover dropdowns at 200ms — restrained, not animated-heavy.
Accordion: single-open for FAQ; multi-open only for deep documentation. Hairline divider between rows, no card chrome.
Tooltips reveal on hover + focus; dismiss instantly on blur. Body copy in serif, labels in sans.
Modals for confirmations; mobile menu slides at 400ms (--nav--menu-open-duration). Never nested modals.
Form validation inline below the field on blur; error text in slate, never color-only — pair with an icon or text.
Empty + loading states stay quiet: a one-line serif sentence, a sans label, optional thin spinner. No illustrations unless they're the warm earth-tone brand spots.
Approachdesktop-first
Desktop-first editorial layout that compresses gracefully. The container caps at 89.5rem (≈1432px) and the whole spacing system is fluid (clamp-based), so the page genuinely reflows rather than snapping between fixed layouts — wide screens breathe, narrow screens compress, and the calm survives both. Mobile is the same page reflowed into a single column, never a separate hamburger-revealed architecture.
Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard ladder. Source also targets max-width 991 / 767 / 479 for legacy Webflow tiers.
Spacing and type are clamp-fluid — display-xl scales 2.5→4rem, section-space--main scales 5.5→10rem — so nothing needs hard per-breakpoint overrides.
Hide-on-mobile is discouraged — reflow the 12-column grid to a single column rather than dropping controls.
Tap targets minimum 44×44 on touch, 40×40 on pointer.
Color contrast: #141413 text on #faf9f5 cream ≈ 16:1 (AAA). Muted #5e5d59 on #faf9f5 ≈ 6:1 (AA). Clay #d97757 on #faf9f5 is decorative/large-text only — pair with #141413 text, never use clay for small body copy.
Clay accent must never be the sole signifier — always pair with text or weight, since the warm orange does not carry sufficient small-text contrast.
focus-visible: ring in text/accent color with the captured offsets (width .125rem, outer offset .25rem). Mandatory on every interactive element; never rely on hover.
All interactive elements keyboard-reachable in logical reading order via Tab → Enter.
ARIA: labels on icon-only buttons; aria-expanded on accordions and nav dropdowns; aria-live='polite' on toasts and status.
Motion respects prefers-reduced-motion — the 0.8s reveals collapse to opacity-only or disable.
Serif body must stay ≥1rem (the source paragraph body is 1.25rem) — never shrink the reading serif below comfortable measure.
Form errors announced via aria-describedby on the input; never color-only signaling.
GSAPFramer MotionNext/ImageLucide
GSAP is the observed motion library (window.gsap), driving the calm 0.8s cubic-bezier(0.16, 1, 0.3, 1) scroll reveals. The page is css-only for font strategy (Anthropic Serif/Sans/Mono variable woff2, font-display: swap). Imagery is sparse and editorial; icons are stroke-based at 1.5–2px. When rebuilding in React, Framer Motion reproduces the motion profile with matching cubic-beziers.
Variable fonts self-hosted as woff2 with font-display: swap — Anthropic Serif (300–800) for voice, Anthropic Sans for UI, Anthropic Mono for code
Framer Motion `whileInView` with `viewport={{ once: true, margin: '-10%' }}`, `ease: [0.16, 1, 0.3, 1]`, `duration: 0.8` for the signature reveal
useReducedMotion guard wraps every reveal — no exceptions
Next/Image with `sizes` always set; `priority` only on the LCP hero
Hairline dividers as 1px borders or thin SVG rules — no canvas/WebGL/Lottie; static-first, animated-discreet
Lead with the reading serif for headings and body; demote the sans to UI labels and detail text.
Structure with 1px hairline dividers (#1414131a) and the three-step cream background ladder (#faf9f5 / #f0eee6 / #e8e6dc) before reaching for any shadow.
Keep the clay accent (#d97757) under ~5% of surface — use it like a wax seal, one emphasis per view.
Let sections breathe with the fluid clamp-based spacing — wide screens should feel more spacious, not just wider.
Default interactive motion to 0.2s ease; reserve the 0.8s cubic-bezier(0.16, 1, 0.3, 1) for scroll reveals only.
Use the soft radius scale 4 / 8 / 16px and stroke icons at 1.5–2px to keep everything quiet.
Pass every page through prefers-reduced-motion before shipping.
Never introduce a second saturated accent — the single clay note is the entire emphasis system; a second color shatters the wax-seal effect.
Never use the clay accent for small body text — it lacks small-text contrast on cream; keep it for large display, fills, and key CTAs paired with dark text.
Never reach for a drop shadow as page structure — use hairline borders and the cream-tone ladder. The soft shadow-xs is for true float only.
Never substitute a generic serif/sans pairing and expect the same authority — the coherent custom serif/sans/mono trio is most of the brand.
Never coarsen the type voice into all-sans — replacing the reading serif with Inter-everywhere erases the editorial calm entirely.
Never use fixed per-breakpoint spacing where a clamp belongs — the fluid rhythm is what keeps the page unhurried at every width.
Never invent durations outside {0.1, 0.2, 0.3, 0.4, 0.8}s or easings beyond {ease, cubic-bezier(0.16,1,0.3,1), cubic-bezier(0.77,0,0.175,1), ease-in}; no springs.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Type: serif-forward — Anthropic Serif (or a humanist reading serif) for display + body, a clean sans for UI/detail, a mono for code. Variable 300–800; weight ladder 400 / 500 / 600 / 700.
Spacing base 4px; fluid clamp-based section rhythm; container max 89.5rem (≈1432px); 12-column grid, fluid gutter ~1.75–2rem.
Elevation flat — hairline + tonal shift first; soft layered shadow-xs (≤4% alpha) only for true float.
Motion: five durations (0.1 / 0.2 / 0.3 / 0.4 / 0.8 s), four easings (ease, cubic-bezier(0.16,1,0.3,1), cubic-bezier(0.77,0,0.175,1), ease-in). No springs, no loops except loaders.
Palette grep: backgrounds resolve to #faf9f5 / #f0eee6 / #e8e6dc; text to #141413 / #3d3d3a / #5e5d59; the only saturated accent present is #d97757 / #c6613f.
Accent audit: clay surface area stays under ~5% of the page; clay never used for small body text.
Typography grep: display + body headings render in the serif family; sans appears only on UI labels and detail text; weights drawn from {400, 500, 600, 700}.
Container width: no page exceeds 89.5rem (≈1432px).
Spacing grep: section rhythm uses clamp-based fluid values (not fixed 64px everywhere); discrete gaps draw from the 4/8/12/16/22/24/28/32/48 scale.
Radius grep: only 4 / 8 / 16px (and round pills) appear — no intermediate radii.
Shadow audit: page structure uses 1px #1414131a hairlines and cream-tone shifts; any drop shadow is the ≤4%-alpha layered shadow-xs, used only on floating surfaces.
Transition grep: durations draw from {0.1, 0.2, 0.3, 0.4, 0.8}s; easings from {ease, cubic-bezier(0.16,1,0.3,1), cubic-bezier(0.77,0,0.175,1), ease-in}; 0.8s reserved for scroll reveals.
Contrast audit: body text on cream ≥ 4.5:1 (WCAG AA); serif body stays ≥1rem.
Motion audit: prefers-reduced-motion collapses every 0.8s reveal to opacity-only or disabled.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 14 nodes across 7 levels, shallow to deep by color.
body2
div
Main4
div1
divbanner1
div1
Navnavigation
Header
Section (×2)
Footer1
div1
Nav1
div1
Section (×4)
Accessibility
Contrast matrix
26 combinations - 16 pass AA - 12 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox19.93
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FAF9F5
bg
#000000
APCA Lc
-104
Use
background on foreground
AaThe quick brown fox19.93
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FAF9F5
APCA Lc
+102
Use
foreground on background
AaThe quick brown fox17.50
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#141413
bg
#FAF9F5
APCA Lc
+101
Use
foreground on background
AaThe quick brown fox17.50
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FAF9F5
bg
#141413
APCA Lc
-103
Use
background on foreground
AaThe quick brown fox9.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#EDA100
APCA Lc
+62
Use
foreground on accent
AaThe quick brown fox9.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EDA100
bg
#000000
APCA Lc
-60
Use
accent on foreground
AaThe quick brown fox9.44
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#B0AEA5
bg
#000000
APCA Lc
-58
Use
neutral on foreground
AaThe quick brown fox9.44
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#B0AEA5
APCA Lc
+60
Use
foreground on neutral
AaThe quick brown fox8.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
