# Nestig.com — Design System

## 1. Visual Theme & Atmosphere
Nestig is a children's furniture e-commerce brand that wraps commerce in warmth. The design language is gentle and artisanal: soft cream backgrounds, muted sage greens, and deep navy accents create an environment that feels like a well-curated nursery catalogue. The overall mood is trustworthy, premium yet approachable — no harshness, no neon, just quiet confidence in material goods. Built on Shopify, the system prioritises product photography by keeping chrome minimal.

## 2. Color Palette & Roles
| Role | Value | Usage |
|------|-------|-------|
| Canvas | `rgb(254, 251, 248)` / `rgb(249, 245, 242)` | Page background, off-white warmth |
| Blush | `rgb(248, 236, 229)` | Section fills, soft panel backgrounds |
| Ink | `rgb(35, 35, 35)` | Primary text, deep neutrals |
| Navy | `rgb(23, 52, 130)` | CTAs, links, accent highlights |
| Sage | `rgb(213, 224, 168)` | Tertiary accent, tags, nature cues |
| Near-black | `rgb(10, 10, 10)` | High-contrast headings |

No pure white or pure black. Every tone is slightly warmed, reinforcing the organic product story. Dark mode is absent — the palette is intentionally daylight.

## 3. Typography Rules
- **Heading font**: Gooper — a contemporary display serif with personality. Used for emotive headlines.
- **Body font**: Matter — a humanist geometric sans-serif. Clean and readable for product copy.
- **Sizes**: Body at 16–18px with 1.5 line-height. Headings push to 48–72px at hero level.
- **Weight range**: 400 (regular body) to 700 (bold headings). No ultra-lights or extra-bolds.
- **Letter-spacing**: Minimal — 0.28px on small headings only.
- Gooper is used sparingly, commanding large-scale moments. Matter carries all functional text.

## 4. Component Stylings
- **Buttons**: Near-flat with 2–5px border-radius. Subtle shadows (`rgba(0,0,0,0.1) 0px 0px 10px`). Hover states likely via opacity.
- **Cards**: Low elevation with `rgba(0,0,0,0.04) 0px 4px 8px` — barely lifted off the page.
- **Images**: `border-radius: 0px` on media by default (set via `--media-radius`). Photography bleeds to edges.
- **Form inputs**: Restrained, matching the soft palette.
- **Navigation**: Minimal, sticky-style, typeset in Matter.

## 5. Layout Principles
- Max-width content containers, centred.
- Generous section padding — content breathes.
- Product grids use consistent gutters; items never feel crowded.
- Sections alternate between canvas and blush fills to create rhythm without hard separators.

## 6. Depth & Elevation
Three shadow levels: near-flat (`0px 0px 10px rgba(0,0,0,0.1)`), card lift (`4px 8px rgba(0,0,0,0.04)`), and hairline (`0px 0px 1px rgba(0,0,0,0.04)`). No dramatic shadows — this is a tactile, not theatrical, system. Borders use `--media-border-opacity: 0.05`, nearly invisible.

## 7. Do's and Don'ts
**Do:**
- Use Gooper only for display moments (hero, campaign headers)
- Pair blush and canvas sections for soft visual rhythm
- Let product photography be the visual anchor on every page

**Don't:**
- Introduce pure white or pure black
- Use more than 2 shadow levels on a single component
- Add bright accent colours outside the defined palette

## 8. Responsive Behavior
Built on Shopify themes with standard breakpoints. Typography scales down smoothly — Matter's legibility holds at small sizes. Media containers maintain their no-radius edge treatment across breakpoints. Single-column product grids on mobile with generous tap targets.

## 9. Agent Prompt Guide
> Reproduce Nestig's style: warm off-white canvas (`#fefbf8`), blush panels (`#f8ece5`), Matter sans-serif body, Gooper display serif for hero headings. Navy `rgb(23,52,130)` for CTAs. Border-radius 2–5px on UI. Shadows extremely subtle. No pure white or black. Photography-first layout with restrained chrome.

*Generated by Sparkbites — extracted from live CSS analysis*