Terracotta design skill for AI agents

Overview

Terracotta is a sun-baked, clay-toned editorial design system skill file that instructs AI coding assistants to generate interfaces that feel warm, literary, grounded, and content-first. Its aesthetic is built on warm cream surfaces, ink-brown serif headlines, a single terracotta accent, generous reading rhythm, and restrained editorial composition.

Where many modern systems prioritize dashboards, dense app chrome, or colorful conversion blocks, Terracotta is tuned for long-form reading, storytelling, essays, blogs, publishing, documentation, cultural projects, hospitality, lifestyle brands, and thoughtful product narratives. It should feel like a carefully designed independent magazine printed on warm stock: earthy, human, calm, and highly readable.

When you feed this skill file to an AI assistant, every generated component — articles, cards, buttons, forms, navigation, modals, newsletters, author bios, footnotes, pull quotes, story pages, blog indexes, and editorial landing pages — should inherit the Terracotta visual posture: warm cream canvas, serif-led hierarchy, clay accent marks, measured spacing, subtle editorial dividers, and accessibility-first reading behavior.

The result is a UI system that feels sunlit, tactile, intelligent, and welcoming without becoming rustic, muddy, or overly decorative.

Design Tokens

Color Palette

Terracotta uses a warm, earthy palette centered on cream, clay, ink, and white. The palette should feel editorial and natural, not artificially saturated.

The most important visual relationship is between warm cream, ink-brown typography, and terracotta accent. Terracotta should not feel like a generic beige UI. It should feel editorial, sun-baked, and deliberate.

The primary terracotta color #C56A3C should be used sparingly. It is the single accent color, not a broad decorative palette. It should mark action, emphasis, selection, and editorial punctuation.

The secondary cream color #F3E9D8 should be the dominant page background. Pure white should be reserved for foreground cards, form controls, modals, and areas where extra contrast is needed.

Recommended Editorial Semantic Tokens

The base token set provides the required palette, but Terracotta benefits from additional semantic aliases for editorial use.

Use these semantic roles instead of scattering raw values through the codebase. Terracotta should feel warm and natural, but the implementation should remain systematic.

Color Usage Principles

Terracotta color usage follows five rules:

1. Cream is the page — use secondary as the dominant background.
2. Ink-brown carries editorial weight — headings, titles, pull quotes, and major typography should feel warm and grounded.
3. Terracotta is the only accent — use primary for actions, links, highlights, and selected states.
4. White is a utility surface — use surface for cards and forms, not as the dominant canvas.
5. Semantic colors remain semantic — success, warning, and danger communicate real state only.

Do not introduce extra accent palettes such as sage, mustard, lavender, or coral unless the product explicitly extends the system. Terracotta’s strength comes from restraint.

Typography

Terracotta uses DM Serif Display for both primary and display typography. The typeface gives the system its editorial personality: literary, warm, elegant, and expressive.

Font Families

DM Serif Display should be used confidently for headings and display moments. It gives Terracotta the feeling of a print magazine or literary publication.

Because DM Serif Display is expressive, body text needs careful treatment. Use generous line height, adequate size, and strong contrast. For long-form reading, favor 18px body text where possible and keep line lengths controlled.

JetBrains Mono should be reserved for code, structured metadata, issue numbers, reading time, timestamps, and technical details. Do not use monospace as a decorative substitute for editorial typography.

Type Scale

Terracotta uses a larger editorial type scale:

This scale is intentionally more editorial than compact product scales. Terracotta should feel comfortable for reading. Do not shrink body copy to dense dashboard sizes unless the component is clearly utility-oriented.

Weight

The foundation lists weights from 100 through 900, but DM Serif Display typically works best when used with restraint. The system should avoid excessive weight variation.

Recommended usage:

• 400 for body text, headings, and most editorial typography
• 500–600 only where the implementation font supports useful distinction
• 700 for strong labels or display emphasis when available
• 800–900 only for rare hero moments if rendering remains readable

