skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

terracotta

Define editorial interface guidelines with terracotta palettes and WCAG 2.2 AA standards.

Updated Jun 23, 2026
Search Tags:#typography#accessibility#design system#brand identity#color palette
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill terracotta-guideops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: terracotta
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/terracotta
Command: npx skills add https://github.com/guideops/agentic-shared --skill terracotta-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines for the Terracotta design system, offering best practices for creating user-friendly and accessible editorial interfaces.

Core Features & Use Cases

  • Style Foundations: Defines visual and typography scales, color palettes, and spacing scales.
  • Brand Identity: Outlines the visual identity with warm cream surfaces and terracotta accents.
  • Accessibility: Ensures compliance with WCAG 2.2 AA standards for keyboard-first interactions and high-contrast support.
  • Writing Tone: Promotes a concise and confident tone in guidelines.

Quick Start

Apply the terracotta design system to your project to create an editorial interface with warm, terracotta-toned surfaces and typography.

Frequently Asked Questions about terracotta

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

FAQPage Schema
What is a clay-toned design system for editorial interfaces?▼

A clay-toned design system provides guidelines for creating editorial interfaces featuring warm cream surfaces, terracotta accents, structured typography scales, and defined spacing for optimal readability.

How do I ensure my design system meets WCAG 2.2 AA accessibility standards?▼

To meet WCAG 2.2 AA accessibility standards, your design system must enforce high-contrast color palettes and prioritize keyboard-first interactions for all user interface components.

Can I use this terracotta color palette for my brand identity?▼

Yes, the terracotta color palette is designed to establish brand identity through sun-baked, warm cream surfaces and terracotta accents tailored for editorial interfaces.

How do I build a typography scale for an editorial interface?▼

Build a typography scale by applying foundational visual style guidelines that define font selections and visual rhythm to maintain readability and a confident writing tone.

Does this design system guidance include a spacing scale?▼

Yes, the design system guidance includes a foundational spacing scale alongside visual style, typography scales, and color palettes to structure editorial interfaces effectively.

What is the best way to apply a warm clay-toned aesthetic to my project?▼

Apply a warm clay-toned aesthetic by integrating the provided visual style, typography, and color palette guidelines to create readable, visually rhythmic editorial interfaces.

Related Skills

Explore More Design & Creative Skills→
Gull-StackGull-Stack

brand-building

Define brand foundations, voice, and messaging for cohesive identity.

Official
Basic
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
curiositechcuriositech
181

web-design-expert

Generate web designs with brand identity, color palettes, typography, and UI/UX patterns.

Official
Intermediate