skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

terracotta

Generate editorial UI guidance with terracotta design tokens and WCAG 2.2 AA rules.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#color tokens#component states#editorial UI
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill terracotta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: terracotta
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/terracotta
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill terracotta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Terracotta provides a consistent, implementation-ready design system for building warm editorial interfaces that stay readable, accessible, and visually cohesive.

Core Features & Use Cases

  • Editorial visual direction: Warm cream surfaces with ink-brown serif hierarchy and a single terracotta accent for clear emphasis in long-form layouts.
  • Design tokens & typography: A defined type scale (14/16/18/24/32/40), paired fonts (DM Serif Display + JetBrains Mono), and spacing system (4/8/12/16/24/32) to keep rhythm consistent.
  • Accessibility guardrails: WCAG 2.2 AA expectations with keyboard-first behavior and testable acceptance criteria for focus, states, and contrast.
  • Use case: Perfect for landing pages, blogs, storytelling products, and documentation-style UIs where content readability and hierarchy matter.

Quick Start

Use the terracotta skill to generate UI guidance and component rules that match its tokenized typography, color palette, and accessibility requirements.

Frequently Asked Questions about terracotta

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an editorial UI with consistent typography and spacing for long-form reading?▼

Build an editorial UI by applying a standardized design system with a defined type scale, paired fonts, and a spacing system to maintain visual rhythm. This ensures consistent typography, spacing, and component behavior across long-form reading experiences.

What are the best design tokens for a warm, accessible landing page?▼

The best design tokens for an accessible landing page include explicit color scales with warm cream surfaces and terracotta accents, a defined type scale, and a structured spacing system. These tokens guarantee visual cohesion and readability.

How do I ensure WCAG 2.2 AA accessibility in a long-form reading experience?▼

Ensure WCAG 2.2 AA accessibility by enforcing keyboard-first interaction rules and applying testable acceptance criteria for focus, states, and contrast. This provides clear accessibility guardrails for editorial user interfaces.

Can I use a terracotta accent color for documentation-style UIs without losing readability?▼

Yes, you can use a terracotta accent color for documentation-style UIs by pairing it with warm cream surfaces and an ink-brown serif hierarchy. This combination creates clear emphasis while maintaining content readability.

What is the defined type scale and spacing system for an editorial design system?▼

The defined type scale uses 14, 16, 18, 24, 32, and 40 pixel sizes paired with DM Serif Display and JetBrains Mono fonts. The spacing system uses 4, 8, 12, 16, 24, and 32 pixel increments to keep layout rhythm consistent.

Does this editorial UI approach provide component guidelines for states and variants?▼

Yes, this editorial UI approach provides component guidelines covering states, variants, and a QA checklist. These rules ensure predictable component behavior and consistent interaction patterns across storytelling layouts.

Related Skills

Explore More Design & Creative Skills→
XCmiaowXCmiaow

infocard

Generate editorial-style HTML/CSS information cards embedded directly in Markdown.

Community
Basic
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
Maccio-huangMaccio-huang

html-ppt-taste-editorial

Generate editorial-minimalist HTML presentations with a 16:9 aspect ratio.

Community
Intermediate
FutureAtomsFutureAtoms
1

typography-2026-luxury-editorial

Provide serif and sans-serif font pairings with React Native code examples.

Community
Intermediate