If the font does not provide meaningful weight differences, use size, spacing, color, italics where appropriate, and editorial rules rather than forcing many weights.

Editorial Reading Rules

Terracotta is tuned for content, so reading quality is central.

Rules:

• Long-form body text should usually be 18px.
• Body line height should be generous, typically 1.55–1.75.
• Article line length should generally stay between 60 and 75 characters.
• Headings should use ink-brown or dark text, not low-contrast clay.
• Links should be visually distinct through terracotta color plus underline or weight.
• Pull quotes may use 32px or 40px, but should remain readable.
• Captions and metadata should not fall below 14px.
• Avoid long all-caps text in the display serif.

Example type setup:

:root {
  --font-primary: "DM Serif Display", serif;
  --font-mono: "JetBrains Mono", monospace;

  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 24px;
  --text-xl: 32px;
  --text-2xl: 40px;
}

Spacing

Terracotta uses a 4px-based spacing scale:

Spacing should feel calm and editorial. Terracotta should not feel cramped. It should give content room to breathe.

Use larger spacing around:

• Article titles
• Pull quotes
• Long-form paragraphs
• Feature cards
• Newsletter signup blocks
• Image captions
• Editorial dividers
• Author bios
• Section transitions

Avoid arbitrary spacing values. Editorial rhythm becomes inconsistent quickly when local spacing decisions are not tokenized.

The Terracotta Look

Terracotta has a specific editorial identity: warm, clay-toned, human, serif-led, and content-first.

Warm Cream Editorial Canvas

The page should live on the warm cream secondary background. This creates the sun-baked paper feeling.

Do:

• Use #F3E9D8 for full-page backgrounds.
• Let article and story sections share the same warm canvas.
• Use white cards only when a foreground object needs separation.
• Use terracotta as an accent, not a section-filling default.
• Use subtle editorial rules for structure.

Do not:

• Use pure white as the dominant full-page background.
• Use cold gray app shells.
• Alternate every section between unrelated colors.
• Use bright saturated accent palettes.
• Add glossy or futuristic effects.

The cream surface should make the interface feel grounded, readable, and tactile.

Ink-Brown Serif Hierarchy

Headlines should feel inked, not blackened. Terracotta’s editorial personality comes from warm, dark, serif typography.

Use ink-brown for:

• Article titles
• Hero headings
• Section headings
• Pull quotes
• Author names
• Editorial labels
• Important display moments

Avoid using terracotta for every heading. The clay accent should punctuate, while ink-brown should carry the reading hierarchy.

Single Terracotta Accent

The primary color #C56A3C is the only accent. It should appear as a deliberate mark.

Use terracotta for:

• Primary buttons
• Links
• Active navigation
• Selected tabs
• Quote marks
• Small dividers
• Editorial markers
• Highlighted metadata
• Focus-visible states
• Newsletter signup emphasis

Do not use terracotta for every icon, border, badge, and heading. It should feel like a clay stamp or editorial mark, not a wash of orange.

Editorial Rules and Dividers

Terracotta should use thin rules and dividers instead of heavy cards or shadows.

Recommended rule styles:

:root {
  --rule-thin: 1px solid var(--rule);
  --rule-strong: 2px solid var(--ink-brown);
}

Use rules for:

• Article separators
• Header/footer boundaries
• Card groups
• Metadata rows
• Pull quote framing
• Newsletter blocks
• Table divisions
• Sidebar section breaks

Avoid heavy box outlines unless the component needs strong containment.

Soft Earthy Geometry

Terracotta should feel modern and clean, but not sharp or sterile. Use gentle, controlled radius.

Recommended radius roles:

Do not use exaggerated pill shapes everywhere unless the product specifically needs a softer, more playful expression. Terracotta is warm, not bubbly.

Minimal Shadows

