# DESIGN.md — Willow The design contract for every Willow website, app, landing page, email and digital tool. Put this file in the root of any Willow project. It is written for designers, developers and AI coding agents alike: follow it literally, and where it is silent, follow the full guide at **brand.willow.com.pk**. > **Feels like nothing. Lasts like anything.** --- ## 1. Brand in brief Willow makes men's underwear, vests and everyday essentials for Pakistan (launching in Lahore, Karachi and Islamabad/Rawalpindi), expanding into lounge, socks, sleep and active basics. - **Audience:** men 18–34, buying for themselves, two or three pieces at a time, mostly on their phones, arriving from Instagram, Reddit and WhatsApp. Half have never bought underwear online, so trust is the job. - **Promise:** comfort and fit first, fabric second, durability third. Brand name ranks last with customers, so the brand stays quiet and the product proof does the talking. - **Feel:** modern luxury. Calm, soft, spacious, natural. Willow Green and Linen, soft curves, one arch, generous space. - **Never:** loud, discount-driven, cluttered, sexualised, or template-looking. ## 2. Non-negotiables 1. Use the official logo files only (section 13). Never redraw, re-type or recolour the logo. 2. Willow Green `#1C3D30` and Linen `#F3EFE3` fill about 80% of every screen. One supporting colour at a time. Clay is for offers only. 3. Headlines in **Cormorant Garamond 500**, never bold. Body and UI in **Jost**. The tagline is always italic. 4. Every button is a **pill**. Cards and frames are softly rounded. **One arch per view.** Square corners only for full-bleed photos. 5. Text in Willow Green on Linen (or Linen on Willow Green). Near-black only for long body text, prices, tables and legal copy. 6. Mobile first. The primary action is visible without scrolling on a 390px-wide phone. 7. WCAG 2.2 AA: 4.5:1 text contrast, visible focus, 44px touch targets, reduced motion respected. 8. Every product claim is backed by a fact. No exclamation marks, no emoji in brand UI. --- ## 3. Design tokens Copy this block into every project (also downloadable: `brand.willow.com.pk/assets/downloads/willow-tokens.css`, full notes in `willow-tokens.json`). **Use semantic tokens in components**; use `--palette-*` and `--product-*` only for brand graphics and product colour swatches. ```css /* Willow design tokens, edition 1 (September 2026) */ :root, [data-theme="linen"] { /* Semantic colour — light theme (default) */ --surface: #f3efe3; /* page background (Linen) */ --surface-raised: #fbf9f3; /* cards, tiles, panels */ --surface-sunken: #e9e3d3; /* footers, input wells, quiet bands */ --surface-inverse: #1c3d30; /* a green band on a light page */ --ink: #1c3d30; /* headlines, primary text, logo (10.4:1) */ --ink-strong: #131414; /* long body, prices, tables, legal (16:1) */ --ink-muted: #5b6560; /* secondary text, captions (5.3:1) */ --ink-inverse: #f3efe3; /* text on surface-inverse / brand */ --brand: #1c3d30; /* primary buttons, brand fills */ --on-brand: #f3efe3; /* text on brand */ --accent: #c39f73; /* Sand: hairlines, foil, details. Never text on Linen */ --accent-text: #7a5c38; /* sand-toned text (5.4:1) */ --signal: #a8452f; /* offers, launch price, low stock (5.1:1) */ --on-signal: #fbf9f3; --hairline: #c9bfa6; /* decorative dividers and card borders */ --border-strong: #77817b; /* input and control borders (3.5:1) */ --focus: #cc6047; /* focus ring */ /* Brand palette — graphics, packaging, backgrounds */ --palette-willow-green: #1c3d30; --palette-linen: #f3efe3; --palette-chalk: #f6f5f5; --palette-ink: #131414; --palette-charcoal: #323333; --palette-sand: #c39f73; --palette-sage: #829c62; --palette-mist: #bbccba; --palette-clay: #cc6047; --palette-denim: #344b65; /* Product palette — fabric colour swatches only */ --product-jet-black: #131414; /* Core */ --product-chalk-white: #f6f5f5; /* Core */ --product-midnight-navy: #1f2a44; /* Core */ --product-heather-grey: #a7a9ac; /* Core */ --product-stone: #c9b49a; /* Core: skin tone, for under whites */ --product-willow-green: #1c3d30; /* Signature */ --product-charcoal-melange: #4a4c4f; /* Essential */ --product-sky: #a9c1d9; /* Essential */ --product-denim: #344b65; /* Essential */ --product-olive: #5c6b45; /* Seasonal */ --product-oxblood: #5e2229; /* Seasonal */ --product-sage: #829c62; /* Seasonal */ --product-clay: #cc6047; /* Limited */ /* Type */ --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --font-sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif; --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; /* Space */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* Shape */ --radius-none: 0px; /* full-bleed photos, physical box edges only */ --radius-sm: 8px; /* inputs, size selectors, small labels */ --radius-md: 16px; /* cards, product tiles, hang tags, drawers */ --radius-lg: 28px; /* image frames, banners, modals */ --radius-arch: 240px; /* TOP corners only; one per view */ --radius-full: 9999px; /* buttons, swatches, badges, chips */ /* Motion */ --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: 200ms; --dur-base: 350ms; --dur-slow: 500ms; } /* Reversed theme: hero bands, footers, promo sections */ [data-theme="forest"] { --surface: #1c3d30; --surface-raised: #244a3b; --surface-sunken: #132b22; --surface-inverse: #f3efe3; --ink: #f3efe3; --ink-strong: #f6f5f5; --ink-muted: #b9c7bf; --ink-inverse: #1c3d30; --brand: #f3efe3; --on-brand: #1c3d30; --accent: #c39f73; --accent-text: #d8c0a0; --signal: #e8927c; --on-signal: #132b22; --hairline: #3d5a4d; --border-strong: #8fa396; --focus: #e8927c; } ``` Willow has no automatic dark mode. `forest` is a brand theme applied to specific sections (`
`), not a user preference. Don't wire it to `prefers-color-scheme` unless a product explicitly needs a dark mode. ### Tailwind (optional) If a project uses Tailwind, map it to the CSS variables so themes keep working: ```js // tailwind.config.js module.exports = { theme: { colors: { transparent: 'transparent', current: 'currentColor', surface: { DEFAULT: 'var(--surface)', raised: 'var(--surface-raised)', sunken: 'var(--surface-sunken)', inverse: 'var(--surface-inverse)' }, ink: { DEFAULT: 'var(--ink)', strong: 'var(--ink-strong)', muted: 'var(--ink-muted)', inverse: 'var(--ink-inverse)' }, brand: { DEFAULT: 'var(--brand)', on: 'var(--on-brand)' }, accent: { DEFAULT: 'var(--accent)', text: 'var(--accent-text)' }, signal: { DEFAULT: 'var(--signal)', on: 'var(--on-signal)' }, hairline: 'var(--hairline)', 'border-strong': 'var(--border-strong)', focus: 'var(--focus)', palette: { green: '#1c3d30', linen: '#f3efe3', chalk: '#f6f5f5', ink: '#131414', charcoal: '#323333', sand: '#c39f73', sage: '#829c62', mist: '#bbccba', clay: '#cc6047', denim: '#344b65' }, }, fontFamily: { display: ['"Cormorant Garamond"', 'Cormorant', 'Georgia', 'serif'], sans: ['Jost', 'Futura', '"Century Gothic"', '"Helvetica Neue"', 'Arial', 'sans-serif'], urdu: ['"Noto Nastaliq Urdu"', '"Jameel Noori Nastaleeq"', 'serif'], }, borderRadius: { none: '0', sm: '8px', md: '16px', lg: '28px', arch: '240px', full: '9999px' }, extend: { spacing: { 18: '4.5rem', 24: '6rem' }, maxWidth: { prose: '65ch', page: '1200px' }, }, }, }; ``` The arch in Tailwind: `rounded-t-arch rounded-b-none`. Replacing (not extending) `colors` and `borderRadius` is intentional: it stops off-brand defaults like `blue-500` or `rounded-xl` from creeping in. --- ## 4. Typography ### Loading ```html ``` For production shops, self-host the WOFF2 files (faster in Pakistan, no third-party request). ### Scale | Style | Font | Size / line height | Weight | Use | |---|---|---|---|---| | `display-xl` | Cormorant | 64 / 68px (mobile 44 / 48) | 500 | One campaign or hero line per page | | `display-l` | Cormorant | 44 / 50px (mobile 32 / 38) | 500 | Section headlines | | `heading` | Cormorant | 28 / 34px (mobile 24 / 30) | 500 | Product names, card titles | | `tagline` | Cormorant *italic* | 22 / 30px | 500 | The tagline and short sign-offs | | `eyebrow` | Cormorant, UPPERCASE, +0.24em | 13 / 16px | 600 | Small kicker above a hero headline only | | `body-l` | Jost | 18 / 28px | 400 | Intros, product descriptions | | `body` | Jost | 16 / 26px | 400 | Default text | | `small` | Jost | 13 / 20px | 400 | Captions, care notes, footnotes | | `label` | Jost, UPPERCASE, +0.12em | 12 / 16px | 500 | Size, pack, tags | | `button` | Jost, +0.06em | 14 / 20px | 500 | Buttons, action links | | `urdu-body` | Noto Nastaliq Urdu | 18 / 38px | 400 | Urdu copy, `dir="rtl" lang="ur"` | Fluid headlines: `font-size: clamp(44px, 6vw, 64px)` for `display-xl`. ### Rules - Serif speaks, sans informs: feelings in Cormorant, facts (prices, sizes, specs, forms) in Jost. - Headlines at 500. Never bold serif, never all-caps headlines. - Italic only for the tagline and sign-offs, never for emphasis. - Sentence case everywhere ("Find my size"). Uppercase only via the `eyebrow` and `label` styles, and sparingly: one eyebrow per section at most. - Body text left-aligned, max 65 characters per line. Centre only short stacks (logo, tagline, empty states). - Prices in Jost 500, `--ink-strong`, formatted `PKR 2,400` (with a comma, no decimals). --- ## 5. Colour usage - **80 / 10 / 10:** Willow Green + Linen ≈ 80%; one supporting colour (Sand, Sage, Mist or Denim) ≤ 10%; Sand or Clay details the rest. - **Clay (`--signal`)** only for launch prices, offers and low-stock notes, always with a word ("Launch price"), never alone as colour. - **Product colours** appear only as swatches, on product photos and pack shots. Never as a page background or a logo colour. - In hero images and launch pages, lead with Core colours plus Willow Green. Limited colours (Clay) are one small accent, never the loudest thing on screen. - No gradients, except a dark scrim behind text on photos: `linear-gradient(to top, rgba(19,43,34,.72), rgba(19,43,34,0) 60%)`. - No drop shadows for depth. Step between `surface`, `surface-raised` and `surface-sunken`, or use a 1px `hairline`. ### Approved text pairs | Text | On | Ratio | |---|---|---| | `--ink` #1C3D30 | Linen / raised | 10.4 / 11.3 | | `--ink-strong` #131414 | Linen | 16.0 | | `--ink-muted` #5B6560 | Linen / raised | 5.3 / 5.7 | | `--accent-text` #7A5C38 | Linen | 5.4 | | `--signal` #A8452F | Linen | 5.1 | | Linen #F3EFE3 | Willow Green | 10.4 | | Sand #C39F73 | Willow Green | 4.9 | | Linen #F3EFE3 | Denim #344B65 | 7.8 | **Fails, never use for text:** Sand on Linen (2.1), Sage on Linen (2.7), Clay #CC6047 on Linen for small text (3.4; large text and focus rings only). --- ## 6. Shape | Shape | Token | Where | |---|---|---| | Pill | `--radius-full` | Every button, swatch, badge, chip, filter, tab, round sticker | | Arch | `--radius-arch` top corners | One hero image or panel per view | | Soft frame | `--radius-lg` | Photos inside layouts, banners, modals, promo panels | | Soft card | `--radius-md` | Product tiles, cards, drawers, dropdowns, toasts | | Small soft | `--radius-sm` | Inputs, selects, size buttons, small labels | | Square | `--radius-none` | Full-bleed photos only | ```css .arch { border-radius: var(--radius-arch) var(--radius-arch) 0 0; overflow: hidden; } /* For narrow elements the arch radius is half the element's width, e.g. a 320px-wide image: border-radius: 160px 160px 0 0; */ ``` - One arch per view. Don't stack arches in grids. - Elements in the same row share one radius. - Hairlines (1px) instead of heavy borders. --- ## 7. Layout and spacing - **Breakpoints:** `sm 640px`, `md 980px`, `lg 1280px`. Design at 390px first. - **Containers:** page max 1200px; text max 65ch; side padding 24px mobile, 56px desktop. - **Section spacing:** `--space-12` (48px) mobile to `--space-24` (96px) desktop. When unsure, add space. - **Product grids:** 2 columns mobile, 3 tablet, 4 desktop max; gap 16px mobile, 24px desktop. - **One message per screen.** One primary action per view. - 8px rhythm: use only the spacing tokens. - iOS safe areas: `viewport-fit=cover` and `env(safe-area-inset-*)` padding on fixed headers and bottom bars. --- ## 8. Components Build every project from these. Dimensions are minimums. ### Button ```css .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 14px 32px; border-radius: var(--radius-full); font: 500 14px/20px var(--font-sans); letter-spacing: .06em; border: 1px solid var(--brand); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-signal { background: var(--signal); color: var(--on-signal); border-color: var(--signal); } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } ``` - Primary once per view; secondary for everything else; signal only for launch or offer actions. - Labels are verbs that say what happens: "Get early access", "Add 3-pack", "Find my size". No arrows appended, no "Submit", no "Click here". - Full-width on mobile when it is the main action. ### Text input and WhatsApp number (primary signup field) ```html

