{
  "$description": "Pantri · Hearth design tokens (W3C Design Tokens format). Light is the default; dark is opt-in.",
  "color": {
    "light": {
      "paper": {
        "$type": "color",
        "$value": "#FAF6F0",
        "$description": "Paper: Page background",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface"
          }
        }
      },
      "raised": {
        "$type": "color",
        "$value": "#FFFFFF",
        "$description": "Raised: Rows, sheets, inputs",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface-raised"
          }
        }
      },
      "sunken": {
        "$type": "color",
        "$value": "#F2ECE3",
        "$description": "Sunken: Section heads, sub-bars",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface-sunken"
          }
        }
      },
      "hairline": {
        "$type": "color",
        "$value": "#DED4C6",
        "$description": "Hairline: Row dividers. Decorative only, never the only edge of a control",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-hairline"
          }
        }
      },
      "field-edge": {
        "$type": "color",
        "$value": "#8E8377",
        "$description": "Field edge: Input borders, checkboxes, any edge that must be seen (3:1)",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "ink": {
        "$type": "color",
        "$value": "#1E1914",
        "$description": "Ink: Item names, figures, headings",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink"
          }
        }
      },
      "ink-2": {
        "$type": "color",
        "$value": "#5A5047",
        "$description": "Ink 2: Metadata, ticked rows",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink-secondary"
          }
        }
      },
      "ink-3": {
        "$type": "color",
        "$value": "#6B6157",
        "$description": "Ink 3: Captions, provenance (“Coles, checked 7 Oct”)",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink-tertiary"
          }
        }
      },
      "clay": {
        "$type": "color",
        "$value": "#C4501F",
        "$description": "Clay: The seed, illustration, display type 24px and up. Never small text",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "action": {
        "$type": "color",
        "$value": "#A63E14",
        "$description": "Action: The one primary button per screen, links, active tab",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-action"
          }
        }
      },
      "action-pressed": {
        "$type": "color",
        "$value": "#8A3310",
        "$description": "Action pressed: Pressed state of the primary button",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "on-action": {
        "$type": "color",
        "$value": "#FFFFFF",
        "$description": "On action: Text and icons on an Action fill",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "cocoa": {
        "$type": "color",
        "$value": "#2A211B",
        "$description": "Cocoa: Footer, cookie banner, dark bands",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "saffron": {
        "$type": "color",
        "$value": "#E9B44C",
        "$description": "Saffron: Highlight fills behind ink, illustration. Never text on Paper",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "sage": {
        "$type": "color",
        "$value": "#6F8A5E",
        "$description": "Sage: Illustration only",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "good-price": {
        "$type": "color",
        "$value": "#1F6F43",
        "$description": "Good price: “$1.10 less”, always with words",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-favourable"
          }
        }
      },
      "price-rise": {
        "$type": "color",
        "$value": "#B4342B",
        "$description": "Price rise: “40c more”, errors, always with words",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-unfavourable"
          }
        }
      }
    },
    "dark": {
      "paper": {
        "$type": "color",
        "$value": "#1A1511",
        "$description": "Paper (dark): Page background",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface"
          }
        }
      },
      "raised": {
        "$type": "color",
        "$value": "#241D18",
        "$description": "Raised (dark): Rows, sheets, inputs",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface-raised"
          }
        }
      },
      "sunken": {
        "$type": "color",
        "$value": "#14100D",
        "$description": "Sunken (dark): Section heads, sub-bars",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-surface-sunken"
          }
        }
      },
      "hairline": {
        "$type": "color",
        "$value": "#3A3029",
        "$description": "Hairline (dark): Row dividers. Decorative only, never the only edge of a control",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-hairline"
          }
        }
      },
      "field-edge": {
        "$type": "color",
        "$value": "#8F8274",
        "$description": "Field edge (dark): Input borders, checkboxes, any edge that must be seen (3:1)",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "ink": {
        "$type": "color",
        "$value": "#F6EFE6",
        "$description": "Ink (dark): Item names, figures, headings",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink"
          }
        }
      },
      "ink-2": {
        "$type": "color",
        "$value": "#C9BDB0",
        "$description": "Ink 2 (dark): Metadata, ticked rows",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink-secondary"
          }
        }
      },
      "ink-3": {
        "$type": "color",
        "$value": "#A89B8C",
        "$description": "Ink 3 (dark): Captions, provenance (“Coles, checked 7 Oct”)",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-ink-tertiary"
          }
        }
      },
      "clay": {
        "$type": "color",
        "$value": "#E2703F",
        "$description": "Clay (dark): The seed, illustration, display type 24px and up. Never small text",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "action": {
        "$type": "color",
        "$value": "#EE8A5C",
        "$description": "Action (dark): The one primary button per screen, links, active tab",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-action"
          }
        }
      },
      "action-pressed": {
        "$type": "color",
        "$value": "#F4A27C",
        "$description": "Action pressed (dark): Pressed state of the primary button",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "on-action": {
        "$type": "color",
        "$value": "#1E1914",
        "$description": "On action (dark): Text and icons on an Action fill",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "cocoa": {
        "$type": "color",
        "$value": "#0F0C0A",
        "$description": "Cocoa (dark): Footer, cookie banner, dark bands",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "saffron": {
        "$type": "color",
        "$value": "#E9B44C",
        "$description": "Saffron (dark): Highlight fills behind ink, illustration. Never text on Paper",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "sage": {
        "$type": "color",
        "$value": "#7E9A6C",
        "$description": "Sage (dark): Illustration only",
        "$extensions": {
          "app.pantri": {
            "v2Token": null,
            "note": "new in Hearth"
          }
        }
      },
      "good-price": {
        "$type": "color",
        "$value": "#5CC48A",
        "$description": "Good price (dark): “$1.10 less”, always with words",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-favourable"
          }
        }
      },
      "price-rise": {
        "$type": "color",
        "$value": "#F08A80",
        "$description": "Price rise (dark): “40c more”, errors, always with words",
        "$extensions": {
          "app.pantri": {
            "v2Token": "--v2-unfavourable"
          }
        }
      }
    }
  },
  "retailer": {
    "light": {
      "coles": {
        "$type": "color",
        "$value": "#C5141A",
        "$description": "Coles: a 3px rule plus the name. Never a crest, badge or filled chip."
      },
      "woolworths": {
        "$type": "color",
        "$value": "#0B7A35",
        "$description": "Woolworths: a 3px rule plus the name. Never a crest, badge or filled chip."
      },
      "aldi": {
        "$type": "color",
        "$value": "#0B57B0",
        "$description": "ALDI: a 3px rule plus the name. Never a crest, badge or filled chip."
      }
    },
    "dark": {
      "coles": {
        "$type": "color",
        "$value": "#F2666B",
        "$description": "Coles (dark)"
      },
      "woolworths": {
        "$type": "color",
        "$value": "#3FC46B",
        "$description": "Woolworths (dark)"
      },
      "aldi": {
        "$type": "color",
        "$value": "#5A9BE8",
        "$description": "ALDI (dark)"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Fraunces",
          "Georgia",
          "serif"
        ],
        "$description": "Fraunces, variable axes opsz 72, SOFT 100, WONK 0"
      },
      "sans": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "system-ui",
          "sans-serif"
        ]
      }
    },
    "feature": {
      "figures": {
        "$type": "other",
        "$value": "tabular-nums lining-nums"
      }
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Fraunces",
        "fontSize": "44px",
        "lineHeight": "46px",
        "fontWeight": 600
      },
      "$description": "Display. Landing hero, brand pages. opsz 72, SOFT 100, −0.025em"
    },
    "h1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Fraunces",
        "fontSize": "32px",
        "lineHeight": "36px",
        "fontWeight": 600
      },
      "$description": "H1. Page and section headlines. opsz 72, SOFT 100, −0.02em"
    },
    "screen-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Fraunces",
        "fontSize": "26px",
        "lineHeight": "30px",
        "fontWeight": 600
      },
      "$description": "Screen title. The title at the top of each app screen. opsz 48, SOFT 100, −0.015em"
    },
    "row-name": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "17px",
        "lineHeight": "22px",
        "fontWeight": 600
      },
      "$description": "Row name. Item, meal and store names. 18/700 in dark mode"
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "lineHeight": "24px",
        "fontWeight": 400
      },
      "$description": "Body. Paragraphs, sheets, landing copy."
    },
    "figure": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "17px",
        "lineHeight": "22px",
        "fontWeight": 600,
        "fontVariantNumeric": "tabular-nums lining-nums"
      },
      "$description": "Figure. Prices, quantities, totals. tabular-nums lining-nums"
    },
    "meta": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "13px",
        "lineHeight": "18px",
        "fontWeight": 400
      },
      "$description": "Meta. Metadata, provenance, unit prices."
    },
    "label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "11px",
        "lineHeight": "14px",
        "fontWeight": 600,
        "letterSpacing": "0.08em",
        "textTransform": "uppercase"
      },
      "$description": "Label. Section heads only. uppercase, +0.08em"
    }
  },
  "space": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    }
  },
  "radius": {
    "none": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "Rows, section heads, full-bleed bars"
    },
    "sm": {
      "$type": "dimension",
      "$value": "6px",
      "$description": "Checkboxes, small tags"
    },
    "md": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Buttons, inputs, cookie banner"
    },
    "lg": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "Sheet top corners, phone frames in marketing"
    },
    "pill": {
      "$type": "dimension",
      "$value": "999px",
      "$description": "“Your shop” marker only"
    },
    "icon": {
      "$type": "dimension",
      "$value": "22.37%",
      "$description": "App icon (iOS squircle approximation)"
    }
  },
  "duration": {
    "row": {
      "$type": "duration",
      "$value": "120ms",
      "$description": "Row state change: tick, press"
    },
    "sheet": {
      "$type": "duration",
      "$value": "220ms",
      "$description": "Sheet open and close"
    },
    "section": {
      "$type": "duration",
      "$value": "300ms",
      "$description": "Section collapse and expand"
    },
    "hero": {
      "$type": "duration",
      "$value": "400ms",
      "$description": "Landing hero fade, once per page load"
    }
  },
  "easing": {
    "hearth": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0.8,
        0.2,
        1
      ]
    }
  },
  "size": {
    "row-min-height": {
      "$type": "dimension",
      "$value": "64px"
    },
    "tap-min": {
      "$type": "dimension",
      "$value": "44px"
    },
    "retailer-rule": {
      "$type": "dimension",
      "$value": "3px"
    },
    "hairline": {
      "$type": "dimension",
      "$value": "1px"
    },
    "gutter": {
      "$type": "dimension",
      "$value": "20px"
    }
  },
  "contrast": {
    "light": [
      {
        "fg": "#1E1914",
        "bg": "#FAF6F0",
        "label": "Ink on Paper",
        "ratio": 16.2,
        "kind": "text"
      },
      {
        "fg": "#5A5047",
        "bg": "#FAF6F0",
        "label": "Ink 2 on Paper",
        "ratio": 7.3,
        "kind": "text"
      },
      {
        "fg": "#6B6157",
        "bg": "#FAF6F0",
        "label": "Ink 3 on Paper",
        "ratio": 5.62,
        "kind": "text"
      },
      {
        "fg": "#6B6157",
        "bg": "#FFFFFF",
        "label": "Ink 3 on Raised",
        "ratio": 6.05,
        "kind": "text"
      },
      {
        "fg": "#6B6157",
        "bg": "#F2ECE3",
        "label": "Ink 3 on Sunken",
        "ratio": 5.15,
        "kind": "text"
      },
      {
        "fg": "#FFFFFF",
        "bg": "#A63E14",
        "label": "White on Action (button)",
        "ratio": 6.32,
        "kind": "text"
      },
      {
        "fg": "#FFFFFF",
        "bg": "#8A3310",
        "label": "White on Action pressed",
        "ratio": 8.2,
        "kind": "text"
      },
      {
        "fg": "#A63E14",
        "bg": "#FAF6F0",
        "label": "Action link on Paper",
        "ratio": 5.87,
        "kind": "text"
      },
      {
        "fg": "#A63E14",
        "bg": "#FFFFFF",
        "label": "Action link on Raised",
        "ratio": 6.32,
        "kind": "text"
      },
      {
        "fg": "#C4501F",
        "bg": "#FAF6F0",
        "label": "Clay on Paper (display only)",
        "ratio": 4.32,
        "kind": "large"
      },
      {
        "fg": "#FAF6F0",
        "bg": "#2A211B",
        "label": "Paper on Cocoa",
        "ratio": 14.65,
        "kind": "text"
      },
      {
        "fg": "#E9B44C",
        "bg": "#2A211B",
        "label": "Saffron on Cocoa",
        "ratio": 8.33,
        "kind": "text"
      },
      {
        "fg": "#1E1914",
        "bg": "#E9B44C",
        "label": "Ink on Saffron",
        "ratio": 9.21,
        "kind": "text"
      },
      {
        "fg": "#8E8377",
        "bg": "#FFFFFF",
        "label": "Field edge on Raised",
        "ratio": 3.71,
        "kind": "ui"
      },
      {
        "fg": "#1F6F43",
        "bg": "#FFFFFF",
        "label": "Good price on Raised",
        "ratio": 6.15,
        "kind": "text"
      },
      {
        "fg": "#B4342B",
        "bg": "#FFFFFF",
        "label": "Price rise on Raised",
        "ratio": 6.06,
        "kind": "text"
      },
      {
        "fg": "#C5141A",
        "bg": "#FFFFFF",
        "label": "Coles rule on Raised",
        "ratio": 6.02,
        "kind": "ui"
      },
      {
        "fg": "#0B7A35",
        "bg": "#FFFFFF",
        "label": "Woolworths rule on Raised",
        "ratio": 5.46,
        "kind": "ui"
      },
      {
        "fg": "#0B57B0",
        "bg": "#FFFFFF",
        "label": "ALDI rule on Raised",
        "ratio": 6.99,
        "kind": "ui"
      },
      {
        "fg": "#DED4C6",
        "bg": "#FAF6F0",
        "label": "Hairline on Paper",
        "ratio": 1.36,
        "kind": "deco"
      },
      {
        "fg": "#E9B44C",
        "bg": "#FAF6F0",
        "label": "Saffron on Paper",
        "ratio": 1.76,
        "kind": "deco"
      }
    ],
    "dark": [
      {
        "fg": "#F6EFE6",
        "bg": "#1A1511",
        "label": "Ink on Paper",
        "ratio": 15.88,
        "kind": "text"
      },
      {
        "fg": "#C9BDB0",
        "bg": "#1A1511",
        "label": "Ink 2 on Paper",
        "ratio": 9.82,
        "kind": "text"
      },
      {
        "fg": "#A89B8C",
        "bg": "#241D18",
        "label": "Ink 3 on Raised",
        "ratio": 6.12,
        "kind": "text"
      },
      {
        "fg": "#1E1914",
        "bg": "#EE8A5C",
        "label": "Ink on Action (button)",
        "ratio": 7.0,
        "kind": "text"
      },
      {
        "fg": "#EE8A5C",
        "bg": "#1A1511",
        "label": "Action link on Paper",
        "ratio": 7.27,
        "kind": "text"
      },
      {
        "fg": "#E2703F",
        "bg": "#1A1511",
        "label": "Clay on Paper (display)",
        "ratio": 5.71,
        "kind": "large"
      },
      {
        "fg": "#8F8274",
        "bg": "#241D18",
        "label": "Field edge on Raised",
        "ratio": 4.44,
        "kind": "ui"
      },
      {
        "fg": "#5CC48A",
        "bg": "#241D18",
        "label": "Good price on Raised",
        "ratio": 7.69,
        "kind": "text"
      },
      {
        "fg": "#F08A80",
        "bg": "#241D18",
        "label": "Price rise on Raised",
        "ratio": 6.85,
        "kind": "text"
      },
      {
        "fg": "#F2666B",
        "bg": "#241D18",
        "label": "Coles on Raised",
        "ratio": 5.45,
        "kind": "text"
      },
      {
        "fg": "#3FC46B",
        "bg": "#241D18",
        "label": "Woolworths on Raised",
        "ratio": 7.37,
        "kind": "text"
      },
      {
        "fg": "#5A9BE8",
        "bg": "#241D18",
        "label": "ALDI on Raised",
        "ratio": 5.77,
        "kind": "text"
      },
      {
        "fg": "#3A3029",
        "bg": "#1A1511",
        "label": "Hairline on Paper",
        "ratio": 1.41,
        "kind": "deco"
      }
    ]
  }
}