Terracotta should rely on surface contrast, spacing, typography, and rules rather than strong shadows.

Preferred separation methods:

• Warm cream background
• White foreground surface
• Ink-brown dividers
• Terracotta accent marks
• Spacing
• Typography
• Image placement

Use shadows sparingly and subtly if needed. Avoid heavy drop shadows, hard neobrutalist shadows, glassmorphism, neon glow, or glossy gradients.

Editorial Imagery

Terracotta works well with warm photography, clay-toned imagery, food, travel, interiors, craft, nature, architecture, and cultural storytelling.

Image rules:

• Use images to support the story, not decorate empty space.
• Prefer warm natural tones.
• Keep captions readable.
• Do not place text over busy images unless contrast is guaranteed.
• Use consistent image radius.
• Use editorial cropping.
• Avoid stock imagery that feels generic.
• Provide meaningful alt text when the image conveys content.

Images should feel like part of the publication, not banner ads.

Component Coverage

The Terracotta skill file should guide complete interface generation across editorial sites, blogs, long-form articles, magazines, newsletters, storytelling products, cultural brands, hospitality pages, and thoughtful product interfaces.

Buttons

Buttons should be warm, editorial, and direct. They should not feel like glossy app controls.

Button variants:

Primary button rules:

• Use terracotta primary as fill or strong accent.
• Use readable text with tested contrast.
• Use DM Serif Display or project-approved UI type at 16px or 18px.
• Use clear labels.
• Use moderate radius.
• Avoid strong shadows.
• Avoid gradients.
• Preserve clear hover, focus-visible, active, disabled, loading, and error states.
• Ensure touch targets are at least 44px high where possible.

Recommended button states:

Good button labels:

Avoid vague labels like Submit, Click here, or Go.

Links

Links should feel editorial and intentional.

Link rules:

• Use terracotta for link emphasis.
• Use underline for inline links.
• Use hover states that strengthen underline or color.
• Use visible focus-visible treatment.
• Do not rely on color alone.
• Keep labels specific.

Good examples:

Article Pages

Article pages are the core Terracotta use case.

Article rules:

• Use warm cream background.
• Use a clear article title at 40px where possible.
• Use ink-brown for headings.
• Use 18px body text with generous line height.
• Keep line length controlled.
• Use terracotta for links and editorial markers.
• Use readable byline and metadata.
• Use consistent image captions.
• Use pull quotes sparingly.
• Provide clear previous/next or related-story navigation.
• Avoid sidebars that crowd the reading column.

Recommended article anatomy:

1. Title
2. Dek or summary
3. Byline and metadata
4. Hero image or editorial visual
5. Body content
6. Pull quote or callout where useful
7. Footnotes or references if needed
8. Author bio
9. Related stories
10. Newsletter or follow-up action

Pull Quotes

Pull quotes should feel literary and intentional.

Pull quote rules:

• Use 32px or 40px type depending on layout.
• Use ink-brown or terracotta accent marks.
• Keep quote length short.
• Provide enough spacing above and below.
• Avoid oversized decorative quotation marks that dominate content.
• Ensure contrast passes.
• Do not use pull quotes so often that they interrupt reading.

Example style:

.pull-quote {
  color: var(--ink-brown);
  font-family: var(--font-primary);
  font-size: 32px;
  line-height: 1.2;
  border-left: 3px solid var(--clay);
  padding-left: 24px;
}

Cards

Cards should feel like editorial story blocks, not generic SaaS modules.

Card rules:

• Use white or slightly lighter paper foreground surfaces.
• Use subtle rule borders or no border when spacing is enough.
• Use moderate radius.
• Avoid heavy shadows.
• Use serif headings.
• Use terracotta for category labels, links, or small marks.
• Keep image ratios consistent in grids.
• Ensure long titles wrap cleanly.
• Interactive cards must use proper link or button semantics.

Card variants:

