markdowneditor

Design System: [name]

Design system – tokens, components, contract

Дизайн та UXСтандартsystem

Як використовувати: Multi-designer or multi-repo work. Tokens first, then components – the a11y contract is not optional.

Перегляд

Design System: [name]

The contract between design and code – tokens, components, and the rules for composing them. If it isn't documented here, it doesn't exist.

FieldValue
System[name]
VersionN.N
Owner@name
StatusDraft / Adopted

Principles

  1. [e.g. consistency over novelty]
  2. [e.g. accessible by default]
  3. [e.g. compose, don't fork]

Foundations

Color tokens

TokenValueUse
--color-primary#NNNNNNKey actions
--color-surface#NNNNNNBackgrounds

Type scale

TokenSize / weightUse
text-displayNN/semiboldHero
text-bodyNN/regularParagraphs

Spacing & radius

TokenValueUse
space-1Npx
radius-mdNpxCards

Components

ComponentStatusSpecNotes
ButtonStable[link]Variants: solid/soft/ghost
InputBeta[link]
[component]Proposed

Component anatomy (repeat per component)

  • Variants: [list]
  • States: default / hover / active / disabled / loading
  • Do: [usage rule]
  • Don't: [anti-pattern]

Accessibility contract

  • Contrast: AA minimum (4.5:1 text, 3:1 UI)
  • Focus: visible ring on every interactive element
  • Keyboard: full operability, no traps
  • Motion: respects reduced-motion preference

Contribution

StepProcess
Propose[issue / rfc]
Review[who approves]
Release[versioning rule – breaking = major]

Changelog

VersionDateChanges
1.0YYYY-MM-DDInitial

Схожі шаблони