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 impacth3: FKScreamer-Medium, 28px, weight 700, uppercase — section headersbody/p/a: ABCWhyteSemi-Mono-Regular, 14px, weight 400button: ABCWhyteSemi-Mono, 14px, weight 700, uppercase, 1px trackinglabel: ABCWhyteSemi-Mono, weight 600h1(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 yellowrgb(244,244,110)CTA highlight, earthy sage accent, no shadows, pill and 10px rounded components.”
Generated by Sparkbites — extracted from live CSS analysis
