How the first five Design System components map from production's Bootstrap grid to the Tailwind target — the rule, the final live-verified dimensions, the token bindings, and the deviations and open items. Every value here was read back from Figma and confirmed against the live brand sites: live production is the source of truth.
Two behaviours, driven by grid tokens — full-bleed vs contained. Everything else follows.
| Context | Bootstrap (production) | Tailwind (DS target) | Token |
|---|---|---|---|
| Full-bleed canvas | 100vw / ~1170 container | 1280 · 768 · 390 † | layout/breakpoint/min-width (xl·md·xs) |
| Contained content cap | 1170 | 1200 | layout/container/max-width |
| Grid margin (D·T·M) | 15 | 56 · 32 · 16 | layout/grid/margin |
| Gutter | 30 / 15 | 24 · 16 | layout/grid/gutter |
| Columns | 12 | 12 | layout/grid/columns |
Column widths in the 1200 cap (gutter 24): col-5 ≈ 486 · col-6 = 588 · col-7 ≈ 690 · col-8 = 792 · col-10 ≈ 996 · col-12 = 1200.
1280 is not a literal production pixel. Live full-bleed renders at the viewport (1440 on a 1440 screen). We represent the full-bleed canvas at the Tailwind xl breakpoint (1280). On any breakpoint the full-bleed width = that breakpoint's min-width. Content still caps at 1200 inside.
Widths are bound to layout tokens, not hard-coded — so Dev consumes the tokens and the values resolve per breakpoint. No per-component pixel wiring.
Every value below was read back from Figma and confirmed against live production on 8 Jul. fixed = corrected during the verification pass.
| Component | Desktop | Tablet | Mobile | Note |
|---|---|---|---|---|
| Featured Banner — Immersive (Audio/Video/Color/Quote) | 1280†×648 | 768×512 | 390×575 | 648 live-verified |
| Featured Banner — Banner V2 (image) | 1170 / banner 1200 | 738 / 768 | 360 / 390 | fixed was 1088 |
| Quote — frame / copy col | 1280† / 970 | 768 / 615 | 390 / 350 | avatar 72×72 (circular) |
| Hero (Homepage) | 1280†×576 | 768×500 | 390×717 | fixed T was 512 |
| Featured Content — image / content / inset | 483×604 / 677 / 40 | 243×303 / 445 / 20 | 350×437 / 350 / 20 | fixed T inset 32→20 |
| Image Container — img-with-caption (col-6·8·12) | 588 · 792 · 1200 | 340 · 461 · 704 | 358 | Tailwind col widths |
| Image Container — Itinerary image | 620×433 | 478×334 | 293×220 | fixed was 1200×800 |
| Image Container — Highlights carousel | 1200 | 704 | 358 | fixed itin. carousel was 620 |
Highlights carousel cards: standard 570×398 · itinerary 620×433. Featured Content full-width bg = 1280† (content capped 1200). Image Container has a Mode axis (Image with Caption · Image Highlights) — the col-6/8/12 image-with-caption widths are a documented AUGA capability that renders inside carousels in production.
Flagged, not drift — each is a deliberate migration decision.
Design side is small — our components already consume the shared responsive tokens; once TA supplies the values we drop them into the existing token set-up and Dev consumes them, no rebuild our side. The cost is engineering: re-pointing ~133 per-component stylesheet overrides to the shared scale + CJK regression (CN / JP / KR × 3 breakpoints × browsers). That combined scope = the CR — for Varun / Mikul to estimate once the token spec is across.