{
  "name": "Willow",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "linen",
        "name": "Linen (light)"
      },
      {
        "id": "forest",
        "name": "Forest (reversed)"
      }
    ],
    "tokens": [
      {
        "name": "surface",
        "value": {
          "linen": "#f3efe3",
          "forest": "#1c3d30"
        },
        "usage": "Default ground: Linen on the light theme, Willow Green on the reversed theme. Packaging interiors, web pages, social backgrounds."
      },
      {
        "name": "surface-raised",
        "value": {
          "linen": "#fbf9f3",
          "forest": "#244a3b"
        },
        "usage": "Cards, product tiles and panels sitting on surface."
      },
      {
        "name": "surface-sunken",
        "value": {
          "linen": "#e9e3d3",
          "forest": "#132b22"
        },
        "usage": "Footers, input wells, quiet bands that sit below surface."
      },
      {
        "name": "surface-inverse",
        "value": {
          "linen": "#1c3d30",
          "forest": "#f3efe3"
        },
        "usage": "A full-bleed band in the opposite theme (e.g. a green strip on a Linen page). Text on it uses ink-inverse."
      },
      {
        "name": "ink",
        "value": {
          "linen": "#1c3d30",
          "forest": "#f3efe3"
        },
        "usage": "Primary text, headlines and the logo. Willow Green on surface/surface-raised in Linen (10.4:1), Linen on surface/surface-raised in Forest (10.4:1+). Willow sets type in green, not black."
      },
      {
        "name": "ink-strong",
        "value": {
          "linen": "#131414",
          "forest": "#f6f5f5"
        },
        "usage": "Long body copy, legal text, size charts and prices where maximum legibility matters, on any surface token (16:1 Linen, 11:1 Forest)."
      },
      {
        "name": "ink-muted",
        "value": {
          "linen": "#5b6560",
          "forest": "#b9c7bf"
        },
        "usage": "Secondary text, captions, helper text on surface and surface-raised in both themes (5.3:1 / 5.7:1 minimum)."
      },
      {
        "name": "ink-inverse",
        "value": {
          "linen": "#f3efe3",
          "forest": "#1c3d30"
        },
        "usage": "Text and logo on surface-inverse and on brand fills."
      },
      {
        "name": "brand",
        "value": {
          "linen": "#1c3d30",
          "forest": "#f3efe3"
        },
        "usage": "Primary buttons, waistbands, hang tags, box lids, stickers. Text on it is on-brand."
      },
      {
        "name": "on-brand",
        "value": {
          "linen": "#f3efe3",
          "forest": "#1c3d30"
        },
        "usage": "Text and marks placed on a brand fill (10.4:1 both themes)."
      },
      {
        "name": "accent",
        "value": {
          "linen": "#c39f73",
          "forest": "#c39f73"
        },
        "usage": "Sand: foil/emboss colour for the mark on premium packaging, hairline dividers, small decorative moments. Never text on Linen (2.1:1). On Willow Green it reads at 4.9:1, fine for text of any size."
      },
      {
        "name": "accent-text",
        "value": {
          "linen": "#7a5c38",
          "forest": "#d8c0a0"
        },
        "usage": "Sand-toned text (eyebrows, 'New colour' labels) on surface and surface-raised: 5.4:1 Linen, 8.6:1 Forest."
      },
      {
        "name": "signal",
        "value": {
          "linen": "#a8452f",
          "forest": "#e8927c"
        },
        "usage": "Clay for offers, launch prices and low-stock notes only, always paired with a word (e.g. 'Launch price'). Text on surface: 5.1:1 Linen, 6.3:1 Forest."
      },
      {
        "name": "on-signal",
        "value": {
          "linen": "#fbf9f3",
          "forest": "#132b22"
        },
        "usage": "Text on a signal fill (offer badge)."
      },
      {
        "name": "hairline",
        "value": {
          "linen": "#c9bfa6",
          "forest": "#3d5a4d"
        },
        "usage": "Decorative dividers, the stitch line on waistbands, card borders that carry no meaning."
      },
      {
        "name": "border-strong",
        "value": {
          "linen": "#77817b",
          "forest": "#8fa396"
        },
        "usage": "Input and control borders that must be seen: 3.5:1 on surface and 3.8:1 on surface-raised (Linen), 4.5:1 on surface (Forest)."
      },
      {
        "name": "focus",
        "value": {
          "linen": "#cc6047",
          "forest": "#e8927c"
        },
        "usage": "Keyboard focus ring: 2px solid, 2px offset. 3.4:1 on Linen, 6.3:1 on Forest."
      },
      {
        "name": "palette-willow-green",
        "value": "#1c3d30",
        "usage": "Brand hero colour. Logo, waistbands, bags, hang tags, box bases. Roughly 40% of any brand layout."
      },
      {
        "name": "palette-linen",
        "value": "#f3efe3",
        "usage": "Brand cream. Box lids, backgrounds, reversed logo on green, tissue base. Roughly 40% of any brand layout."
      },
      {
        "name": "palette-chalk",
        "value": "#f6f5f5",
        "usage": "Cool off-white. Logo reversed on green or black product, digital backgrounds needing a cleaner white."
      },
      {
        "name": "palette-ink",
        "value": "#131414",
        "usage": "Near-black. Black packaging variant, small text, black product waistbands."
      },
      {
        "name": "palette-charcoal",
        "value": "#323333",
        "usage": "Soft black for dark backgrounds carrying the Sand mark (5.2:1)."
      },
      {
        "name": "palette-sand",
        "value": "#c39f73",
        "usage": "Warm neutral / gold. Foil mark, Kraft-style box variant, hairlines. Accent only, max ~10%."
      },
      {
        "name": "palette-sage",
        "value": "#829c62",
        "usage": "Supporting green for seasonal drops, illustration and social backgrounds. Never for text on Linen (2.7:1)."
      },
      {
        "name": "palette-mist",
        "value": "#bbccba",
        "usage": "Pale sage. Tissue-paper print, soft backgrounds, size-chart table stripes. Green text on it is 7.1:1."
      },
      {
        "name": "palette-clay",
        "value": "#cc6047",
        "usage": "Terracotta. Signal colour for launches and offers; limited-edition product. Max ~5% of a layout."
      },
      {
        "name": "palette-denim",
        "value": "#344b65",
        "usage": "Supporting blue. Striped boxer programme, secondary social backgrounds; Linen text on it is 7.8:1."
      },
      {
        "name": "product-jet-black",
        "value": "{palette-ink}",
        "usage": "Core colourway. Best-seller in every style; waistband in Willow Green or Chalk text."
      },
      {
        "name": "product-chalk-white",
        "value": "{palette-chalk}",
        "usage": "Core colourway. Classic briefs, vests, trunks; waistband Chalk with Willow Green text."
      },
      {
        "name": "product-midnight-navy",
        "value": "#1f2a44",
        "usage": "Core colourway. The everyday dark alternative to black."
      },
      {
        "name": "product-heather-grey",
        "value": "#a7a9ac",
        "usage": "Core colourway (grey melange). Trunks, boxer briefs, vests, lounge."
      },
      {
        "name": "product-stone",
        "value": "#c9b49a",
        "usage": "Core colourway. Skin-tone shade meant to disappear under white and light shalwar kameez and shirts. Vests and trunks."
      },
      {
        "name": "product-willow-green",
        "value": "{palette-willow-green}",
        "usage": "Signature colourway. Always available in the hero style (boxer brief)."
      },
      {
        "name": "product-charcoal-melange",
        "value": "#4a4c4f",
        "usage": "Essential colourway. Dark grey melange for trunks and lounge."
      },
      {
        "name": "product-sky",
        "value": "#a9c1d9",
        "usage": "Essential colourway. Light blue for loose boxers, stripes and vests."
      },
      {
        "name": "product-denim",
        "value": "{palette-denim}",
        "usage": "Essential colourway. Solid and pinstripe loose boxers."
      },
      {
        "name": "product-olive",
        "value": "#5c6b45",
        "usage": "Seasonal colourway. Autumn/winter drops."
      },
      {
        "name": "product-oxblood",
        "value": "#5e2229",
        "usage": "Seasonal colourway. Eid and winter gifting packs."
      },
      {
        "name": "product-sage",
        "value": "{palette-sage}",
        "usage": "Seasonal colourway. Spring/summer drops."
      },
      {
        "name": "product-clay",
        "value": "{palette-clay}",
        "usage": "Limited colourway only. One drop per year, never core."
      }
    ]
  },
  "type": {
    "families": {
      "display": "\"Cormorant Garamond\", \"Cormorant\", Georgia, \"Times New Roman\", serif",
      "sans": "\"Jost\", \"Futura\", \"Century Gothic\", \"Helvetica Neue\", Arial, sans-serif",
      "urdu": "\"Noto Nastaliq Urdu\", \"Jameel Noori Nastaleeq\", serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display-xl",
            "fontSize": "64px",
            "lineHeight": "68px",
            "fontWeight": 500,
            "letterSpacing": "-0.01em",
            "sample": "Feels like nothing.",
            "usage": "Campaign headlines, hero banners, box lids. One per layout."
          },
          {
            "name": "display-l",
            "fontSize": "44px",
            "lineHeight": "50px",
            "fontWeight": 500,
            "sample": "Made for 40 degrees.",
            "usage": "Section headlines on web and social."
          },
          {
            "name": "heading",
            "fontSize": "28px",
            "lineHeight": "34px",
            "fontWeight": 500,
            "sample": "Boxer Brief",
            "usage": "Product names, card titles. Medium weight keeps it light and premium; never bold."
          },
          {
            "name": "tagline",
            "fontSize": "22px",
            "lineHeight": "30px",
            "fontWeight": 500,
            "fontStyle": "italic",
            "sample": "Feels like nothing. Lasts like anything.",
            "usage": "The tagline and short italic sign-offs. Always italic, always two sentences on two lines where space allows."
          },
          {
            "name": "eyebrow",
            "fontSize": "13px",
            "lineHeight": "16px",
            "fontWeight": 600,
            "letterSpacing": "0.24em",
            "sample": "BOXER BRIEFS",
            "usage": "Spaced capitals for product-type labels, box sides, section kickers. Uppercase via text-transform."
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "body-l",
            "fontSize": "18px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "sample": "Soft cotton-modal that breathes through a Lahore summer.",
            "usage": "Intro paragraphs, product descriptions."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": "26px",
            "fontWeight": 400,
            "sample": "Waistband holds its shape after 100 washes.",
            "usage": "Default running text."
          },
          {
            "name": "small",
            "fontSize": "13px",
            "lineHeight": "20px",
            "fontWeight": 400,
            "sample": "Cash on delivery across Pakistan.",
            "usage": "Captions, care notes, footnotes."
          },
          {
            "name": "label",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 500,
            "letterSpacing": "0.12em",
            "sample": "SIZE M · 3-PACK",
            "usage": "UI labels, tags, size and pack info. Uppercase."
          },
          {
            "name": "button",
            "fontSize": "14px",
            "lineHeight": "20px",
            "fontWeight": 500,
            "letterSpacing": "0.06em",
            "sample": "Find my size",
            "usage": "Buttons and links-as-actions."
          }
        ]
      },
      {
        "name": "Urdu",
        "family": "urdu",
        "styles": [
          {
            "name": "urdu-body",
            "fontSize": "18px",
            "lineHeight": "38px",
            "fontWeight": 400,
            "sample": "پہن کر بھول جائیں",
            "usage": "Urdu copy on packaging inserts, social and WhatsApp creatives. Nastaliq needs generous leading."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Icon-to-text gaps, tight label padding."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Inline gaps, chip padding."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Button vertical padding, list gaps."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Card padding on mobile, form field gaps."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Card padding on desktop, gutters."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Between related blocks."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Section spacing on mobile."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Section spacing on desktop; outer margin of packaging artwork."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "Hero breathing room. Willow layouts are generous: when in doubt, add space."
      }
    ]
  },
  "radius": {
    "note": "Soft, modern luxury: pill actions, softly rounded cards, arched image frames. Hard square corners only where the physical object is square.",
    "tokens": [
      {
        "name": "radius-none",
        "value": "0",
        "usage": "Only full-bleed photography and the physical edges of boxes and bags. Never on buttons, cards or tags."
      },
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Inputs, size selectors, chips, small labels and woven-label graphics."
      },
      {
        "name": "radius-md",
        "value": "16px",
        "usage": "Product tiles, cards, hang tags, insert cards, dropdowns and drawers."
      },
      {
        "name": "radius-lg",
        "value": "28px",
        "usage": "Image frames inside a layout, banners, modals, social post panels, large colour blocks."
      },
      {
        "name": "radius-arch",
        "value": "240px",
        "usage": "Arch frames: apply to the TOP-LEFT and TOP-RIGHT corners only of portrait images and hero panels (border-radius: 240px 240px 0 0; for panels narrower than 480px use half the width). The signature Willow shape, echoing the curve of the mark; max one arch per view."
      },
      {
        "name": "radius-full",
        "value": "9999px",
        "usage": "All buttons (pill), colour swatches, round stickers, badges and the mark's circle."
      }
    ]
  },
  "logo": {
    "note": "Minimum sizes and clear space for the Willow marks.",
    "tokens": [
      {
        "name": "logo-min-lockup",
        "value": "96px",
        "usage": "Stacked lockup minimum width on screen (25mm in print)."
      },
      {
        "name": "logo-min-wordmark",
        "value": "72px",
        "usage": "Wordmark minimum width on screen (18mm in print; 12mm on woven labels)."
      },
      {
        "name": "logo-min-mark",
        "value": "20px",
        "usage": "Mark minimum diameter on screen (6mm in print; 8mm when embroidered or jacquard-woven)."
      },
      {
        "name": "logo-clearspace",
        "value": "0.5",
        "usage": "Clear space on every side = half the mark's diameter (the height of the 'W' in the wordmark-only version)."
      }
    ]
  }
}