Skip to main content

WP-11 Stitch design system and kit

Load AGENTS.md, ADR 0012, and this file. Tech specs: api/design-system.md, app/design-system.md, exchange/design-system.md. Implement only when the user asks and WP-00 has landed.

Group G4. May run beside WP-12.

Owns​

  • afia-app/lib/core/theme/
  • afia-app/lib/presentation/kit/
  • afia-app/assets/fonts/
  • afia-app/tool/merge_l10n.py
  • afia-app/pubspec.yaml

Features: F-21 Stitch design system and kit.

The source of tokens is stitch_afia_admin/afia_design_system/DESIGN.md inside AFIA-resources/stitch_afia_admin-1.zip.

Must not write​

  • afia-api
  • Any role presentation folder. Screens belong to WP-13 to WP-16.
  • afia-app/l10n-src/<role>.json. Each screen WP owns its role file.
  • afia-app/lib/l10n/app_*.arb by hand. Only merge_l10n.py writes them.
  • A second HTTP client

Depends on​

WP-00. No API change is needed.

Done when​

  1. AfiaTheme builds a Material 3 ThemeData from the DESIGN.md color tokens. Primary is #003b5a. Primary container is #1a5276. Surface is #f7f9ff.
  2. Headings use Manrope. Body uses Noto Sans. Arabic locales use Noto Sans Arabic. The font files sit under assets/fonts/ and are declared in pubspec.yaml.
  3. Radii are 8 and 12. Card shadow is 0 2px 8px rgba(0,0,0,.08).
  4. pubspec.yaml adds material_symbols_icons. No other new package.
  5. The kit has the widgets the screens repeat: app bar, card, list tile, status chip, primary and secondary buttons, section header, empty state, and bottom bar.
  6. merge_l10n.py reads every l10n-src/*.json and writes lib/l10n/app_en.arb, app_fr.arb, and app_ar.arb. It fails on a duplicate key. Running it twice gives the same output.
  7. Widget tests cover the kit in LTR and RTL.
  8. cd afia-app && flutter test passes.

Do not invent screens​

The kit holds widgets that appear in the Stitch export. Do not add a widget that no in-scope screen.png shows. Do not copy the side-by-side French and Arabic text.