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 impactfulh2: untitledsans, 31px, weight 500, −1.25px trackingbody/p: untitledsans, 17px, weight 400, −0.34px trackinga(nav): untitledsans, 28px, weight 400 — large navigation linksbutton/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
