DES-02 — Day 2 — Foundations & design tokens
Colour (brand, neutral, semantic, one colour per lifecycle status), typography (Latin + Arabic pairing), spacing, grid, radii, elevation, icons; tokens exported as JSON for Flutter and Tailwind.
| Field | Details |
|---|---|
| Task code | DES-02 |
| Phase | P0 — Foundations (cadrage, UX/UI, architecture & contract) |
| Product scope | V1 |
| Status | Planned |
| Start | Mon 19 Oct 2026 |
| Due | Mon 19 Oct 2026 |
| Responsible | Akram — UI/UX designer |
| Co-responsible | — |
| Effort | 1 person-day(s) planned · 1.25 from scratch · size S |
| Area · app | Design system · design |
| Depends on | DES-01 |
| Unblocks | DES-03, DES-04 |
| Milestones | — |
Summary
Colour (brand, neutral, semantic, one colour per lifecycle status), typography (Latin + Arabic pairing), spacing, grid, radii, elevation, icons; tokens exported as JSON for Flutter and Tailwind.
Description
Day 2 turns the proposed tokens on /docs/design/design-system#tokens into design-system tokens and text styles in Claude Design, and exports them as hoco.tokens.json v0.9 in the W3C DTCG format. Names must be stable from today. Imad's MOB-04 generates Flutter ThemeExtensions (HocoColors, HocoStatusColors, HocoSpacing…) from this file, and Anis's DSH-01 generates the @hoco/ui CSS variables through Style Dictionary and Tailwind @theme inline. After v0.9 only additive changes are allowed until v1.0 (DES-21). Inputs: the design-system token tables, the provisional packages/ui/src/styles/globals.css, the tone of every value in enums.json, NFR-06 (French V1, Arabic RTL prepared) and NFR-07 (contrast). Scope: foundations only; components are DES-03 and DES-04.
Subtasks
| # | Subtask | Owner |
|---|---|---|
| 1 | Primitives: blue, teal, orange and the navy-tinted neutral scales 0–900. Key steps: blue.600 #1D4ED8 primary, teal.700 #0F766E and orange.700 #C2410C for text and fills, neutral.900 #0B1B3F ink, danger #DC2626/#B42318, whatsapp #128C7E | Akram |
| 2 | Semantic roles: primary / on-primary, secondary (teal), accent (orange: offers, count badges, countdown), background #F6F8FB, surface, text primary/secondary/disabled, border subtle/default/strong, input (neutral.400, 3.49:1), focus ring, link, danger, whatsapp, scrim. Each role carries its CSS name (--primary) and its Flutter name (onPrimary) | Akram |
| 3 | Status collection: 8 tones (neutral, info, progress, success, warning, danger, brand, muted) × 4 tokens (bg, fg, border, dot). Map every toned enum value in enums.json to its pill (OrderStatus ×11, TourStatus, VisitStatus, ReturnStatus, TicketStatus, InvoiceStatus, SyncItemResult, StockAvailability, CustomerType: Super-gros brand / Demi-gros info / Détail success) in a legend frame with the French labels | Akram |
| 4 | Data-visualisation colours: the 5-slot categorical order (blue HOCO, orange ACEFAST, teal BOROFONE, violet, pink) plus neutral « Autres », the same slots for the Super-gros / Demi-gros / Détail series, the sequential blue ramp, and a hatched « no data » fill | Akram |
| 5 | Latin typography: Inter 400–700 for UI and numbers (tabular figures) and Plus Jakarta Sans 700/800 for display only. Mobile scale: display, headline, title lg 18/24, md 16/22, sm 14/20, body lg/md/sm (13 px minimum for information), label, price.md/lg, number.kpi. Web scale too. Styles named Mobile/Title/MD | Akram |
| 6 | Arabic typography: IBM Plex Sans Arabic in every role, +1 size up to 16, line height × 1.25, no letter-spacing, no caps. Specimen frame pairing French and Arabic samples (« Valider la commande » / « تأكيد الطلب »). Fonts listed for bundling and subsetting in Flutter | Akram |
| 7 | Spacing and grids: 4-point scale space.0_5…space.16 (16 dp mobile margin, 48 dp touch target, 64 dp bottom nav). Mobile 360×800, 4 columns. Tablet 600 dp+, 8 columns. BO 1440, 12 columns with 24 px gutters, sidebar 256 / rail 72 / drawer below 1024. RW container 1280 with breakpoints 640/768/1024/1280/1536 | Akram |
| 8 | Radii xs 4 · sm 8 · md 12 · lg 16 · xl 24 · full. Elevation 0–3 as ink-tinted shadows. Borders: default 1, strong 2, error 1.5. Focus ring 2 px blue.600 with 2 px offset. Motion fast 100 / base 200 / slow 300 / highlight 600 / shimmer 1 200 ms, with the reduce-motion rule | Akram |
| 9 | Icons frame: Lucide on a 24 grid with 2 px stroke at sizes 16/20/24. Brief the custom icons drawn on the same grid (QR invite, GPS check-in, tour route, after-sales, price lock) and the RTL mirror / no-mirror list | Akram |
| 10 | Contrast table: every text/background pair at 4.5:1 or more, UI boundaries and icons at 3:1 or more, each status fg on its bg (success #15803D on #EFFAF3 = 4.69:1). Flag teal.600 and orange.600 as icons or large text only. Record the date-picker week start day | Akram |
| 11 | Export hoco.tokens.json v0.9 (DTCG $type/$value/$description, {color.blue.600} aliases) from Claude Design and send it to Anis (commit to packages/ui/tokens/, path to confirm) and Imad (packages/hoco_ui/tokens/) | Akram |
| 12 | 15-minute naming review: names map 1:1 to Dart fields (context.hocoColors.status.success.bg, HocoSpacing.s4) and to CSS variables (--status-success-bg, existing shadcn names kept) | Imad |
Deliverables
- Claude Design › Foundations with the frames Colour, Status tones, Typography — Latin, Typography — Arabic, Spacing & grid, Radii & elevation, Icons, Motion
- Design-system tokens in Claude Design (Primitives, Semantic, Status, Spacing, Radius, Elevation) and text styles, used across the whole project
hoco.tokens.jsonv0.9 (W3C DTCG) sent to Imad and Anis, with a changelog entry « v0.9 — initial »- A contrast table covering every text pair and the 8 status tones
Acceptance criteria
- Every token listed on /docs/design/design-system#tokens exists as a token in Claude Design, and no Foundations frame uses a raw hex value
- All 8 tones × 4 tokens exist, and every toned value in enums.json renders as a sample pill with its French label
- Every text pair reaches 4.5:1 or more and every icon or UI boundary 3:1 or more, with the results written in the table
- The Arabic scale applies the documented adjustments, and all three fonts are SIL OFL
- The JSON is valid DTCG, every alias resolves, and the paths mirror the token names in Claude Design (
color/status/success/bg→color.status.success.bg) - Imad and Anis confirm that the file feeds the Dart generator and Style Dictionary without any rename
Requirements covered
| Requirement | Title | Release |
|---|---|---|
| NFR-06 | French in V1; Arabic (RTL) and English prepared from day one | V1 |
| NFR-07 | Accessibility: readable contrast, reachable buttons, consistent text sizes, explicit messages | V1 |
Test measures
- Contrast check (a WCAG contrast checker) run on every pair, with the results pasted in the contrast table
- Anis runs a Style Dictionary dry run and Imad runs a Dart generator prototype on
hoco.tokens.json - Deuteranopia and protanopia simulation on the 8 pills and the data-viz palette: every pill stays identifiable by its text
Risks
- A token renamed after v0.9 breaks MOB-04 and DSH-01 — freeze names today; until v1.0, changes are additive only; later renames are a major version with a changelog.
- The token export from Claude Design does not produce valid DTCG — test it on 5 tokens in the morning; fall back to a hand-maintained JSON checked by a validation script.
KPI
- Delivered by Mon 19 Oct 2026 within 1 person-day(s).
- Every acceptance criterion above demonstrated before hand-off; linked requirements' acceptance criteria pass.
- Zero open critical defects, permission gaps or data-integrity regressions at sign-off.
Generated from content/plan/tasks.json by scripts/generate-team-tasks.mjs. Dates are computed by the scheduler (Sunday–Thursday weeks, holidays excluded) — change the plan, not this page.
DES-01 — Day 1 — Kickoff, reference audit & Claude Design setup
Audit the 16 client reference screens and brand assets, define principles, create the Claude Design project structure, page naming and status conventions.
DES-03 — Day 3 — Mobile component library
Buttons, inputs, selects, steppers, chips, status badges, product/order/visit/KPI cards, list rows, app bars, bottom nav, tabs, sheets, dialogs, snackbars, skeletons, empty/error states.