Story cards should prioritize title, summary, metadata, and image hierarchy over decorative effects.

Forms

Forms should feel calm, editorial, and trustworthy. They should not interrupt the reading experience with loud styling.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use 16px or 18px text.
• Controls should be at least 44px high where possible.
• Field groups should use spacing tokens.
• Error messages must be visually and programmatically associated with fields.
• Required fields must be indicated accessibly.
• Focus-visible states must be obvious.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.

Recommended input styling:

.input {
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 18px;
  min-height: 44px;
}

.input:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-color: var(--clay);
}

For newsletter forms, keep the field and action visually simple. The copy and trust cues matter more than decoration.

Navigation

Navigation should be quiet, editorial, and readable.

Navigation rules:

• Use clear labels.
• Use ink-brown or dark text for base navigation.
• Use terracotta for active or hover states.
• Reinforce active state with underline, rule, weight, or marker.
• Keep navigation spacing generous.
• Preserve keyboard navigation.
• Provide visible focus-visible states.
• Avoid crowded mega-menus unless content requires them.
• Avoid icon-only navigation.

Navigation patterns may include:

• Editorial top nav
• Section tabs
• Category filters
• Breadcrumbs
• Article table of contents
• Footer story groups
• Previous/next story links

Active navigation must use more than color alone.

Tables of Contents

Long-form pages may include a table of contents.

TOC rules:

• Use readable 16px text.
• Keep hierarchy simple.
• Use terracotta marker for active section.
• Use sticky positioning only when it does not reduce readability.
• Ensure keyboard links work.
• Use clear focus states.
• Do not over-nest more than two levels unless required.

Newsletter Blocks

Newsletter signup is a common Terracotta pattern.

Newsletter rules:

• Use warm paper or white surface.
• Use ink-brown heading.
• Use concise trust-building copy.
• Use terracotta primary button.
• Keep form fields accessible.
• Include privacy reassurance where relevant.
• Avoid dark-pattern copy or excessive urgency.

Good newsletter copy:

Get the next essay

One thoughtful note each month. No spam.

[Email address] [Subscribe]

Modals and Overlays

Modals should feel like focused editorial panels.

Modal rules:

• Use white or warm paper surface.
• Use moderate radius.
• Use subtle border or rule.
• Avoid heavy shadows.
• Use clear title text.
• Use terracotta for primary action.
• Use danger styling for destructive confirmations.
• Trap focus inside the modal.
• Close on Escape unless explicit confirmation is required.
• Return focus to the triggering element after close.

Destructive modals must clearly state consequences.

Alerts and Feedback

Alerts should be restrained and semantic.

Alert rules:

• Use semantic colors only for actual feedback.
• Include a clear message and recovery guidance.
• Do not rely on color alone.
• Keep alert styling consistent with editorial rules.
• Use terracotta only for action links inside alerts, not as semantic warning.
• Make dismiss controls keyboard accessible.

Example feedback copy:

Empty States

Empty states should be quiet, helpful, and editorial.

Empty state rules:

• Use warm cream background.
• Use ink-brown heading.
• Explain what is missing.
• Provide one clear terracotta action when useful.
• Avoid decorative filler.
• Avoid vague copy.
• Keep layout spacious.

Examples:

Tables and Data

Terracotta is not primarily a dense data system, but it can support editorial tables, references, schedules, and light dashboards.

Table rules:

• Use readable 16px or 18px text.
• Use warm paper or white surface.
• Use subtle rules, not heavy grids.
• Use JetBrains Mono for technical values where useful.
• Align numeric values consistently.
• Use semantic colors only for real state.
• Preserve readable row height.
• Provide responsive behavior on small screens.

Tables should feel like editorial reference material, not enterprise spreadsheets.

Code and Technical Blocks

When Terracotta is used for documentation or technical content, code blocks should be quiet and readable.

Code block rules:

