Every page looks the same. Except yours.

---
version: alpha
name: Woven checkout
description: "Page level exploration for checkout: Checkout woven like a Sadu tent band, Booking flow borrowed from desert modern houses. Does not change the product design system."
colors:
  primary: "#96172c"
  surface: "#efe6d6"
  ink: "#2c3a42"
  accent: "#40627b"
typography:
  display:
    fontFamily: IBM Plex Sans Arabic

<!-- gobanana:woven-checkout -->
## Wild page: Woven checkout

> **Scope: one wild page, not the product design system.** Applies only to: checkout.
> Files: `**/checkout/**`, `**/checkout.*`.
> This inherits the project's own design system and its existing DESIGN.md, and does not change them.
> Tokens here are page level overrides: use them only inside these pages. The full spec lives in `design/explorations/woven-checkout/`.

This section lives between its markers in the project's AGENTS.md and applies only to the files below.

Applies to: `**/checkout/**`, `**/checkout.*` (checkout).

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Page level exploration for checkout: Checkout woven like a Sadu tent band, Booking flow borrowed from desert modern houses. Does not change the product design system.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.588,
          0.09,
          0.173

/* Woven checkout: Tailwind v4 page level overrides.
 * Scope: one wild page, not the product design system. Applies only to: checkout. Inherits the project's own design system and existing DESIGN.md and does not change them. Tokens here are page level overrides.
 * Applies to: **%2Fcheckout/**, **%2Fcheckout.*.
 * Wrap only the wild page in <div data-wild-page="woven-checkout">. Never add these to the global theme.
 * Platform: Any screen. Only colors tagged ship are here.
 * Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@700&family=IBM+Plex+Sans:wght@400;700&display=swap
 * Sources (reference images belong to their owners):
 * 1. Sadu Fabric (behance): https://www.behance.net/gallery/70082187/Sadu-Fabric
 * 2. Fintech App UI – Minimal finance Mobile Apps | Expense apps, by Imrul Kayes (dribbble): https://dribbble.com/shots/26313484-Fintech-App-UI-Minimal-finance-Mobile-Apps-Expense-apps
 * 3. The Full 3D Kaufmann Desert House Archive (behance): https://www.behance.net/gallery/134293871/The-Full-3D-Kaufmann-Desert-House-Archive
 * 4. Flight Booking App UI, by Sujon Hossain (dribbble): https://dribbble.com/shots/26612486-Flight-Booking-App-UI
 */

{
  "title": "Woven checkout",
  "scope": "Scope: one wild page, not the product design system. Applies only to: checkout. Inherits the project's own design system and existing DESIGN.md and does not change them. Tokens here are page level overrides.",
  "coordinates": "items are relative to their section",
  "sections": [
    {
      "title": "Woven progress",
      "x": 0,
      "y": 0,
      "w": 640,
      "h": 520,
      "items": [