{
  "name": "Costco style",
  "slug": "costco",
  "number": 4,
  "words": { "en": "Warehouse, Receipt, No-Frills", "ko": "창고형, 영수증, 꾸밈없음" },
  "source": ["https://www.costco.com", "https://investor.costco.com", "https://www.costco.co.kr"],
  "touchpoints": "warehouse signs, receipts and printed coupons",
  "sample": {
    "url": "https://styles.vizney.com/costco/",
    "data": "comps.csv",
    "topic": "Weekly warehouse report of Vizney Wholesale, a fictional US warehouse club (24 warehouses in three regions), built from the way Costco shows numbers in the real world: the warehouse price sign as the KPI, the register receipt as the department table (barcode bars, and transactions by hour where the receipt's barcode sits), the Warehouse Savings coupon book as a figure, and the monthly sales release as the headline and the comparable-sales chart, with a warehouse board against plan and the holiday buy stacked as pallet racks, framed by costco.com's blue bands and the coupon page's charcoal bands and ruled grid"
  },
  "devices": {
    "priceSign": "KPI: a white sign card with a 1px #333333 frame and a 2px radius. Item-number code top left (mono 11px), the name in bold caps, the price big with '$' and the decimals as superscripts and the unit word under the decimals (like EACH on a sign), the change, then a small-print unit line and the date code bottom right (mono 11px #909090), the way a warehouse sign dates itself",
    "receipt": "Detail table: a narrow receipt in Overpass Mono. Centered caps header lines, then DEPT · DESCRIPTION · SALES · $K · VS LY%: receipt-style abbreviations (MEAT/SEAFOOD), a barcode bar whose length is the line's net sales (vertical stripes of uneven width, about 63% ink, a solid 2px end so the length reads exactly), thousands of dollars rounded so the lines add up to the subtotal, and VS LY with negatives in caution orange. A blank line, SUBTOTAL, GAS STATION and **** TOTAL, then TOTAL NUMBER OF ITEMS SOLD = n, instant savings, transactions and the average ticket. Where a receipt prints its barcode: transactions by hour as thin ink bars, one per open hour, a gap between days, day names under them and the peak hour in the line above; the footer code line closes it. Dashed rules only; the row the title names is blue (bar and text step), every row has a tooltip",
    "couponBook": "Figure: a charcoal band (Warehouse Savings · valid dates · week n of 4) over a ruled grid of coupons (1px #eeeeee). Each coupon: the channel line ('Warehouse' #c13533 & 'Online' #005dab, or the slanted Online Only tag), the item, 'Item <number> · Limit n.', the savings in green with a superscript '$' and 'OFF', a bar of redemptions against forecast with a forecast tick, and member savings. A top-right asterisk marks a seasonal item that will not be restocked",
    "salesRelease": "Headline and Figure 1: the monthly sales release sentence ('Net sales of $X for the retail week ended …, an increase of n percent from $Y last year') and comparable sales reported vs Adjusted*, with the footnote '*Excluding the impacts from changes in gasoline prices.'"
  },
  "parts": {
    "warehouseBoard": "Table 2, from the warehouse locator list: a mono rank, the warehouse code in mono semibold, the region in small gray, a slanted New tag; a bar that starts at the plan line (1px ink) and runs right when ahead (gray #cccccc) or left when behind (caution #bc4700, its value in the same orange); net sales and vs LY on the right. Ranked best first, split into two columns of equal length, ticks at −4 · PLAN · +4 · +8% in the header",
    "palletRack": "Figure 2, the holiday buy as warehouse steel: one rack per category, 20 bays × 5 levels = 100 slots, one slot = 1% of the category's pallets, stacked bottom-up from the left: sold (blue #1a70c2), in the warehouse (#cccccc), arriving (white slot with a 1px #cccccc edge). A 2px ink floor line, a 2px ink plan-to-date line with 'PLAN n%' above it; under the rack the share sold in the blue text step and the gap to plan with ▲/▼ in green or caution orange, then pallets in the warehouse and arriving"
  },
  "colors": {
    "canvas": { "hex": "#ffffff", "role": "page background (costco.com's body is white, measured)" },
    "bar": { "hex": "#fafafa", "role": "header and the status row under the region band (measured: the header body and the My Warehouse row are #fafafa)" },
    "paper": { "hex": "#ffffff", "role": "price signs, figure panels, the receipt, coupon cells" },
    "plot": { "hex": "#ffffff", "role": "chart background: the panel itself" },
    "rule": { "hex": "#eeeeee", "role": "the ruled grid between coupons and cells, the outer edge of ruled blocks (measured on Warehouse Savings), chart gridlines" },
    "hair": { "hex": "#eeeeee", "role": "gridlines in BI tools (same as rule)" },
    "line": { "hex": "#d9d9d9", "role": "edges of standalone panels, the workbench window" },
    "edge": { "hex": "#cccccc", "role": "chart baselines, tooltip border, the language toggle" },
    "sign": { "hex": "#333333", "role": "the 1px frame of a price sign" },
    "band": { "hex": "#333333", "role": "section bands with white 22px/700 headings (measured: Warehouse Savings category bands #333333, 12px 16px 4px, 50px)" },
    "ink": { "hex": "#333333", "role": "titles, key figures, table values (costco.com text-primary)" },
    "body": { "hex": "#333333", "role": "running text" },
    "text-2": { "hex": "#5f5f5f", "role": "subtitles, small print, deltas' comparison words (text-secondary, 6.4:1)" },
    "muted": { "hex": "#707070", "role": "figure labels, notes, axis ticks, item numbers and limits (text-light, 4.95:1)" },
    "faint": { "hex": "#909090", "role": "date codes and line numbers only (3.2:1, never for running text)" },
    "blue": { "hex": "#005dab", "role": "the promo band and the region band, buttons, links, focus, the 'Online' channel word and the slanted tag (costco-blue, measured)" },
    "blue-700": { "hex": "#004c8a", "role": "button hover; the subject's text step (8.75:1)" },
    "blue-100": { "hex": "#eff7fb", "role": "hovered rows and coupons, highlighted code lines" },
    "red": { "hex": "#e51937", "role": "logo red: only the second slanted tag; never data" },
    "red-500": { "hex": "#c13533", "role": "the 'Warehouse' channel word (measured), the red series' text step (5.49:1)" },
    "green": { "hex": "#008000", "role": "status text: '24 of 24 warehouses reporting' (the 'Open until 8:30PM' color, measured)" },
    "green-700": { "hex": "#0b6e22", "role": "coupon savings '$10 OFF' (the coupon price color, measured); good changes" },
    "caution": { "hex": "#ca4d00", "role": "costco.com text-caution; darkened to #bc4700 for text" }
  },
  "data": {
    "surface": "#ffffff",
    "categorical": [
      { "name": "blue · the subject (also Online)", "hex": "#1a70c2", "text": "#004c8a" },
      { "name": "red · Warehouse, only beside Online", "hex": "#d42f37", "text": "#c13533" }
    ],
    "other": "#cccccc",
    "comparison": "#909090",
    "marks": { "grid": "#eeeeee", "baseline": "#cccccc", "target": "#333333", "plan": "#333333", "track": "#eeeeee", "hover": "#eff7fb", "behind": "#bc4700", "arriving": "#ffffff", "arriving-edge": "#cccccc", "receipt-bar": "#333333" },
    "sequential": ["#8eb6e5", "#5c96d7", "#2174c7", "#10599e", "#0a3e6f"],
    "diverging": ["#9b1e22", "#d42f34", "#e9a29c", "#d9d9d9", "#8eb6e5", "#2174c7", "#0b569a"],
    "status": { "good": "#0b6e22", "bad": "#bc4700", "neutral": "#909090" },
    "validation": {
      "tool": "dataviz validate_palette.js (OKLab), mode light, on the panel #ffffff and the header #fafafa",
      "categorical": "Costco publishes almost no charts (its sales releases are tables), so the data hues come from the pair costco.com uses to split channels: 'Warehouse' red and 'Online' blue. Blue #1a70c2 is one step lighter than the UI blue #005dab, which stays on bands, buttons and links; red #d42f37 sits between the logo red #e51937 and the error red #c13533. All pairs: CVD ΔE 21.4 (protan), normal vision 32.1, lightness inside 0.43–0.77, contrast 5.07 and 4.93:1 on white (4.86 and 4.72:1 on #fafafa). Blue is the subject everywhere; red appears only with blue, in the channel figure",
      "other": "#cccccc is costco.com's gray-500; neutral by design (lightness band and chroma floor do not apply). At 1.61:1 it always has a second cue: value labels, a 2px gap between stacked segments and a table",
      "comparison": "#909090 (gray-600) against blue: 3.19:1 on white, always dashed (6 4) and labeled at its end",
      "sequential": "one blue hue around the subject (#8eb6e5 → #0a3e6f): monotone lightness, every gap ≥ 0.06, light end 2.11:1, hue spread 1°",
      "diverging": "arms #e9a29c→#9b1e22 and #8eb6e5→#0b569a pass the ordinal checks (light ends 2.08 and 2.11:1, hue spread 1°); poles CVD 19.5 (protan), normal 26.6; the midpoint #d9d9d9 is gray-300",
      "status": "good #0b6e22 (6.43:1) and bad #bc4700 (5.20:1 on white, 4.98:1 on #fafafa) as text. Red belongs to the warehouse channel, so a bad change is caution orange, never red; status is never color alone: a change keeps its arrow, sign and comparison words",
      "text": "label steps: blue #004c8a 8.75:1, red #c13533 5.49:1; body #333333 12.6:1, secondary #5f5f5f 6.4:1, muted #707070 4.95:1 on white",
      "plan": "Table 2 colors only the warehouses behind plan (status bad #bc4700, a bar left of the plan line and a minus sign, so never color alone); the rest stay gray. Figure 2 uses blue for the share sold in every rack (the measure the title talks about), gray for pallets in the warehouse and an outlined slot for pallets still arriving"
    }
  },
  "code": {
    "background": "#ffffff", "comment": "#707070", "string": "#0b6e22", "number": "#bc4700", "keyword": "#004c8a", "function": "#c13533", "property": "#333333", "line-number": "#909090", "highlight": "#eff7fb", "caret": "#005dab",
    "note": "a white code pane like the receipt; the screen's own text steps (blue keyword, green string, orange number, red function), all ≥ 4.5:1 on white"
  },
  "typography": {
    "sans": { "en": "Barlow", "ko": "Pretendard", "weights": [400, 500, 600, 700], "role": "everything: Barlow stands in for Costco Sans (a variable font, 100–900). Measured at 100px, Costco Sans has a 72 cap height, 52 x-height and 540 for ten digits; among about fifty open sans faces Barlow came second by these proportions, and it is drawn from California road signs and plates, which suits warehouse signage. costco.co.kr loads no Hangul web font (Costco Sans falls back to system fonts; a declared Nanum Gothic is unused), so Korean uses Pretendard" },
    "mono": { "family": "Overpass Mono", "weights": [400, 500, 600], "role": "the receipt, item numbers, sign codes and date codes, file names and code. Overpass comes from Highway Gothic, the US highway sign face; numbers only, Korean text in the receipt falls back to Pretendard" },
    "links": {
      "google": "https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Overpass+Mono:wght@400;500;600&display=swap",
      "pretendard": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    },
    "scale": {
      "headline": { "size": "clamp(24px, 2.15vw, 30px)", "weight": 400, "lineHeight": 1.28, "family": "sans", "note": "regular weight like costco.com's h1 (28px/400); only the money is bold, like a price" },
      "kpi": { "size": "58px", "weight": 700, "lineHeight": 0.92, "letterSpacing": "-0.015em", "family": "sans", "note": "the sign price; '$' and decimals at 0.42em as superscripts (measured: price 24px with 14px superscripts, coupon 40px with 18px)" },
      "signName": { "size": "15px", "weight": 700, "transform": "uppercase", "letterSpacing": "0.02em", "family": "sans" },
      "lede": { "size": "16px", "weight": 400, "lineHeight": 1.5, "family": "sans" },
      "band": { "size": "22px", "weight": 700, "lineHeight": 1.3, "family": "sans", "measured": "Warehouse Savings band headings 22px/700 white" },
      "cardTitle": { "size": "19px", "weight": 600, "lineHeight": 1.3, "family": "sans" },
      "figureLabel": { "size": "12px", "weight": 700, "transform": "uppercase", "letterSpacing": "0.08em", "family": "sans" },
      "body": { "size": "14px", "weight": 400, "lineHeight": 1.5, "family": "sans" },
      "note": { "size": "12px", "weight": 400, "lineHeight": 1.5, "family": "sans" },
      "receipt": { "size": "12.5px", "weight": 400, "lineHeight": "19px", "family": "mono" },
      "coupon": { "size": "40px", "weight": 700, "family": "sans", "note": "savings in #0b6e22 with an 18px superscript '$' and 'OFF'" }
    }
  },
  "radius": { "sign": "2px", "card": "0", "button": "3px", "tag": "3px 0 0 3px", "tooltip": "3px", "bar": "0" },
  "spacing": { "page": "32px", "gap": "16px", "section": "40px", "card": "18px 22px 16px", "sign": "10px 14px 9px", "coupon": "14px 18px 16px", "band": "12px 16px 8px", "receipt": "18px 20px 16px", "footer": "24px 32px 36px" },
  "layout": {
    "maxWidth": "1400px",
    "columns": 12,
    "header": "32px promo band + 76px header + 44px region band + 40px status row",
    "maxViewsPerScreen": 7,
    "breakpoints": { "wide": 1360, "mid": 1024, "narrow": 900, "phone": 640 },
    "rows": [
      "blue promo band 32px: week ended, Warehouse Savings valid dates, week n of 4, white text centered",
      "#fafafa header: company eyebrow and report name (28px/400); period, EN/KO, Export PDF (outlined), Copy as Markdown (blue)",
      "blue region band 44px: All warehouses (24) · West (9) · Central (7) · East (8), the selected one bold with a white underline",
      "#fafafa status row: green 'n of n warehouses reporting', gas stations, paid members, data as-of time",
      "from 1360px, left 8: the sales-release headline, a lede, six price signs (3 × 2), the asterisk footnote, Figure 1 comparable sales; right 4: Table 1 the receipt. 1024–1359px: the headline and lede across, then left 7 (signs 2 × 3, footnote, Figure 1) and right 5 (the receipt). The two columns always end on one line: Figure 1's plot or the receipt's barcode takes the extra height",
      "charcoal band Warehouses and holiday stock: Table 2 the warehouse board (two columns), Figure 2 the holiday buy as four pallet racks, stacked in a ruled block",
      "charcoal band Warehouse Savings: Figure 3 coupons, 4 × 2 ruled grid",
      "charcoal band Channels, members and gas: Figure 4 channels (two lines) · Figure 5 new members (stacked bars) · Figure 6 gas by day (bars) in a ruled row of three",
      "charcoal band How it's built: intro, three ruled steps, the window (package 240px · figure and checks · code)",
      "charcoal band Method and sources: fine print in two columns, like the coupon book's Terms and Conditions",
      "#fafafa footer"
    ]
  },
  "motion": { "ease": "cubic-bezier(.4,0,.2,1)", "button": "0.15s", "draw": "0.7s", "grow": "0.45s", "fade": "0.3s", "typing": "55ms per line, 380ms between steps" },
  "tools": {
    "tableau": { "palettes": "costco.tps", "fonts": "Tableau Book for text; Barlow only if it is installed on every viewing machine and the server" },
    "powerbi": { "theme": "powerbi-theme.json", "fontFamily": "Barlow", "fallback": "Segoe UI", "visual": { "background": "paper", "plot": "plot", "border": "line", "radius": 0 } },
    "web": { "css": "tokens.css" }
  },
  "measured": {
    "date": "2026-11-04, Chrome (built-in browser), costco.com signed out, costco.co.kr, investor.costco.com",
    "home": "MUI theme variables, light scheme: costco-blue #005dab, blue-700 #004c8a, blue-100 #eff7fb, costco-red #e51937, red-500 #c13533, green-500 #008000, green-700 #0b6e22, orange (caution) #ca4d00, yellow-200 #ffcc00; gray 100 #fafafa · 200 #eeeeee · 300 #d9d9d9 · 500 #cccccc · 600 #909090 · 700 #707070 · 800 #5f5f5f · 900 #333333; text #333333 / #5f5f5f / #707070; spacing 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64; radius 4px (shape), 3px (buttons). Header: promo band #005dab 31px (white 18px), header #fafafa 138px, nav band #005dab 44px (white 16px), My Warehouse row #fafafa ('Open until 8:30PM' 12px #008000). Primary button #005dab, white 16px/400, 3px, 12px 16px, 40–44px. Product tile white, 8px radius, 8px padding, no shadow; price 24px/700 #333333 with 14px/700 superscript '$' and cents (top −7px), the decimal point hidden; 'After $800 OFF' 12px #008000; badges 20px slanted tags (clip-path polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%)), 12px white on #005dab or #e51937",
    "savings": "/o/-/warehouse-savings: h1 28px/400; 'Pricing may vary by location … | Valid 10/19/26 - 11/15/26'; category bands #333333 with 22px/700 white; a grid of white cells ruled 1px #eeeeee; coupon: 'Warehouse' 16px/700 #c13533 '&' #333333 'Online' #005dab (or an Online Only tag) → name 16px → 'Item 1872100' 12px #707070 → 'Limit 10. Selection varies by location.' 12px #707070 → price #0b6e22 40px/700 with 18px superscripts → 'After $10 OFF' 18px/700 #0b6e22 → full-width 'Buy Online' button",
    "locations": "/w/-/locations: address in caps 14px; labels 'Gas Prices', 'Hours' 12px #707070; gas '$4.89' 14px/700 with an 8px superscript '9' for Regular · Premium · Diesel; member-tier hours; 'Open until 8:30PM' 14px #008000",
    "ir": "Monthly sales release: 'net sales of $30.02 billion for the retail month of September, the five weeks ended October 4, 2026, an increase of 13.0 percent from $26.58 billion last year'; comparable sales by U.S. · Canada · Other International · Total Company; a second table excluding the impacts from changes in gasoline prices and foreign exchange; calendar shifts in bps. Quarterly: '16 Weeks | 16 Weeks Adjusted*' with the footnote '*Excluding the impacts from changes in gasoline prices and foreign exchange.' No charts",
    "touchpoints": "Warehouse price sign (press: Food Republic, Tasting Table, Clark): an asterisk top right marks an item that will not be restocked, a date bottom right under the price, instant-rebate signs print the regular price and rebate small and the final price large. Receipt (press: Chowhound): the item count at the bottom is checked against the cart at the exit. Coupon book: about 28 days, Monday to Sunday",
    "fonts": "Costco Sans Web (variable 100–900, bfasset.costco-static.com); fallback -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto. costco.co.kr: 'Costco Sans', 'Noto Sans JP', system fonts; Nanum Gothic declared but unused"
  }
}