---
name: Nestig
description: "A strong example of modern, warm-toned e-commerce design that uses typography, spacing, and soft color to convey premium quality and a welcoming feel for its target audience."
version: alpha

colors:
  background: "#f9f5f2"
  primary: "#0a0a0a"
  tertiary: "#b3cce8"
  neutral: "#535353"
  bg-soft: "#f8e7e5"
  bg-quiet: "#f3f3f3"
  muted-soft: "#173482"
  line: "rgba(10, 10, 10, 0.1)"

typography:
  display:
    fontFamily: geometric-serif
    fontSize: 32px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.28px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.28px"
  caption:
    fontFamily: humanist-sans
    fontSize: 13.333px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.24px"

rounded:
  sm: 4px
  md: 10px
  lg: 100px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 25px

---

## Overview

Premium nursery and kids furniture with a warm, design-forward aesthetic.

*A modern, well-designed nursery furniture store that feels both premium and approachable.*

## Colors

Warm neutral backgrounds create a calm, inviting atmosphere, with deep navy and light blue accents providing clear focal points.

- **Background (`#f9f5f2`)** — uses `bg` token
- **Primary text (`#0a0a0a`)** — uses `ink` token
- **Accent (`#b3cce8`)** — uses `accent` token
- **Muted (`#535353`)** — uses `muted` token
- **Borders (`rgba(10, 10, 10, 0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-serif
- **Body:** humanist-sans

- Use geometric-serif for large display headlines to add a touch of classic elegance.
- Use humanist-sans for body text and UI elements for excellent readability and a modern feel.
- Maintain a generous line height (1.5-1.6) for body text to enhance comfort.
- Apply subtle letter spacing (0.24-0.28px) to sans-serif text for a refined, airy look.

## Layout

A full-width, 12-column grid with a 24px gutter. The modal is a centered, fixed-position overlay with a clear image-text split on desktop.

*Rhythm:* A consistent 4px base unit is used throughout, with common padding values like 12px and 25px creating a balanced and breathable rhythm.

## Elevation & Depth

- rgba(10, 10, 10, 0.05) 0px 4px 5px 0px
- rgba(0, 0, 0, 0.1) 0px 0px 10px 0px
- Borders: 1px solid rgba(10, 10, 10, 0.1)

## Shapes

- `sm`: 4px
- `md`: 10px
- `lg`: 100px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with solid color fills (like the light blue #b3cce8) and generous padding for a friendly, clickable feel.
- **card:** Cards with subtle drop shadows and rounded corners, likely featuring product imagery.
- **chip:** Not prominently visible, but likely small, rounded tags for filtering.
- **input:** Rounded input fields with a thin border (#0a0a0a at 10% opacity) and placeholder text.
- **hero:** A split-layout hero combining a large, warm-toned product photograph with text content on a soft background (#f9f5f2).

## Do's and Don'ts

**Don't:**
- Don't use stark, pure white (#ffffff) as the primary background — the screenshot shows a warm off-white (#f9f5f2) instead.
- Don't use a high-chroma, electric accent color — the screenshot shows a soft, pastel blue (#b3cce8) for CTAs.
- Don't use sharp, rectangular corners on buttons and inputs — the screenshot shows fully rounded, pill-shaped elements.
- Don't use dense, small text blocks — the screenshot shows generous line height and spacing for readability.
- Don't use heavy, aggressive drop shadows — the screenshot shows subtle, soft shadows for depth.
- Don't use a purely monochrome palette — the screenshot shows warm neutrals with deliberate blue and pink accents in imagery and UI.

---

## System Prompt (paste into AI agent)

```
Nestig is a premium DTC brand for nursery and kids furniture. Its visual identity blends modern warmth with refined design. The core palette uses a warm off-white background (#f9f5f2) with deep charcoal text (#0a0a0a) and soft blue accents (#b3cce8). Typography pairs a geometric-serif for display headlines with a clean humanist-sans (Matter) for body text, creating a look that is both classic and contemporary. Layouts are spacious and grid-based, relying on generous padding and subtle shadows for structure. Key design rules: maintain warmth through off-white backgrounds, use soft pastel accents instead of bright primaries, and ensure all interactive elements have rounded, pill-shaped forms. Critical donts: do not use pure white backgrounds, avoid sharp corners on buttons, and never let text density overwhelm the generous whitespace.
```