Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Working On Features
  3. Styling

Styling

SCSS, BEM naming, and design tokens.

Quick Reference
Styling decision flowchart:
  1. Box/FlexBox props and shipped parts (Card, overlay headers and footers) — preferred
  2. find-pattern / UX Guild — when no pattern exists
Never use:
  • ❌ sx prop or sxStyles
  • ❌ styled-components
  • ❌ Native HTML or SVG elements in consumer code
  • ❌ className or style on any element in consumer code
  • ❌ @layer chroma.overrides (or any CSS) to beat Box or component props
  • ❌ Raw lengths, colors, spacing, radii, shadows, z-index, opacity, or motion literals in product CSS
  • ❌ Utility classes with arbitrary values
Consumer styling (ADR 0002 consumer call-site rules):
  • Layout and paint through Box/FlexBox props and enum props on shipped components
  • Do not override @prepared911/ui styles; request gaps via find-pattern
  • bem() is not an export of @prepared911/ui
Design System First
Always check if Box/FlexBox props can handle the styling:
className and CSS modules
Legacy BEM and plain SCSS in consumer code are out of scope for new work. To migrate existing call sites, follow Migrating to @prepared911/ui. bem() and prefixClass() are not exports of @prepared911/ui. Consumers do not pass className to any @prepared911/ui part. Layout and paint go through Box/FlexBox props and shipped parts; gaps use find-pattern (ADR 0002 consumer call-site rules).
Design Tokens
For spacing and paint in consumer screens, use Box and FlexBox props as in the example above. Token names and semantics live on the Tokens page; consumer stylesheets stay token-only and must not repeat layout in CSS modules.
When to Use Each Approach
Use Box/FlexBox props when:
  • ✅ Layout (flex, grid, spacing, alignment)
  • ✅ Typography (font size, weight, color)
  • ✅ Spacing (margin, padding, gap)
  • ✅ Design system values exist
When props and shipped parts do not cover a state such as :hover, file a find-pattern request. Escalate to UX Guild when:
  • ❌ No design system pattern exists
  • ❌ Component behavior unclear
  • ❌ New visual pattern needed
Related Documentation
  • Tokens - Design tokens reference
  • UI Components - @prepared/ui-* package usage
  • Component Patterns - Component organization
Reference Files
For more detailed technical guidance, see these reference files:
  • css-best-practices SKILL.md
  • stylesheets-for-react.md
  • using-bem-and-sass.md
  • react-ui-implementation SKILL.md
Previous
Working on features / Writing Hooks
Next
Working on features / Localization (i18n)
On this page
Quick Reference
Design System First
className and CSS modules
Design Tokens
When to Use Each Approach
Related Documentation
Reference Files