• Use JetBrains Mono.
• Use white or slightly tinted paper surface.
• Use subtle border.
• Use readable font size, usually 14px or 16px.
• Provide copy actions where useful.
• Ensure horizontal overflow is handled.
• Keep syntax colors restrained and accessible.

Accessibility

Terracotta enforces WCAG 2.2 AA as a baseline, with keyboard-first interactions, visible focus states, 44px+ touch targets where possible, and high-contrast support.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Long-form body text must remain readable at supported viewport sizes.
• Every interactive element must be reachable and operable by keyboard.
• Every interactive element must have a visible focus-visible state.
• Touch targets should be at least 44px in height and width where practical.
• Color must never be the only indicator of state.
• Form errors must be visually and programmatically associated with fields.
• Semantic HTML must be used before ARIA.
• High-contrast mode must preserve visible boundaries and focus states.
• Motion must respect reduced-motion preferences.

Contrast Requirements

Warm colors can become low contrast quickly, especially terracotta on cream.

Rules:

• Body text should use text, ink, or ink-brown.
• Do not use terracotta for small body text unless contrast passes.
• Terracotta buttons must use a contrast-safe foreground.
• Muted metadata must remain readable.
• Links must be distinguishable by more than color.
• Semantic success, warning, and danger colors must be tested against cream and white surfaces.
• Image captions must remain readable.
• Text over images should be avoided unless contrast is guaranteed.

Do not assume earthy colors are automatically readable. Test every foreground/background pair.

Focus States

Focus states should be visible and editorially consistent.

Preferred focus treatments:

• 3px terracotta outline with offset
• Terracotta underline plus outline for links
• Border color change plus outline for inputs
• Strong rule or marker for active navigation
• High-contrast fallback outline in forced-colors mode

Avoid faint clay outlines, opacity-only focus states, or focus indicators hidden by warm surfaces.

Keyboard Interaction

Keyboard behavior must be complete across editorial and product components.

Rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Tabs support expected keyboard behavior.
• Modals trap focus and return focus after close.
• Menus and popovers support keyboard navigation.
• Article tables of contents are navigable by keyboard.
• Form controls use native elements where possible.
• Interactive cards use link or button semantics.

Do not make entire article cards clickable without proper focus and accessible name behavior.

Touch Targets

Terracotta interfaces may feel editorial, but interactive controls still need comfortable targets.

Rules:

• Primary buttons should be at least 44px high.
• Form fields should be at least 44px high.
• Navigation links should provide adequate padding.
• Inline links inside body text should remain accessible, but adjacent links should not be crowded.
• Icon buttons must include accessible labels and target padding.

High-Contrast Support

Terracotta should remain usable when high-contrast or forced-colors modes are active.

Rules:

• Do not rely on background color alone to indicate state.
• Preserve outlines and borders in forced-colors mode.
• Ensure focus states are visible when custom colors are overridden.
• Use semantic HTML so browser defaults can assist.
• Avoid decorative-only state indicators.

Motion Accessibility

Terracotta should use minimal motion. Motion should support reading and interaction, not distract from content.

Acceptable motion:

• Short hover transitions
• Subtle accordion expansion
• Modal entrance
• Newsletter confirmation
• Smooth scroll only when not disorienting

Motion rules:

• Respect prefers-reduced-motion.
• Avoid parallax in long-form reading unless disabled by default.
• Do not animate body text during reading.
• Do not use motion as the only feedback.
• Keep transitions short and functional.

Content and Tone

Terracotta uses concise, confident, helpful copy. The writing should feel warm and editorial without becoming flowery or vague.

Voice Principles

Terracotta copy should be:

• Clear
• Warm
• Specific
• Calm
• Confident
• Human
• Easy to read

The interface can feel literary, but product copy should still be direct. Avoid overly poetic labels where users need clarity.

Good Examples

Avoid

Terracotta copy should respect the reader’s attention. It should be elegant through precision, not ornament.

