Jump to

Skill · Design standards

Design standards.

Hold the line on six standards and most design problems disappear.

Production design standards for any web project, stack-agnostic and tool-agnostic. Six standards apply to every piece of UI: design tokens, WCAG AA contrast, visual hierarchy, spacing and rhythm, mobile rules, and component consistency. The skill applies them when building and scores against them when reviewing.

This is the day-to-day work of applying a visual system in real components and pages, separate from defining the brand or building the formal component library.

Audience: designers and front-end engineers building a page or component, setting up tokens, fixing layout or contrast, or running a pre-ship design review.

View the skill on GitHubBrowse the full catalog

The framework

Six standards for every piece of UI.

These apply to everything. Hold the line on the six and most design problems never reach the page.

  1. 01Design tokens: color, spacing, type, and radius defined once before any UI gets built. Hardcoded values are technical debt.
  2. 02WCAG AA contrast: 4.5:1 for body text, 3:1 for large text and UI elements. Non-negotiable; a design that fails AA is broken.
  3. 03Visual hierarchy: a clear scan order built from size, weight, color, spacing, and position. If three things compete as primary, none wins.
  4. 04Spacing and rhythm: values from the scale, related elements closer than unrelated ones, and section breathing room of at least 64px on desktop.
  5. 05Mobile rules: tested on a 375 to 390px viewport, 44 by 44px touch targets, 16px input text to avoid iOS auto-zoom, body text never under 14px.
  6. 06Component consistency: one primary, secondary, and ghost button, one base card pattern, one icon stroke weight. Variations are intentional, not accidental.

How the skill runs

Tokens first, mobile-first, contrast always.

The skill works in a fixed order: define the tokens, plan the hierarchy, build for the smallest viewport, then check.

  1. 01

    Confirm tokens

    If tokens are not defined, define a working set first and document it. Everything downstream references them.

  2. 02

    Sketch hierarchy

    Before any markup, identify the primary action, secondary actions, and supporting content, and confirm the scan order.

  3. 03

    Build mobile-first

    Lay out for the smallest target viewport before scaling up. Desktop-first guarantees mobile failures.

  4. 04

    Apply tokens

    Every value comes from the token set. No hardcoded colors, sizes, or spacing.

  5. 05

    Run contrast checks

    Every text-on-background pair passes AA; every UI element passes 3:1.

  6. 06

    Test at breakpoints

    375, 768, 1024, and 1440 at minimum. Confirm nothing breaks and no horizontal scroll appears.

  7. 07

    Run the pre-ship checklist

    A final pass against the checklist before shipping, scored pass or fail with notes.

Reference files

Three references that go alongside the SKILL.md.

  • references/design-tokens-template.md

    A template for setting up color, spacing, type, and radius tokens for any project.

  • references/preship-checklist.md

    The final design-review checklist run before shipping, covering all six standards.

  • references/tailwind-patterns.md

    Optional Tailwind-specific component patterns (hero, cards, buttons, data rows) for projects on that stack.

Browse all reference files on GitHub

Bridges to other skills

Where the brand is defined, documented, and systematized.

Design standards apply a visual system. These skills define it, document it, and build it into a library.

  • Defines the system

    brand-identity

    Defining a brand identity from scratch happens here: the five-element visual system that the tokens then encode.

  • The component library

    design-system

    Building a formal, governed component library is a different job. Design standards is the day-to-day application; the design system is the shared library underneath it.

  • Component code

    frontend-component-build

    Front-end architecture and the component's API, states, and accessibility implementation live there. This skill makes the page-level design calls.

  • WCAG remediation

    accessibility-audit

    When the work is a full WCAG audit with a remediation plan rather than the AA contrast floor, reach for the dedicated audit.

  • Documentation

    brand-style-guide

    Documents the finished brand system as the canonical reference. Design standards reference its tokens; the guide records them.

Open source under MIT

Read the SKILL.md on GitHub.

The skill source lives in the rampstackco/claude-skills repository alongside dozens of other skills covering the full lifecycle of brand and product work. This page is a structured overview; the SKILL.md is the source. MIT licensed.

View SKILL.mdBrowse the full catalog

Frequently asked questions.

What are the six standards?
Design tokens, WCAG AA contrast, visual hierarchy, spacing and rhythm, mobile rules, and component consistency. They apply to every piece of UI, whether you are building it or reviewing it. Hold the line on the six and most design problems never make it onto the page.
Why are design tokens first?
Because tokens are the source of truth for everything above them, and they need to exist before any UI gets built. A project needs color tokens (primary, hover, backgrounds, text scale, semantics), a spacing scale, type tokens, and radius tokens. Document them once and reference them everywhere. Hardcoded colors, sizes, and spacing are technical debt that resists theming and drifts inconsistent at scale.
Is WCAG AA contrast really non-negotiable?
Yes. Normal body text needs 4.5:1, large text (18pt regular or 14pt bold) needs 3:1, and UI components and graphical elements need 3:1. A design that fails AA is broken regardless of how it looks to designers with full vision. The most common failure is a brand color used for body text without a darker variant; most brand colors fail AA at body sizes and need one.
What are the mobile rules?
Test on a 375 to 390px viewport before declaring anything complete. All interactive elements get a minimum 44 by 44px touch target with at least 8px of spacing on every side. Form inputs use at least 16px text to prevent iOS auto-zoom. Body text never drops below 14px. A sticky bottom bar needs the page wrapper to carry bottom padding equal to the bar height, and no element gets a fixed pixel width without a max-width constraint.
How is this different from design-system and brand-identity?
Brand-identity defines the visual system. Brand-style-guide documents it. Design-system builds the formal, governed component library. Design-standards is the day-to-day work of applying those standards in real components and pages, with the contrast checks, hierarchy decisions, spacing, and mobile rules that a single build or review needs.
What does the skill output?
Design decisions and review notes more than finished artifacts. When starting a project, a design tokens file. When reviewing, a component or page review scored against the six standards with specific fixes. Before shipping, pre-ship checklist results marked pass or fail with notes. When it generates component code, the patterns stay stack-agnostic in the main skill and stack-specific details live in the reference files.