# Nestig · Design system migration spec

> Source: https://www.nestig.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The Nestig design system is built on a clear analogy: a modern, well-designed nursery. Like the best furniture for a child's room, it is premium in its construction yet approachable in its presence, blending classic elegance with contemporary warmth to create a space that feels both curated and comfortable.

**One-liner:** Premium nursery and kids furniture with a warm, design-forward aesthetic.
**Keywords:** nursery · premium · design · warm · inviting
**Analogy:** A modern, well-designed nursery furniture store that feels both premium and approachable.

## 2. Color

The color palette establishes the core atmosphere, using a warm, sophisticated off-white as the primary canvas instead of stark white. This base is accented with a deep ink for text and a soft pastel blue for interactive elements, creating a gentle, inviting hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f9f5f2` | main background |
| `--bg-soft` | `#f8e7e5` | card background |
| `--bg-quiet` | `#f3f3f3` | quiet area |
| `--ink` | `#0a0a0a` | body text |
| `--muted` | `#535353` | placeholder |
| `--muted-soft` | `#173482` | weak hint |
| `--accent` | `#b3cce8` | single accent |
| `--line` | `rgba(10, 10, 10, 0.1)` | divider |

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

The principle is clear: warmth is the foundation, and color accents should feel like soft, deliberate touches rather than loud declarations.

## 3. Typography

Typography is a dialogue between two distinct voices: a geometric-serif for display headlines lends a touch of classic elegance, while a clean humanist-sans (Matter) ensures body text and UI elements remain highly readable and modern.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.4 | 400 | 0.28px | Main headline in modal |
| body | 16px | 1.5 | 400 | 0.28px | Default body text |
| caption | 13.333px | 1.6 | 400 | 0.24px | Secondary text and labels |

**Type rules:**
- 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.

## 4. Spacing

The entire system is built upon a consistent 4px base unit, creating a rhythmic and breathable structure through measured padding and margins.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 16 / 24 / 25 / 32 / 48 px
- **Rhythm:** A consistent 4px base unit is used throughout, with common padding values like 12px and 25px creating a balanced and breathable rhythm.

## 5. Surfaces

Depth is suggested, not commanded, through the use of subtle, soft drop shadows. Surfaces are defined by thin, translucent borders that maintain the overall calm and airy atmosphere.

- **Radius:** sm 4px · md 10px · lg 100px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The structural skeleton is a full-width, 12-column grid with a 24px gutter, providing a spacious foundation for content. Key components, like the modal, are centered overlays that split content between clear imagery and text on a soft background.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** 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.

## 7. Motion & Interaction

Motion is minimal and purely functional, designed to aid comprehension without distraction. Opacity fades and smooth, all-property transitions are used exclusively to clarify state changes, such as a modal appearing or a button being hovered.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fades for modal appearances (0.3s)
  - Smooth all-property transitions for hover states on interactive elements

- **Hover:** Elements likely have subtle opacity or color shifts on hover, with cursor: pointer indicating interactivity.
- **Click:** Buttons and interactive elements have defined cursor states and transitions.
- **Transition:** Global 'all' transition with durations like 0.3s for smooth state changes.
- **Keyboard:** Standard focus states expected for accessibility, likely with visible outlines or color changes.

## 8. Voice & Don'ts

The editorial voice is warm, direct, and design-conscious, speaking to parents who value quality aesthetics. It avoids technical jargon and aggressive sales language, favoring simple, action-oriented calls to action.

- **Tone:** Warm, inviting, and design-conscious, speaking directly to parents who value aesthetics and quality.
- **Headline style:** Clear and direct, often using the geometric serif for emphasis, as seen in the modal.
- **CTA style:** Action-oriented and simple (e.g., 'Enter to Win', 'Shop Now'), presented in rounded, colorful buttons.
- **Avoid:** Avoid overly technical jargon / Avoid aggressive sales language / Avoid cluttered or chaotic layouts

### Don'ts
- ❌ 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.

They deliberately reject stark white backgrounds, sharp corners, and dense text, ensuring the design never sacrifices its core warmth and breathing room.

## System Prompt (paste into AI tool)

```
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.
```