skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

terracotta

Generates implementation-ready design-system guidelines using the Terracotta editorial token set.

Updated Aug 31, 2026
Search Tags:#typography#accessibility#design system#color palette#design tokens#guidelines#editorial
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill terracotta-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: terracotta
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/terracotta
Command: npx skills add https://github.com/MANR255926/GARAGE --skill terracotta-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building editorial or long-form reading interfaces often lack consistent, token-driven design rules, leading to inconsistent spacing, low-contrast text, and ad-hoc component styling. This Skill turns the Terracotta design foundations into concrete, testable guidance for engineers and designers. ## Core Features & Use Cases - Token-Driven Foundations: Defines the Terracotta palette (primary #C56A3C, cream surfaces), DM Serif Display typography scale, and 4/8/12/16/24/32 spacing rhythm as semantic tokens. - Component Rule Authoring: Produces component anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior rules. - Accessibility Acceptance Criteria: Anchors every rule to WCAG 2.2 AA requirements, keyboard interaction, and testable QA checklists. - Use Case: When building a blog or storytelling site, ask for button, card, and typography guidelines and receive opinionated rules with do/don't examples, anti-patterns, and a code-review-ready QA checklist. ## Quick Start Generate Terracotta design-system guidelines for the button and card components in my editorial blog layout.

Frequently Asked Questions about terracotta

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

FAQPage Schema
How do I create design system guidelines for an editorial website?▼

Define tokens first (color, typography, spacing), then specify component anatomy, states, and responsive behavior. This Skill generates that structure using the Terracotta palette, DM Serif Display type scale, and a 4/8/12/16/24/32 spacing rhythm.

What color palette does the Terracotta design system use?▼

Terracotta uses a clay-toned palette: primary #C56A3C, secondary cream #F3E9D8, success #16A34A, warning #D97706, danger #DC2626, white surfaces, and near-black text #111827.

Does the Terracotta skill cover accessibility requirements?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions, visible focus states, 44px minimum touch targets, and high-contrast support. Every accessibility statement must be testable in implementation.

What output structure do the generated design guidelines follow?▼

Guidelines include context and goals, design tokens, component-level rules with states and variants, accessibility acceptance criteria, content tone standards, anti-patterns, and a QA checklist executable in code review.

When should I not use the Terracotta design system?▼

Avoid it for interfaces needing cool, corporate, or data-dense visual languages. Terracotta is tuned for warm, editorial, content-first layouts where serif headlines and long-form readability matter.

Related Skills

Explore More Design & Creative Skills→
SheshiyerSheshiyer
4

color-type-system

Select color palettes and typefaces with hex specs and AA/AAA contrast validation.

Community
Intermediate
marktantongcomarktantongco

frontend-design

Transform UI specifications into React, Next.js, or Tailwind frontend code with token generation and accessibility validation.

Community
Advanced
KhoiwallKhoiwall

accessibility-audit

Audits UI components for WCAG compliance and accessibility barriers.

Community
Intermediate
brandon-frysliebrandon-fryslie
4

saas-landing-page

Build startup/SaaS marketing pages with a warm editorial minimalism design system.

Community
Intermediate