We'll only message you about your order and launch.

``` ```css .field-label { font: 500 13px/20px var(--font-sans); color: var(--ink); margin-bottom: var(--space-2); display: block; } .phone, .input { display: flex; align-items: center; min-height: 52px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-full); padding: 0 var(--space-6); } .phone-prefix { font: 500 16px var(--font-sans); color: var(--ink-muted); padding-right: var(--space-3); border-right: 1px solid var(--hairline); margin-right: var(--space-3); } .phone input, .input input { flex: 1; border: 0; background: transparent; font: 400 16px var(--font-sans); color: var(--ink-strong); outline: none; } .phone:focus-within, .input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .field-hint { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-2); } .field-error { font: 400 13px/20px var(--font-sans); color: var(--signal); } ``` - Font size ≥ 16px in inputs (prevents iOS zoom). - Accept `03XX…`, `3XX…` or `+923XX…`; normalise to `+923XXXXXXXXX`. - Signup fields are pill-shaped; other form inputs use `--radius-sm`. - Labels always visible; placeholders are examples, not labels. ### Size selector Single-select buttons S / M / L / XL / XXL: 48×48px, `--radius-sm`, 1px `--border-strong`; selected = `--brand` fill and `--on-brand` text, with `aria-pressed="true"`. A "Size guide" text link sits beside it, always. ### Colour swatch 32px circles (`--radius-full`) with a 1px inner `rgba(28,61,48,.14)` ring so light colours show; selected = 2px `--ink` ring with 2px gap. Always show the colour name in text ("Midnight Navy"), never colour alone. ### Product tile ``` ┌──────────────────────┐ radius-md, surface-raised, 1px hairline │ photo (radius-lg) │ 4:5 ratio, product on stone/linen │ │ ├──────────────────────┤ │ Boxer Brief │ heading (Cormorant 500) │ 3-pack PKR 2,400 │ label + price (Jost 500, ink-strong) │ ● ● ● ● +2 │ swatches, max 4 then "+n" └──────────────────────┘ ``` No hover zoom, no wishlist hearts, no rating stars until real reviews exist. Badges ("New colour", "Launch price") are pills, top-left, `label` style. ### Header - Height 64px mobile, 80px desktop; `--surface` at 94% opacity with a backdrop blur, 1px `--hairline` bottom border. - Wordmark left (height 20px mobile, 24px desktop). Never the stacked lockup in a sticky header. - Right: max three links plus cart. On waitlist pages: no navigation links, only social icons. ### Trust bar Four items with line icons: **Cash on delivery · Free exchanges · Discreet packaging · Size guide.** On product pages near the top, on landing pages under the hero. `small` text, `--ink-muted`, icons 20px. ### Proof row Up to four icon + short line pairs from customer pain points: "Stays in place", "Room in front", "Waistband that doesn't roll", "Breathes in the heat". One row per page. ### Card / panel `--surface-raised`, `--radius-md`, 1px `--hairline`, padding 24px (32px desktop). No shadows. ### Toast and messages Pill (`--radius-full`), `--brand` background, `--on-brand` text, bottom centre, auto-hide after 3s, `role="status"`. Errors in forms appear inline under the field, not in toasts. ### Footer `data-theme="forest"`. Stacked lockup (reversed, 96px), the tagline in italic, then links, WhatsApp and social. `small` text. --- ## 9. Imagery and art direction - **Set:** travertine and terrazzo stone, woven baskets, linen, raw wood. Warm daylight with soft leaf shadows. One living branch; two props maximum. - **Shot types:** hero stills on plinths, flat lays from above, folded colour stacks, detail macros (waistband stitch, rib texture, labels), tasteful on-body. - **On-body:** cropped chest to mid-thigh, relaxed posture, a real range of builds and skin tones. Never sexualised. Lead public pages and ads with product stills, flat lays and stacks; keep on-body for product pages and size guides. - **Vests:** show worn under an open shirt or kurta. - **Frames:** hero in the arch; others in `--radius-lg`; full-bleed photos square. - **Text on photos:** only on the dark scrim (section 5). - **Formats:** WebP/AVIF with JPG fallback, `width`/`height` attributes set, `loading="lazy"` below the fold, hero image `fetchpriority="high"`. Hero ≤ 250 KB. - **Before publishing:** check every visible "WILLOW" letter by letter. AI-generated images garble the wordmark; AI images are direction only, never final assets. - **Never:** studio-white e-commerce shots as brand imagery (marketplaces only), gym flexing, oiled skin, lingerie styling, busy patterns, text baked into photos. ## 10. Iconography - Line icons only: 24px grid, **1.5px stroke**, round caps and joins, no fills. - `--ink` on light, `--ink-inverse` on green. Never Sand, Sage or Clay. - 20–32px in UI; never above 48px. - Base set: Phosphor (Light) or Lucide at `stroke-width: 1.5`. One icon set per project. - Always paired with a text label. Max four in a row. No emoji as icons. ## 11. Motion - Quiet: fades and small rises (8–12px), 300–500ms, `--ease-out`. - One orchestrated moment per page (e.g. the hero on load). No scroll-triggered animation on every section, no bounces, no spins, no parallax. - Motion that answers an action is welcome: drawer opening, size selected, added to cart. - Always respect `@media (prefers-reduced-motion: reduce)` by removing non-essential motion. ## 12. Accessibility - Text contrast ≥ 4.5:1 (3:1 for 24px+); control borders and icons ≥ 3:1. Use the approved pairs in section 5. - Visible focus on everything: 2px `--focus` ring, 2px offset. Never `outline: none` without a replacement. - Touch targets ≥ 44×44px; buttons ≥ 48px tall. - Semantic HTML: one `h1` per page, landmarks (`header`, `nav`, `main`, `footer`), real `button` and `a` elements, a "Skip to content" link. - All images have meaningful `alt` text (decorative ones `alt=""`). Logo alt: "Willow". - Never communicate with colour alone (swatches have names, errors have text). - Forms: visible labels, `autocomplete` attributes, inline errors linked with `aria-describedby`. - Test at 200% zoom and at 320px width. --- ## 13. Assets Official files, hosted on the brand site (download the pack for local use): | Asset | File | Use | |---|---|---| | Stacked lockup, green | `/assets/logos/willow-lockup-green.png` | Hero, footer on light, packaging | | Stacked lockup, chalk | `/assets/logos/willow-lockup-chalk.png` | Footer and panels on green | | Wordmark, green | `/assets/logos/willow-wordmark-green.png` | Headers on light | | Wordmark, chalk | `/assets/logos/willow-wordmark-chalk.png` | Headers on green | | Mark, green | `/assets/logos/willow-mark-green.png` | Favicon, avatar, small marks on light | | Mark, chalk | `/assets/logos/willow-mark-chalk.png` | Marks on green, ink or navy | | Mark, sand | `/assets/logos/willow-mark-sand.png` | Premium only, on charcoal, ink or green | | Logo pack | `/assets/downloads/willow-logo-pack.zip` | All of the above | | Tokens | `/assets/downloads/willow-tokens.css`, `.json` | This file's tokens | Base URL: `https://brand.willow.com.pk`. Copy files into each project; don't hotlink from the brand site in production. - **Minimum sizes:** lockup 96px wide, wordmark 72px wide, mark 20px. - **Clear space:** half the mark's diameter on every side. - These are PNGs. Replace with SVG masters in all projects once the designer supplies them. - **Favicon:** the green mark on transparent (32px) and on Linen for `apple-touch-icon` (180px). `theme-color: #1c3d30`. ## 14. Copy and microcopy - **Voice:** calm, short, specific. We say what the fabric does and back it with a fact. Dry humour allowed; innuendo never ("Room in front. No pressure." ✓, "Support where it matters." ✗). - **Brand name:** "Willow" in text; "WILLOW" only in the logo artwork. - **Numbers:** numerals always: 3-pack, 100 washes, PKR 2,400. - **Product names:** Style — Colour: "Boxer Brief — Midnight Navy". - **No:** exclamation marks, emoji, ALL CAPS sentences, "#1", "ultimate", "premium quality", fake urgency timers. | Moment | Write | |---|---| | Primary signup | "Get early access" | | Signup success | "You're on the list. We'll message you on WhatsApp before launch." | | Post-signup question | "One more thing: what size do you usually wear?" | | Invalid number | "Enter a Pakistani mobile number, like 3XX XXXXXXX." | | Add to cart | "Add 3-pack" → toast "Added to your bag" | | Out of stock | "Sold out in M. Get a message when it's back." | | Empty cart | "Your bag is empty. Start with the Boxer Brief 3-pack." | | Error (generic) | "That didn't go through. Check your connection and try again." | | Size help | "Between sizes? Message us on WhatsApp and we'll help you pick." | ## 15. Language and localisation - English is primary. Roman Urdu is fine in WhatsApp, social captions and conversational UI moments ("Size confusion? Humein message karein."). - Urdu script: `lang="ur" dir="rtl"`, `--font-urdu`, line-height ≥ 2. Mirror layout for full Urdu pages; keep numerals and prices in Western digits. - Never translate the tagline inside the logo lockup. All Urdu copy is checked by a native copywriter. - Currency: `PKR` in formal UI, `Rs` acceptable on social. Phone: `+92 3XX XXXXXXX`. ## 16. Technical defaults - ``, ``, ``. - Performance budget: LCP < 2.5s on 4G, total page weight < 1.5 MB on landing pages, fonts with `display=swap`. - Cash on delivery, WhatsApp and exchange information reachable from every commerce page. - Customer-facing sites are indexable; internal tools and the brand site use `noindex, nofollow` (meta tag plus `X-Robots-Tag` header). - Store the WhatsApp number with explicit consent; say what you'll send. --- ## 17. Review checklist Before shipping any Willow screen: - [ ] Only official logo files, correct colourway, clear space and minimum size respected - [ ] Green + Linen ≈ 80%; one supporting colour; Clay only on offers - [ ] Headlines Cormorant 500; UI Jost; tagline italic; no bold serif - [ ] All buttons pills; at most one arch; no square cards; no drop shadows - [ ] Primary action visible on a 390px phone without scrolling - [ ] Contrast, focus rings, 44px targets, alt text, labels checked - [ ] Copy is specific, sentence case, no exclamation marks or emoji - [ ] Every "WILLOW" in imagery spelt correctly; no AI images as final product shots - [ ] Trust bar (COD, exchanges, discreet packaging, size guide) where people buy or sign up - [ ] Reduced motion respected; images optimised; page under budget --- *Willow design system, edition 1 (September 2026). Source of truth: brand.willow.com.pk. When this file and the brand site disagree, the brand site wins; update this file.*