U.S. flagA digital services project by Flexion

Rules

Token Rules

  • All colors must use --flex-color-* tokens (no hardcoded hex)
  • Spacing must use --flex-space-* tokens
  • Font families must use --flex-font-sans or --flex-font-mono
  • Font sizes must use --flex-text-* tokens
  • Border radii must use --flex-radius-* tokens
  • Exception: USWDS components may use hardcoded rem/px for visual conformance

Component Rules

  • One CSS file per component, co-located with its TSX
  • Block CSS handles appearance (color, typography, borders), not layout between siblings
  • Use data- attributes for state/variants (data-status, data-variant, data-size)
  • Every interactive component must have :focus-visible and :disabled styles

Accessibility

  • 44px minimum touch target
  • Form fields must have associated <label>
  • Error states need color + text (not color alone)
  • Respect prefers-reduced-motion
  • Support prefers-contrast