# Design Standards

Apply production-grade design standards when building or reviewing pages, components...

- Repository: https://github.com/rampstackco/claude-skills (1014 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rampstackco/claude-skills --skill design-standards -g -a claude-code -y`
Codex: `npx skills add rampstackco/claude-skills --skill design-standards -g -a codex -y`
Cursor: `npx skills add rampstackco/claude-skills --skill design-standards -g -a cursor -y`
Gemini CLI: `npx skills add rampstackco/claude-skills --skill design-standards -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rampstackco/claude-skills`

## Description

Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design decision where contrast, accessibility, spacing, or visual hierarchy matters.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design Standards

Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist.

This skill complements `brand-identity` (which defines the visual system) and `brand-style-guide` (which documents it). This skill is for the day-to-day work of applying those standards in real components and pages.

---

## When to use

- Building a new page, section, or component
- Reviewing UI for quality, accessibility, or consistency
- Setting up design tokens for a new project
- Fixing layout, contrast, or hierarchy issues
- Establishing a button or form standard
- Pre-ship design review

## When NOT to use

- Defining a brand identity from scratch (use `brand-identity`)
- Documenting a finished brand system (use `brand-style-guide`)
- Building a formal component library (use `design-system`)
- Frontend code architecture (use `frontend-component-build`)
- Accessibility-only audits with WCAG remediation (use `accessibility-audit`)

---

## Required inputs

- The page or component being built or reviewed
- The brand's design tokens (colors, type, spacing) - or willingness to define them
- The target devices and viewports

If brand tokens are undefined, define a working set first using the template in [`references/design-tokens-template.md`](references/design-tokens-template.md).

---

## The framework: 6 standards

Six standards apply to every piece of UI. Hold the line on these and most design problems disappear.

### 1. Design tokens

Every project needs tokens defined before any UI gets built. Tokens are the source of truth.

**Color tokens** (minimum):
- Primary brand color
- Primary hover (typically 15 to 25 percent darker)
- Background variants (surface, alt-section, hero/dark, footer)
- Text scale (heading, body, muted, on-dark)
- Semantic (success, warning, error, info)

The rest: https://github.com/rampstackco/claude-skills/blob/HEAD/dist/codex/.agents/skills/design-standards/SKILL.md