design-standards

# 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...