# supply.family — Design System

## 1. Visual Theme & Atmosphere

Supply.family is a dark-mode e-commerce experience with graphic conviction. The near-black body (`rgb(16,16,16)`) creates an immersive, almost cinematic canvas where white content areas emerge as clean product stages. This split personality — dark header/nav floating above white main content — is a sophisticated architectural choice. The brand accent is a confident yellow-gold (`rgb(251,200,21)`) that reads like a voltage spark against the dark. Built on WordPress/WooCommerce with the custom WooCommerce primary set to deep purple `#720eec`, though the visible design emphasizes the yellow.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Dark canvas | `rgb(16,16,16)` (`--dark: #101010`) | Page background, header |
| White main | `rgb(255,255,255)` | Product content area — clean stage |
| Light product bg | `rgb(246,246,246)` / `rgb(236,236,236)` | Image containers, product surfaces |
| Dark border | `rgb(44,44,44)` (`--dark-border`) | Subtle dark dividers |
| Body text | `rgb(16,16,16)` | Content text on white |
| Secondary text | `rgb(170,170,170)` | Muted descriptors |
| Yellow CTA | `rgb(251,200,21)` (`--yellow: #fbc815`) | Quick order buttons — high energy |
| Success green | `rgb(121,234,162)` | Form success state |
| Error red | `rgb(255,0,0)` | Error indicator |

The yellow is the singular accent that bridges the dark header and white content zones.

## 3. Typography Rules

A single family: **untitledsans** — a contemporary geometric sans with personality.

- `h1`: untitledsans, 45px, weight 500, −1.8px tracking — tight and impactful
- `h2`: untitledsans, 31px, weight 500, −1.25px tracking
- `body/p`: untitledsans, 17px, weight 400, −0.34px tracking
- `a` (nav): untitledsans, 28px, weight 400 — large navigation links
- `button/input`: untitledsans, 16px, weight 400

Negative tracking throughout. The 28px link size on navigation is unusually large — suggesting prominent, gesture-friendly nav links.

## 4. Component Stylings

A single border radius value: `32px` — consistently applied to rounded-corner components. Inputs `rgb(36,36,36)` dark background on white text with a full-border-white border. Hover state fades opacity to 0.5 (no color change) — a consistent, brand-wide opacity interaction pattern for buttons and links.

## 5. Layout Principles

An extreme 44-breakpoint responsive system (450px to 2100px) reveals a highly customized WooCommerce template with meticulous device handling. Main content has `94px` top / `150px` bottom padding. Footer uses `100px` top/bottom padding. The `--gutter: 40px` and `--pageMarginTotal: 40px` define a tight, editorial grid.

## 6. Depth & Elevation

No box shadows. Depth comes from the stark light/dark split between header and main. Cart drawer appears in white against the page overlay. Product image containers use the `rgba(177,176,173,0.14)` neutral wash.

## 7. Do's and Don'ts

**Do:** Maintain the dark header / white content split. Use opacity-fade (0.5) for all hover states. Use yellow exclusively for purchase-intent CTAs. Keep untitledsans across all text elements.

**Don't:** Add multiple CTA colors — yellow is singular and precious. Don't round corners less than 32px on interactive elements. Don't use the dark background in the main content zone.

## 8. Responsive Behavior

44 breakpoints from 450 to 2100px — WooCommerce's complex product layout requires this level of tuning. Key jumps at 768, 1024, and 1200px.

## 9. Agent Prompt Guide

> "Design in the style of supply.family: near-black canvas `rgb(16,16,16)` header over white content, untitledsans with 500 weight and negative tracking, yellow-gold CTA `#fbc815`, dark inputs, 32px border radius, opacity-0.5 hover pattern, no shadows, split-mode editorial commerce."

*Generated by Sparkbites — extracted from live CSS analysis*