design-standards

1# Design Standards
2 
3Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist.
4 
5This 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.
6 
7---
8 
9## When to use
10 
11- Building a new page, section, or component
12- Reviewing UI for quality, accessibility, or consistency
13- Setting up design tokens for a new project
14- Fixing layout, contrast, or hierarchy issues
15- Establishing a button or form standard
16- Pre-ship design review
17 
18## When NOT to use
19 
20- Defining a brand identity from scratch (use `brand-identity`)
21- Documenting a finished brand system (use `brand-style-guide`)
22- Building a formal component library (use `design-system`)
23- Frontend code architecture (use `frontend-component-build`)
24- Accessibility-only audits with WCAG remediation (use `accessibility-audit`)
25 
26---
27 
28## Required inputs
29 
30- The page or component being built or reviewed
31- The brand's design tokens (colors, type, spacing) - or willingness to define them
32- The target devices and viewports
33 
34If brand tokens are undefined, define a working set first using the template in [`references/design-tokens-template.md`](references/design-tokens-template.md).
35 
36---
37 
38## The framework: 6 standards
39…