--- version: alpha name: "Amazon" description: "Amazon's storefront is the canonical \"everything store\" — a near-clinical white canvas (`#ffffff`) crowded with product tiles, anchored on a deep-navy chrome (`#131921` masthead, `#232f3e` sub-nav), and accented by the unmistakable smile-orange CTA (`#ff9900`). Type runs Amazon Ember, a custom Plex-adjacent sans, at modest weights with utilitarian sizing — function over flourish. Every interactive surface is rounded a humble 4–8px, every CTA wears the orange→yellow gradient (`#ffd814` → `#ffa41c`) with a 1px `#fcd200` outline. The result is unfashionable, unapologetic, and ruthlessly optimised: a UI that has prioritised conversion over aesthetic for two decades and shows it." colors: bg: "#ffffff" bg-page: "#eaeded" surface: "#ffffff" surface-soft: "#f7f8f8" surface-strong: "#f0f2f2" surface-yellow: "#fef8e8" masthead: "#131921" masthead-sub: "#232f3e" masthead-hover: "#37475a" text: "#0f1111" text-strong: "#0f1111" text-link: "#007185" text-link-hover: "#c45500" text-muted: "#565959" text-soft: "#6f7373" text-on-dark: "#ffffff" text-on-dark-muted: "#cccccc" brand: "#ff9900" brand-cta-top: "#ffd814" brand-cta-bottom: "#ffa41c" brand-cta-border: "#fcd200" brand-cta-hover: "#f7ca00" buy-now: "#ffa41c" buy-now-hover: "#fa8900" border: "#d5d9d9" border-strong: "#888c8c" border-soft: "#e7e7e7" border-input: "#a6a6a6" prime-blue: "#00a8e1" prime-deep: "#146eb4" rating-orange: "#ffa41c" rating-empty: "#d5d9d9" price: "#0f1111" price-deal: "#cc0c39" savings: "#cc0c39" warehouse-deal: "#007600" in-stock: "#007600" shipping-soon: "#b12704" scrim: "rgba(15,17,17,0.7)" shadow-card: "rgba(0,0,0,0.05)" shadow-elev: "rgba(0,0,0,0.15)" success: "#007600" warning: "#b66719" warning-soft: "#fff3e0" danger: "#b12704" info: "#007185" typography: display: fontFamily: "Amazon Ember" fontSize: "72px" lineHeight: 1.43 letterSpacing: "-0.025em" body: fontFamily: "Amazon Ember" fontSize: "14px" lineHeight: 1.43 mono: fontFamily: "Monaco" rounded: button: "7px" card: "8px" pill: "9999px" spacing: xs: "2px" sm: "4px" md: "8px" lg: "14px" xl: "22px" --- ## Overview ## Overview Amazon's storefront is the canonical "everything store" interface — a near-clinical white canvas (`#ffffff`) crowded with product tiles, anchored on a deep squid-ink navy chrome (`#131921` for the masthead, `#232f3e` for the sub-nav band), and accented by the unmistakable smile-orange (`#ff9900`) reserved for high-value affordances. The page hums with information density: dozens of product tiles per scroll, breadcrumb trails, ratings, prices, "FREE delivery by Tuesday" lines, Prime checkmarks, and red-orange deal ribbons all competing for attention. Type runs **Amazon Ember**, a humanist sans Amazon commissioned in 2014 (Joe Leonard / Dalton Maag) that sits stylistically near IBM Plex and Source Sans — open apertures, a slightly squared geometry, and a working-text neutrality that disappears into the page. Headlines run modest 21–28px at 700; product titles render at 14–18px regular; nothing shouts. Hierarchy emerges from layout density, not type weight. The chromatic identity is split. The **brand orange** (`#ff9900`, the smile arrow on the wordmark) almost never appears as a flat fill in product UI — it's reserved for the wordmark, "Best Seller" ribbons, and star-rating glyphs. The **CTA system** uses a distinctive **yellow→orange gradient** (`#ffd814` top, `#ffa41c` bottom) with a 1px `#fcd200` border — Amazon's "Add to Cart" button, the most-clicked button on the internet, has retained this gradient for over 15 years and refuses to flatten. Beneath it, **Buy Now** sits in solid orange (`#ffa41c`). Links are the second signature: a teal (`#007185`) that becomes rust-orange (`#c45500`) on hover. This colour pair is unmistakably Amazon — no competitor uses it, and changing it on a third-party site reads as a counterfeit storefront. Prime gets its own blue (`#00a8e1`), used only for Prime-coded affordances (Prime checkmark, Prime delivery banner, Try Prime CTA). Shape language is humble: 4–7px radius across the board, with the CTA's quirky **7px** (not 8) being a long-standing oddity. Cards and tiles round at 8px. There are no pills, no fully-rounded buttons in the storefront; every clickable surface lands somewhere in the 2–8px band. Shadows are flat by default — emphasis comes from the navy masthead, the orange CTA, and the product image, not from elevation. **Key Characteristics:** - Smile-orange `#ff9900` reserved for wordmark, Best Seller ribbons, and star ratings — never as page background - Yellow→orange CTA gradient (`#ffd814` → `#ffa41c`) on every Add to Cart, with a 1px `#fcd200` border - Squid-ink navy chrome (`#131921` masthead, `#232f3e` sub-nav) with white text and `#37475a` hover - Teal links (`#007185`) that flip to rust-orange (`#c45500`) on hover — Amazon-only colour pairing - Prime blue (`#00a8e1`) reserved exclusively for Prime affordances and the membership funnel - Amazon Ember at 14px regular for body, 21–28px at 700 for display — utilitarian, never showy - Product tiles densely packed: 4–6 per row at desktop, no negative space between sections - Star ratings render in `#ffa41c` orange on `#d5d9d9` empty — never yellow, never gold ## Colors ### Primary - **Canvas** (`#ffffff`): default page floor, every product tile, every form surface - **Page Floor** (`#eaeded`): the soft grey backing on category pages, between content cards - **Ink** (`#0f1111`): primary text colour — slightly off-black with a green undertone, calmer than `#000` - **Orange** (`#ff9900`): the smile colour, the brand wordmark, used scarcely as a fill — appears on Best Seller ribbons, the wordmark itself, and star ratings ### Brand & Dark - **Masthead Navy** (`#131921`): the global top bar, navigation rail, footer ground — the "squid ink" backdrop that anchors every page - **Masthead Sub-nav** (`#232f3e`): the second-tier navigation band beneath the masthead, slightly lighter - **Masthead Hover** (`#37475a`): hover state on masthead links, a breath lighter than the sub-nav - **Footer Deep** (`#232f3e`): footer column ground, matches sub-nav ### CTA Yellow/Orange System - **CTA Yellow** (`#ffd814`): top of the Add to Cart gradient - **CTA Orange** (`#ffa41c`): bottom of the Add to Cart gradient, also Buy Now solid fill - **CTA Border** (`#fcd200`): 1px hairline around every CTA button — the gradient's signature outline - **CTA Hover** (`#f7ca00`): the gradient slides to a slightly darker base on hover - **Buy Now Hover** (`#fa8900`): Buy Now solid hover state ### Accent - **Link Teal** (`#007185`): inline body links and product titles — the most distinctive colour in Amazon UI - **Link Hover Rust** (`#c45500`): link hover state — flips from cool teal to warm rust - **Prime Blue** (`#00a8e1`): Prime checkmark, "Try Prime" CTA, Prime delivery affordances — never used outside the Prime funnel - **Prime Deep** (`#146eb4`): the legacy Prime logo blue, still appears on certain Prime branding ### Interactive - **Link** (`#007185`) — body inline links, product titles - **Link Hover** (`#c45500`) — hovered link - **Visited Link** (`#552b76`) — purple visited state on certain category pages - **Disabled** (`#a6a6a6`) — disabled CTA text and outline - **Focus Tint** (`#c8f3fa`) — 3px cyan focus ring on focusable elements ### Neutral Scale - **Ink** (`#0f1111`) — primary text - **Heading** (`#0f1111`) — same ink, bolder weight - **Muted** (`#565959`) — breadcrumbs, secondary metadata - **Soft** (`#6f7373`) — captions, faint counts - **Disabled** (`#a6a6a6`) — disabled text - **Border** (`#d5d9d9`) — default 1px hairline - **Border Soft** (`#e7e7e7`) — editorial dividers - **Border Strong** (`#888c8c`) — focus state hairline ### Surface & Borders - **Canvas** (`#ffffff`) — default surface - **Soft** (`#f7f8f8`) — search-bar segments, sub-bands - **Strong** (`#f0f2f2`) — disabled fields, alternating table rows - **Yellow Surface** (`#fef8e8`) — Subscribe-and-Save info banners ### Shadow Colors Amazon stays flat by default — most surfaces have **no shadow at all**. The exceptions are mega-menu flyouts and modals, where a subtle `rgba(0,0,0,0.15) 0 2px 5px` lift appears. ### Semantic - **Success Green** (`#007600`): "In Stock" labels, "Order placed" confirmations - **Deal Red** (`#cc0c39`): strikethrough deal price, percentage-off badges, savings indicators - **Urgency Red** (`#b12704`): "Only 3 left in stock" warnings, validation errors - **Warning Tan** (`#b66719`): advisory banners (price changes, restock pending) ## Typography ### Font Family **Primary**: `Amazon Ember`. Fallback chain: `"Helvetica Neue", Helvetica, Arial, sans-serif`. Amazon Ember is a humanist sans commissioned in 2014 from Joe Leonard / Dalton Maag — open apertures, slightly squared terminals, an aesthetic neighbour to IBM Plex and Source Sans Pro. **Mono companion**: not part of the storefront brand system. Code samples appear only in AWS / developer docs, where IBM Plex Mono and Source Code Pro carry separate identities. **OpenType features**: `tnum` is enabled on price displays, rating counts, and shipping countdown timers so column alignment stays clean across multi-tile grids. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | deal-display | Ember | 56 | 700 | 1.0 | -1px | tnum | Today's Deals page hero — rare, only on dedicated deal pages | | page-title | Ember | 28 | 700 | 1.25 | -0.5px | — | Category page headlines, PDP product name on smaller tiles | | section-head | Ember | 21 | 700 | 1.25 | 0 | — | "Customers also bought", "Frequently bought together" | | product-title | Ember | 18 | 400 | 1.33 | 0 | — | PDP main product title — large but regular weight | | product-title-md | Ember | 16 | 400 | 1.43 | 0 | — | Product card titles in grid view | | body-md | Ember | 14 | 400 | 1.43 | 0 | — | Default body — descriptions, reviews, Q&A | | body-sm | Ember | 13 | 400 | 1.38 | 0 | — | Secondary metadata, "Sold by Amazon", caption text | | caption | Ember | 12 | 400 | 1.33 | 0 | — | Footer micro-text, sub-tier categories | | micro | Ember | 11 | 400 | 1.27 | 0 | — | Footer legal, copyright, smallest labels | | price-whole | Ember | 28 | 500 | 1.0 | 0 | tnum | Whole-dollar price ("$24") — the dominant tile element | | price-symbol | Ember | 13 | 500 | 1.0 | 0 | tnum | Superscript "$" anchored top-left of the whole price | | price-fraction | Ember | 13 | 500 | 1.0 | 0 | tnum | Superscript "99" anchored top-right of the whole price | | rating-count | Ember | 14 | 400 | 1.0 | 0 | tnum | "(12,847)" review count beside the star row | | button-cta | Ember | 13 | 400 | 1.23 | 0 | — | Add to Cart label — small, never bold | | nav-link | Ember | 14 | 700 | 1.0 | 0 | — | Masthead category links ("Today's Deals", "Customer Service") | | nav-tagline | Ember | 11 | 400 | 1.0 | 0 | — | Masthead "Hello, sign in" / "Account & Lists" tagline above category links | | badge | Ember | 12 | 700 | 1.0 | 0 | uppercase | "DEAL", "BEST SELLER", "PRIME" badges | ### Principles - **Function first.** Amazon Ember is engineered to disappear at 14px. There is no display/body distinction in the family — the same font carries every size. Hierarchy comes from weight and size, never from family change. - **The price construction is the typographic moment.** Whole-dollar prices are rendered as a 3-piece glyph: a small `$` superscript top-left, a 28px whole-dollar in the middle, and a small `99` superscript top-right. This is the page's most distinctive type composition. - **Tabular numerals everywhere money lives.** Prices, ratings, review counts, shipping countdowns all enable `tnum` so right-edge alignment holds across grids. - **Body sits at 14px / 400.** That's smaller than typical SaaS body (16/400) — Amazon prioritises information density. - **Headlines never exceed 28px** in regular product flow. Deal-display 56px is the only larger size, and it appears only on dedicated deal pages. - **No italic, no display family.** Amazon Ember has italics, but they never appear in the storefront. The brand reads as anti-flourish. - **Helvetica Neue is the closest substitute** if Ember is unavailable — but it will run slightly tighter; bump line-height by ~5%. ## Layout ### Spacing System - Base unit: **4px** - Scale: `2 · 4 · 6 · 8 · 10 · 12 · 14 · 18 · 22 · 28 · 36 · 48 · 64` - Section padding (vertical): **22–28px** between major bands — tighter than typical SaaS marketing because density is the brand - Card internal padding: **12px** for product tiles; **14px** for PDP buy box; **6×10px** for CTA buttons - Gutters: **14px** between product tiles in grid view; **18px** between major page bands; **6px** between adjacent buttons in the buy-box stack ### Grid & Container - Max content width: **1500px** centred (Amazon runs wider than typical SaaS — the page caps at 1500 to fit dense product grids) - Homepage: 6-column tile grid at desktop, collapsing to 2-column at mobile - Search results: **4–6 column** grid depending on viewport, 240px minimum tile width - PDP: 2-column with image gallery left (~55%), buy box and product details right (~45%); spec table runs full width below - Footer: 4-column link list at desktop, collapsing to 2-column at tablet ### Whitespace Philosophy Amazon does not believe in negative space. Every pixel of the masthead is informationally dense; product grids run edge-to-edge; sections stack without explicit visual breaks. The lone breathing room is the **white surface between the navy chrome and the first content row** — a single 22–28px band that signals the transition from chrome to content. Otherwise the page is engineered for **scannability over rest**: a customer scanning 30 tiles in 5 seconds is the design target. ### Section Cadence There is no light/dark alternation. The chrome (masthead, sub-nav, footer) is always navy; the content body is always white or `#eaeded` page floor. The only "dark band" inside the body is the footer, which uses the same `#232f3e` ground as the sub-nav. ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Masthead collapses to logo + hamburger + cart; search bar moves to its own row beneath the masthead; product grid 2-up; PDP buy-box stacks beneath gallery | | Tablet | 600–1000px | Masthead keeps location and account; sub-nav scrolls horizontally; product grid 3-up | | Desktop | 1000–1200px | Full masthead and sub-nav; product grid 4-up; PDP 2-column | | Wide | >1200px | Content caps at 1500px; product grid 5–6 up; PDP gallery widens | ### Touch Targets - Primary CTA (Add to Cart): 29px height — borderline for AAA, compensated by 6px vertical padding inside a 41px tappable region - Secondary CTA (Buy Now): 29px height, same as primary - Search button: 45×40px — comfortable for AA - Product tile: entire 240×320px tile is tappable; the title is the canonical link target ### Collapsing Strategy - Masthead: location selector and category dropdown hide first; account and orders next; only logo + cart + hamburger remain at <600px - Search bar: jumps from inline (centre of masthead) to its own row below the masthead at <1000px - Product grid: column count drops cleanly; row gutters compress from 18px → 12px → 8px - PDP: 2-column splits to single-column stack at <1000px; buy-box becomes a sticky bottom bar at mobile ### Image Behavior Product thumbnails use `aspect-ratio: 1/1` with `object-fit: contain` (Amazon prefers `contain` for product photography on white backgrounds — `cover` would crop product silhouettes). PDP main gallery supports zoom-on-hover and lightbox click. Lazy-loading is aggressive — tiles load in viewport waves. ### Container Queries Not formally used. Amazon's grid logic is driven by media queries on the body width, not container queries on the grid itself. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Body, masthead, footer, all editorial bands (~95% of surfaces) | | 1 — Hover Card | `rgba(0,0,0,0.15) 0 2px 5px 0` | Product tiles on hover, mega-menu flyouts, dropdowns | | 2 — Modal | `rgba(0,0,0,0.3) 0 4px 16px` | Centred dialogs (sign in, address book, payment) | | 3 — Scrim | `rgba(15,17,17,0.7)` | Modal backdrop | ### Shadow Philosophy Amazon stays flat. The only shadow that appears in the storefront chrome is the hover-card lift on product tiles — and even that is a single-layer drop, not the multi-layer composition Stripe or Linear use. Depth in Amazon UI comes from **the navy chrome contrast** (squid-ink masthead against white content) and **the orange CTA** (the brightest fill on the page, always the eye-anchor). Elevation is engineered to be invisible. ## Shapes | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Badges, ribbons, dense table corners | | Small | 3–4px | Form inputs, search bar, masthead pill | | CTA | **7px** | Add to Cart, Buy Now — Amazon's quirky 7 (not 8) | | Card | 8px | Product tiles, modals, dropdowns, mega-menu | | Featured | 16px | Promo banners on category pages, gift card hero tiles | | Pill | 9999px | Rare — used only on the avatar in the account dropdown | The **7px CTA radius** is one of Amazon's longest-standing UI quirks. Every other Amazon surface uses a multiple of 4 (4, 8, 16); the CTA alone breaks the system. There is no public explanation, but it has been preserved across multiple redesigns — likely because changing it would invalidate decades of conversion-rate testing. There are no compound radii in mainline UI. Every interactive element rounds uniformly on all four corners. ## Components ### Buttons **`button-cta`** — the canonical Add to Cart. Yellow→orange gradient (`#ffd814` top, `#ffa41c` bottom), 1px `#fcd200` border, 7px radius (Amazon's quirky 7, not 8), 6×10px padding, 29px height, ink text in `button-cta` (13px / 400). On hover the gradient base darkens to `#f7ca00`. On `:active` the gradient flips bottom-up for 100ms — the only visible feedback, and it is unmistakable. **`button-buy-now`** — solid orange (`#ffa41c`) with `#ff8f00` border, same 7px radius and 29px height. Sits beneath the Add to Cart on every PDP. Hover darkens to `#fa8900`. **`button-secondary`** — white fill, 1px `#d5d9d9` hairline, 7px radius, ink text. Used for See more, Compare, See all reviews. **`button-prime-cta`** — Prime-blue (`#00a8e1`) outline on a soft `#a4ddee` fill. Reserved for the Prime funnel: "Try Prime", "Get Prime", "Watch on Prime Video". **`button-link`** — no surface, no border, just teal text (`#007185`) that flips to rust (`#c45500`) on hover. The most-used "button" on Amazon — every product title is technically a `button-link` to the PDP. ### Cards **`product-card`** — the search-result tile. White surface, 8px radius, 12px padding. Stack: thumbnail (1:1 aspect), product title (`product-title-md`), star row + review count, price construction, "FREE delivery by Tue, May 5" Prime line, optional "Add to Cart" CTA at the bottom. Hover pushes the card up with a `rgba(0,0,0,0.15) 0 2px 5px` shadow. **`deal-card`** — Today's Deals tile. White surface with a 1px `#cc0c39` red border, 8px radius. Top-left corner ribbon shows percentage off ("-43%") in white-on-red. Strikethrough `text-line-through` original price in `text-muted`, current deal price in `price` red. **`recommendation-tile`** — square thumbnail with a single-line title beneath. No CTA, no rating row — used in "Customers who bought this also bought" carousels. **`pdp-buy-box`** — sticky right-rail card on PDP. White, 8px radius, 1px hairline border, 14px padding. Stack: large price construction at top, "FREE delivery" Prime line, "In Stock" green text, quantity selector, Add to Cart, Buy Now, Add to Wishlist, "Ships from / Sold by" small print. ### Badges, Tags, Pills **`bestseller-badge`** — orange (`#ff9900`) fill, white uppercase text, 2px radius, 2×6px padding. Anchors top-left of qualifying tiles. **`deal-badge`** — saturated red (`#cc0c39`) fill, white uppercase text, 2px radius. "DEAL" or "-43%" in `badge` (12px / 700 uppercase). **`prime-badge`** — Prime checkmark glyph in `prime-blue` followed by "Prime" wordmark — never gets a surface, sits inline with the delivery date line. **`amazon-choice-badge`** — small dark-navy pill ("Amazon's Choice") with white text in `caption`, 2px radius. Anchored top-left of the recommended tile. ### Inputs / Forms **`text-input`** — white surface, 1px `#a6a6a6` hairline, 3px radius (slimmer than the CTA's 7), 32px height, 4×7px padding. On focus the border thickens to 2px `#007185` teal with a soft cyan glow. **`search-bar`** — masthead global search. White fill, 4px radius, 40px height. Composed of three segments: a left dropdown ("All Departments"), a centre text input, and a right `search-button` (orange `#febd69` fill, 45px wide, magnifier icon). On focus the entire bar gains a 2px `#febd69` outer border ring. **`select`** — same look as `text-input` but with a dropdown chevron on the right edge. ### Navigation **`masthead`** — full-width navy (`#131921`) bar, 60px height. Wordmark flush left, location selector, search bar centred, account / orders / cart flush right. Every label uses `nav-link` (14/700) with a `nav-tagline` (11/400) above it. **`sub-nav`** — slightly lighter navy (`#232f3e`), 39px height, holds department links: "Today's Deals", "Registry", "Customer Service", "Gift Cards". Hover state: `#37475a`. **`mega-menu-flyout`** — opens from "All" department dropdown; white surface, 8px radius, 1px hairline border, hover-card shadow. Two-column nav of category trees. **`breadcrumb`** — `text-muted` (`#565959`) with `›` separators, 13px / 400. ### Star Rating **`star-rating`** — 5-icon row, fill `#ffa41c` for filled stars, `#d5d9d9` for empty. Half-stars rendered with a clipped half-fill. Followed by a teal-link review count: "(12,847)". ### Modals & Toasts **`modal`** — centred dialog over a 70%-opacity ink scrim. White surface, 8px radius, 1px hairline border, modal shadow. Close X anchored top-right. **`toast`** — bottom-centre stacked notifications. White fill, 8px radius, 1px hairline, ink text, 18×24px padding. Used for "Item added to cart" confirmations. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover transitions, mega-menu slide - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, toast appearance ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | CTA gradient flip on `:active`, hover colour swap on links | | Standard | 200ms | Mega-menu open, product tile hover lift, search-bar focus glow | | Slow | 300ms | Modal entry, image zoom transition, page transitions | ### Per-Component Recipes - **CTA press feedback**: on `:active` the yellow→orange gradient flips bottom-up for 100ms — the only visible button feedback. Releasing snaps back instantly. - **Product image zoom**: hovering the PDP main image triggers a 200ms fade-in of a 2× magnifier panel beside the gallery — clicked images open lightbox at full resolution. - **Mega-menu flyout**: the "All" department dropdown opens with a 200ms ease-out slide-down from the masthead; closes with a 100ms fade. - **Search-bar focus**: the 2px outer border ring (`#febd69`) fades in over 200ms when the input gains focus. - **Add-to-cart toast**: bottom-right toast slides in from `translateY(20px)` to `0` over 300ms emphasized. - **Link hover**: text colour transitions from teal (`#007185`) to rust (`#c45500`) over 100ms — no underline change. ### Page Transitions Page-to-page navigation uses no transition — links fire a hard navigation. Amazon prioritises perceived speed and skeleton-loader rendering over polished transitions. The exception is the cart-add toast and the lightbox image gallery, which use the durations above. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. The CTA gradient flip becomes an instant background swap. The image-zoom magnifier disables (clicking still opens lightbox). Modal and toast transitions degrade to opacity-only fades. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #0f1111 ink on #ffffff canvas | 19.0 | AAA | | #0f1111 ink on #ffd814 CTA top | 13.5 | AAA | | #0f1111 on #ffa41c CTA bottom | 7.4 | AAA | | #007185 link on #ffffff | 4.7 | AA | | #c45500 link hover on #ffffff | 4.6 | AA | | #565959 muted on #ffffff | 6.7 | AAA | | #ffffff on #131921 masthead | 17.4 | AAA | | #ffffff on #cc0c39 deal red | 5.4 | AA | ### Focus Indicators Focus ring is a **3px solid `#c8f3fa`** (light cyan tint) with a 1px `#007185` underline on links. Buttons and inputs gain the cyan glow ring; links gain a 1-pixel offset underline. The system avoids brand orange on focus — orange is reserved for action emphasis only. ### ARIA Patterns - **Search bar**: outer container is `role="search"`. The category dropdown is a `