# stackedstore.com — Design System

## 1. Visual Theme & Atmosphere

Stackedstore is a Shopify storefront with genuine typographic ambition. The warm parchment background (`#f5f0e4`) immediately sets it apart from clinical white e-commerce — it feels handcrafted, slightly vintage, like a boutique that takes its aesthetic seriously. The hero section uses a muted sage green (`rgb(136,147,135)`) that feels earthy and editorial. Two distinct typeface families create a performance-oriented hierarchy: FKScreamer for bold display moments, ABCWhyteSemi-Mono for everything functional. Accents of electric yellow-lime and deep plum reserve space for product moments.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(245,240,228)` (`#f5f0e4`) | Warm parchment page background |
| White panel | `#FFFFFF` | Product cards, overlays |
| Hero surface | `rgb(136,147,135)` | Earthy sage hero section |
| Border/input | `rgb(168,159,145)` (`#a89f91`) | Warm tan borders — all edges |
| Electric yellow | `rgb(244,244,110)` | Marquee banner, accent surface |
| Electric CTA | `rgb(244,244,110)` | Full-width add-to-cart buttons |
| Deep plum | `rgb(61,26,57)` | Dark background variant |
| Mid plum | `rgb(165,77,133)` | Secondary dark accent |
| Dark panel | `rgb(59,64,75)` | Notification/toast surface |

The yellow-lime is the only neon note in an otherwise earthy palette — used for high-impact CTA moments only.

## 3. Typography Rules

A clear two-tier system: **FKScreamer** for screaming display, **ABCWhyteSemi-Mono** for everything else.

- `h2`: FKScreamer-Bold, 60px, weight 400, uppercase, line-height 84px — cinematic impact
- `h3`: FKScreamer-Medium, 28px, weight 700, uppercase — section headers
- `body/p/a`: ABCWhyteSemi-Mono-Regular, 14px, weight 400
- `button`: ABCWhyteSemi-Mono, 14px, weight 700, uppercase, 1px tracking
- `label`: ABCWhyteSemi-Mono, weight 600
- `h1` (nav label): ABCWhyteSemi-Mono, 16px — unexpectedly small, used for navigational text

The semi-mono body type creates a uniform, almost typewriter quality that pairs well with the screamer display font.

## 4. Component Stylings

Border radius ranges from 5px to 1000px — cards use `10px` for gentle rounding, pill-shaped chips use `100px` or `1000px`. The `--globalBorder` is `1px solid #a89f91`. Buttons come in two variants: transparent ghost (nav) and `#000000` solid buy buttons with the warm tan border. The full-width CTA uses electric yellow with black text.

## 5. Layout Principles

A dense breakpoint system (22 breakpoints from 368px to 1820px) reveals fine-grained responsive engineering — this is a complex Shopify layout with many edge cases. Footer uses `30px` horizontal padding. The CSS custom properties expose a 2rem padding base and a 1.4rem box/button padding.

## 6. Depth & Elevation

No box shadows detected. Depth emerges from surface layering — parchment canvas, white panels, dark overlays. The `--globalShadow: 0 0 15px rgba(0,0,0,0.25)` is defined but not confirmed in use. Overlay uses `rgba(201,201,201,0.76)`.

## 7. Do's and Don'ts

**Do:** Use FKScreamer only for major display moments. Maintain the warm parchment canvas. Use the tan border `#a89f91` for all form elements. Reserve electric yellow for CTAs only.

**Don't:** Mix typefaces in body copy — ABCWhyteSemi-Mono handles everything below display. Don't use cold white backgrounds; the warmth of `#f5f0e4` is the brand. Don't add rounded corners to display headings.

## 8. Responsive Behavior

22 breakpoints from 368 to 1820px — extreme detail. This Shopify theme is highly tuned for every device tier, suggesting careful attention to product presentation at all sizes.

## 9. Agent Prompt Guide

> "Design in the style of stackedstore.com: warm parchment background `#f5f0e4`, FKScreamer bold uppercase for display headings, ABCWhyteSemi-Mono for all body/UI text, warm tan borders `#a89f91`, electric yellow `rgb(244,244,110)` CTA highlight, earthy sage accent, no shadows, pill and 10px rounded components."

*Generated by Sparkbites — extracted from live CSS analysis*