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: 0pxon 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. Navyrgb(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
