Richie
e4ce243e57
- Mirrors CLAUDE.md conventions for cross-tool consistency - Hard rules: no hardcoded values, token access patterns, atomic tiers - Scoped for visual polish work in Antigravity browser agent Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.4 KiB
2.4 KiB
FA 2.0 Design System — Antigravity Rules
Project context
Funeral Arranger (funeralarranger.com.au) design system rebuild. Parsons is the client. The design language must be warm, professional, trustworthy, and calm. Users are often in distress.
Tech stack
- React 18 + TypeScript
- Material UI (MUI) v5
- Storybook 8+ (running on localhost:6006)
- Style Dictionary for token transformation
- W3C DTCG token format
Hard rules
- Never hardcode colours, spacing, typography, or shadows — always consume the MUI theme (
theme.palette.*,theme.spacing(),theme.typography.*) or CSS custom properties (var(--fa-*)) - Never use raw hex values in components — map to semantic tokens
- Follow atomic design tiers: atoms → molecules → organisms → templates → pages
- Component folders: PascalCase, each contains
ComponentName.tsx,ComponentName.stories.tsx,index.ts - Token files: camelCase in
tokens/directory (primitives → semantic → component tiers) - CSS custom properties prefix:
--fa- - Error styling uses copper (#B0610F) not red — this is intentional for grief-sensitive context
- Copy tone: warm but not gushy. Understated empathy. Let UI structure be the empathy.
Token access convention
- Semantic tokens:
theme.palette.*,theme.typography.*,theme.spacing() - Component tokens:
var(--fa-component-property-state) - Never mix — semantic via theme, component via CSS vars
Storybook
Dev server runs on localhost:6006. When verifying components visually, navigate
to the specific story URL. Story IDs follow the pattern:
/story/{tier}-{componentname}--{variantname}
File structure
src/components/atoms/ — Button, Input, Typography, Card, etc.
src/components/molecules/ — SearchBar, PriceCard, ServiceOption, etc.
src/components/organisms/ — Navigation, Footer, ArrangementDialog, etc.
src/components/templates/ — WizardLayout
src/components/pages/ — IntroStep, ProvidersStep, etc. (wizard steps)
tokens/primitives/ — Raw values (hex, px, font names)
tokens/semantic/ — Design intent (color.text.primary)
tokens/component/ — Per-component tokens
When making visual changes
- Make the code change
- Open the Storybook story in the browser to verify
- Screenshot and check spacing, alignment, visual weight
- Self-correct if something looks off before presenting