Editorial Copy Standards

For editorial interfaces, content should be structured carefully.

Use:

• Descriptive article titles
• Short summaries
• Clear bylines
• Human-readable dates
• Specific category labels
• Concise newsletter promises
• Direct error recovery
• Plain-language navigation

Avoid:

• Overly clever navigation labels
• Repeated marketing phrases
• Long CTAs
• Vague empty states
• Decorative copy that hides the action

Example article card:

Designing With Clay

A short essay on warmth, restraint, and the rhythm of editorial interfaces.

By Mara Ionescu · 8 min read

How to Use with AI Tools

Cursor and Claude Code

Add the Terracotta skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh terracotta

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate pages, components, flows, or refactors using the Terracotta design system.

Example prompts:

Create a long-form article page using the Terracotta design system.

Build a blog index with warm cream surfaces, ink-brown serif headings, and terracotta link accents.

Generate accessible buttons, cards, forms, newsletter blocks, and article components using Terracotta rules.

Refactor this publication page into a clay-toned editorial interface with strong reading rhythm.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the beginning of a conversation.

Then ask for implementation-specific output:

Generate React components for Terracotta article cards, buttons, forms, and newsletter signup blocks.

Create component rules for article pages, pull quotes, author cards, and editorial navigation using this skill.

Audit this UI against the Terracotta design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts context, prompt instructions, or project-level rules.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it as context for blogs, publications, long-form articles, and story-driven landing pages.
• Use it to define editorial components and accessibility criteria.
• Use it as a QA checklist during code review.
• Ask the assistant to migrate an existing neutral content site into the Terracotta editorial system.

The best results come from prompting for concrete implementation details: warm cream canvas, ink-brown serif hierarchy, terracotta accent usage, long-form reading rules, touch target requirements, focus states, responsive behavior, and anti-patterns.

Design Philosophy

Terracotta is governed by a few core principles.

1. Reading Comes First

Terracotta is content-first. Typography, line length, spacing, and contrast matter more than decorative styling. If a visual treatment harms reading, remove it.

2. Warmth Comes From Restraint

The system feels human because it uses warm cream, ink-brown, and clay tones with discipline. It should not become a busy earth-tone palette.

3. Serif Typography Sets the Mood

DM Serif Display gives the interface its editorial identity. Use it to create hierarchy, rhythm, and literary presence.

4. Terracotta Is a Mark, Not a Wash

The clay accent should guide attention. It should not flood the interface. Small terracotta moments can feel stronger than large orange sections.

5. Editorial Structure Beats Decoration

Rules, spacing, bylines, pull quotes, captions, and image rhythm create the publication feeling. Avoid decoration that does not support content.

6. Accessibility Is Editorial Care

Readable text, visible focus, clear labels, touch targets, high contrast, semantic structure, and keyboard support are part of respecting the reader.

Anti-Patterns

Avoid these implementations when generating Terracotta-style interfaces:

• Pure white full-page backgrounds instead of warm cream
• Cold gray app shells
• Multiple decorative earth-tone accent colors
• Terracotta used for every heading, icon, and border
• Low-contrast clay text on cream backgrounds
• Body text that is too small for long-form reading
• Overly narrow or overly wide reading columns
• Heavy drop shadows or glossy gradients
• Glassmorphism, neon effects, or futuristic UI styling
• Generic sans-serif SaaS layouts with a serif heading pasted on
• Decorative dividers that interrupt reading
• Placeholder-only form labels
• Ambiguous navigation labels
• Image text overlays without contrast testing
• Color-only selected, success, warning, or error states
• Touch targets below 44px for primary controls
• One-off spacing values outside the defined scale
• Components missing hover, focus-visible, active, disabled, loading, or error states

Terracotta should feel warm, editorial, and grounded, but never muddy, inaccessible, or overdecorated.

Migration Notes

When adapting an existing interface to Terracotta, migrate in this order:

1. Replace the page background with the warm cream secondary canvas.
2. Define semantic tokens for paper, ink-brown, clay, muted text, rules, and focus states.
3. Convert headings and display moments to DM Serif Display.
4. Normalize type sizes to the 14 / 16 / 18 / 24 / 32 / 40px scale.
5. Set long-form body text to 18px where practical with generous line height.
6. Restrict accent usage to terracotta #C56A3C.
7. Replace colorful accent systems with semantic state colors only.
8. Use ink-brown for headlines and editorial hierarchy.
9. Replace heavy cards and shadows with rules, spacing, and subtle surfaces.
10. Adjust article columns to readable line lengths.
11. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
12. Update buttons, links, forms, and navigation with explicit states.
13. Ensure primary controls meet 44px+ touch target guidance where practical.
14. Replace vague labels with direct editorial copy.
15. Test contrast across cream, white, ink-brown, terracotta, and semantic states.
16. Verify keyboard navigation, focus states, and high-contrast behavior.
17. Run the QA checklist before shipping.

Do not migrate by simply changing the background to cream and buttons to terracotta. Terracotta depends on the full editorial system: warm paper, ink-brown serif hierarchy, restrained clay accents, long-form reading rhythm, semantic structure, and accessibility-first implementation.

QA Checklist

Use this checklist when reviewing generated UI against the Terracotta design skill.

Visual System

• The page background uses warm cream #F3E9D8.
• Terracotta #C56A3C is used as the single accent.
• Ink-brown or dark text carries headlines and editorial hierarchy.
• White surface is used only for foreground cards, forms, modals, or utility panels.
• The interface feels clay-toned, warm, and editorial.
• Extra decorative accent colors are avoided.
• Heavy shadows, glossy gradients, glass effects, and neon styling are avoided.
• Editorial rules and spacing create structure.
• Images feel editorial and support the content.
• The layout prioritizes reading rhythm over decoration.

Typography

• DM Serif Display is used for primary and display typography.
• JetBrains Mono is reserved for code, metadata, and technical values.
• Type sizes come from the 14 / 16 / 18 / 24 / 32 / 40px scale.
• Long-form body text is readable, ideally 18px where practical.
• Line height supports comfortable reading.
• Article line length is controlled.
• Headings create clear hierarchy.
• Captions and metadata remain readable.
• Long headings and labels wrap cleanly.

Components

• Buttons include default, hover, focus-visible, active, disabled, loading, and error states.
• Primary actions use terracotta intentionally.
• Links use terracotta plus underline or structural cue.
• Article pages include clear title, byline, metadata, body rhythm, and related navigation where relevant.
• Pull quotes are readable and used sparingly.
• Cards prioritize title, summary, metadata, and image hierarchy.
• Forms use visible labels and accessible error messaging.
• Navigation has clear active and focus states.
• Modals trap focus and return focus after closing.
• Alerts use semantic colors plus text or structural cues.
• Empty states include useful copy and one clear action where appropriate.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Terracotta on cream, terracotta on white, and text on terracotta have been tested.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious.
• Color is never the only indicator of state.
• Form errors are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Primary controls meet 44px+ touch target guidance where practical.
• High-contrast mode preserves boundaries and focus indicators.
• Reduced-motion preferences are respected.
• Text over images is avoided unless contrast is guaranteed.

Content

• CTA labels are specific and action-oriented.
• Article titles and summaries are descriptive.
• Newsletter copy is clear and trust-building.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and what to do next.
• Destructive actions clearly state consequences.
• Copy feels warm and editorial without becoming vague.
• Vague labels like Submit, Click here, and Go are avoided.

Terracotta is a disciplined design system for interfaces that should feel warm, human, editorial, and content-first. Its strength comes from cream surfaces, ink-brown serif hierarchy, a single clay accent, generous reading rhythm, restrained components, and accessibility-first implementation rules.