Files

Richie 732c872576 Initial commit: FA 2.0 Design System foundation

Token pipeline (Style Dictionary v4, DTCG format):
- Primitive tokens: colour palettes (brand, sage, neutral, feedback),
  typography (3 font families, 21-variant type scale), spacing (4px grid),
  border radius, shadows, opacity
- Semantic tokens: text, surface, border, interactive, feedback colours;
  typography roles; layout spacing
- Component tokens: Button (4 sizes), Input (2 sizes)
- Generated outputs: CSS custom properties, JS ES6 module, flat JSON

Atoms (3 components):
- Button: contained/soft/outlined/text × primary/secondary, 4 sizes,
  loading state, underline for text variant
- Typography: 21 variants across display/heading/body/label/caption/overline,
  maxLines truncation
- Input: external label, helper text, error/success validation,
  start/end icons, required indicator, 2 sizes, multiline support

Infrastructure:
- MUI v5 theme with full token mapping
- Storybook 8 with autodocs
- Claude Code agents and skills for token/component workflows
- Design system documentation and cross-session memory

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-25 15:08:15 +11:00

4.5 KiB

Raw Blame History

Component registry

Tracks the status, specification, and key details of every component in the design system. Agents MUST check this before building a component (to avoid duplicates) and MUST update it after completing one.

Status definitions

planned: Component is identified but not yet started
in-progress: Component is being built
review: Component is built, awaiting human review
done: Component is reviewed and approved
needs-revision: Component needs changes based on review feedback

Atoms

Component	Status	Variants	Tokens used	Notes
Button	review	contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth	button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700	Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey.
IconButton	planned	contained, soft, outlined, text × small, medium, large	Reuses Button tokens	Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed.
Typography	review	displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom	typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display	Text display system. Thin MUI wrapper with maxLines truncation.
Input	review	medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline	input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary	External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma.
Badge	planned	default, success, warning, error		Status indicators
Icon	planned	various sizes		Icon wrapper component
Avatar	planned	image, initials, icon × small, medium, large		User/entity representation
Divider	planned	horizontal, vertical		Visual separator
Chip	planned	filled, outlined × deletable, clickable		Tags and filters
Card	planned	elevated, outlined		Content container
Link	planned	default, subtle		Navigation text

Molecules

Component	Status	Composed of	Notes
FormField	planned	Input + Typography (label) + Typography (helper)	Standard form field with label and validation
PriceCard	planned	Card + Typography + Badge + Button	Service pricing display
ServiceOption	planned	Card + Typography + Chip + Icon	Selectable service item
SearchBar	planned	Input + Icon + Button	Search with submit
StepIndicator	planned	Typography + Badge + Divider	Multi-step flow progress

Organisms

Component	Status	Composed of	Notes
ServiceSelector	planned	ServiceOption × n + Typography + Button	Full service selection panel
PricingTable	planned	PriceCard × n + Typography	Comparative pricing display
ArrangementForm	planned	FormField × n + StepIndicator + Button	Multi-step arrangement flow
Navigation	planned	Link × n + Button + Avatar	Site header navigation
Footer	planned	Link × n + Typography + Divider	Site footer

Future enhancements

Deferred items that should be addressed when the relevant components or patterns are needed. Check this section before building new components — an item here may be relevant to your current work.

Item	Relates to	Trigger	Notes
Destructive button colours	Button	When building delete/cancel flows	`color="error"` already works via MUI palette. May need `soft` variant styling for error/warning/success colours.
Link-as-button	Button	When building Navigation or link-heavy pages	Use MUI's `component="a"` or `href` prop. May warrant a separate Link atom or a `Button` story showing the pattern.
IconButton atom	IconButton	When building Navigation, modals, toolbars	Wrap MUI IconButton with FA theme tokens. Registered as planned atom above.
~~Google Fonts loading~~	~~Typography~~	~~Resolved~~	~~Added to .storybook/preview-head.html and index.html~~

4.5 KiB Raw Blame History Unescape Escape