Layout and paint through Box/FlexBox props and enum props on shipped components
Do not override @prepared911/ui styles; request gaps via find-pattern
CSS modules may target onlyBox or FlexBox, with Chroma var(--…) tokens only
bem() is not an export of @prepared911/ui
Design System First
Always check if Box/FlexBox props can handle the styling:
Co-located SCSS
When Box props aren't enough, use className + co-located SCSS:
File Naming
Match component filename convention:
MyComponent.tsx → MyComponent.scss (PascalCase)
filter-bar.tsx → filter-bar.scss (kebab-case)
Single stylesheet in directory → styles.scss
Importing
BEM Naming
Block Element Modifier
With Sass &
className and CSS modules
bem() and prefixClass() are not exports of @prepared911/ui. Consumers do not override shipped component styles. Layout and paint go through Box/FlexBox props and shipped parts; a co-located CSS module may style only the Box or FlexBox host, with token references enforced by pnpm lint:css (ADR 0002 consumer call-site rules).Generates:
Design Tokens
Always use design tokens instead of hardcoded values:
Max 2 Levels
Only .block and .block__element. Never .block__element__subelement.
Responsive Design
Use media queries with design tokens:
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
Use a token-only CSS module on Box/FlexBox when:
✅ Complex selectors (:hover, :focus, :nth-child) props do not cover
✅ Pseudo-elements (::before, ::after)
✅ Media queries (token breakpoints and spacing only)
✅ Motion tokens (--duration-*, --easing-*) for transitions
Do not use a module to override a shipped control's layout or paint.Escalate to UX Guild when: