Minimal E-Commerce / Giant Typographic Price

/* Synthesized from Trova family: Minimal E-Commerce / Giant Typographic Price (minimal-ecommerce-giant) */
/* Evidence base: 4 curated reference(s) · Primary contrast 21:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #dc2626;
  --text-primary: #000000;
  --accent-primary: #555555;
  --border-hairline: color-mix(in srgb, #000000 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Helvetica Neue", system-ui, sans-serif;
  --font-body: "IBM Plex Mono", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Minimal E-Commerce / Giant Typographic Price — style sheet

> Product photography stripped of all props, gigantic price tag typography, and solitary Add to Bag button.

Derived from 4 curated reference(s) in the `minimal-ecommerce-giant` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Helvetica Neue — 3/4
- IBM Plex Mono — 3/4
- Courier New — 1/4
- Helvetica — 1/4
- Inter — 1/4

## Color

- `#000000` dark neutral — 4/4
- `#ffffff` light neutral — 4/4
- `#555555` mid neutral — 1/4
- `#dc2626` chromatic — 1/4
- `#737373` mid neutral — 1/4
- `#e5e5e5` light neutral — 1/4
- `#ffed00` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#000000` / `#ffffff` — 21:1
- `#000000` / `#ffed00` — 17.4:1
- `#000000` / `#e5e5e5` — 16.7:1
- `#555555` / `#ffffff` — 7.5:1

## Moves

### grid/layout

- Flank a 4-column central product grid with two sticky 160px sidebars: left for alphabetical designer index (`A–Z` in 11px uppercase sans) and right for sort/color/size filters, eliminating top dropdown menus entirely. — 173-ssense-left-right-monospace-category-tree-uncropped-lookbook-grid
- Pin garment construction details and fabric composition at `position: sticky; top: 35vh` in the left 25% wing, pin the size selector and 'Add to Bag' CTA at `top: 35vh` in the right 25% wing, and scroll full-height vertical photography down the center 50%. — 174-ssense-product-detail-sticky-dual-wing-spec-rail-center-scroll-gallery
- Expose `1px solid #000000` collapse borders around every product cell and sticky navigation button so the entire storefront reads as an industrial inventory manifest. — 176-balenciaga-archive-commerce-full-bleed-steel-grid-raw-price-tag-bar

### typography

- Every product card uses strictly 11px `line-height: 1.35` uppercase Helvetica for brand, garment title, and tabular price (`$640 USD`) with zero badges, star ratings, or rounded corners. — 173-ssense-left-right-monospace-category-tree-uncropped-lookbook-grid
- Total order price and duties calculation align flush-right in `font-variant-numeric: tabular-nums` beside a full-width rectangular `#000000` checkout button. — 175-ssense-bag-checkout-brutalist-11px-uppercase-ledger-instant-size-swap
- Oversized garment prices and SKU numbers render in stark uppercase grotesk or receipt monospace pinned to the bottom edge of each full-bleed cell. — 176-balenciaga-archive-commerce-full-bleed-steel-grid-raw-price-tag-bar

### component pattern

- Model height and garment size worn (`Model is 6ft 1in and wears size 48`) sit directly below the fabric bullet list so fit context is visible without opening a modal. — 174-ssense-product-detail-sticky-dual-wing-spec-rail-center-scroll-gallery
- Format the shopping bag as an accounting ledger with `1px solid #000000` horizontal dividers, allowing inline size changes and one-click move-to-wishlist without page reloads. — 175-ssense-bag-checkout-brutalist-11px-uppercase-ledger-instant-size-swap

## References

- 173-ssense-left-right-monospace-category-tree-uncropped-lookbook-grid — SSENSE — Left/Right Monospace Category Tree & Uncropped Lookbook Grid (exemplar)
- 174-ssense-product-detail-sticky-dual-wing-spec-rail-center-scroll-gallery — SSENSE Product Detail — Sticky Dual-Wing Spec Rail & Center-Scroll Gallery
- 175-ssense-bag-checkout-brutalist-11px-uppercase-ledger-instant-size-swap — SSENSE Bag & Checkout — Brutalist 11px Uppercase Ledger & Instant Size Swap
- 176-balenciaga-archive-commerce-full-bleed-steel-grid-raw-price-tag-bar — Balenciaga Archive Commerce — Full-Bleed Steel Grid & Raw Price Tag Bar