# Caraway · Design system migration spec

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

> A great example of a premium DTC brand using restrained design to highlight product quality and lifestyle.

## 1. Identity DNA

Caraway's design system is built on a principle of deliberate restraint, much like a well-appointed modern kitchen where every tool has its purpose and place. The identity is defined by a clean, spacious aesthetic that prioritizes high-quality photography and a muted, earthy palette, creating a sense of trustworthy, healthy living.

**One-liner:** A modern, premium DTC e-commerce site for non-toxic kitchenware.
**Keywords:** premium · non-toxic · family · modern · clean
**Analogy:** A premium, non-toxic cookware brand focused on modern home life.

## 2. Color

The color system is anchored by a deep teal and supported by muted greens and soft blues, establishing a natural, grounded foundation. High-contrast is achieved through typography and photographic content rather than through the palette itself, which remains deliberately subdued.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E4E3DB` | card background |
| `--bg-quiet` | `#B3C8E1` | quiet area |
| `--ink` | `#1F3438` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgba(31,52,56,1.0)` | divider |

**Color principle:** A restrained palette with earthy, muted tones, relying on high-quality photography for visual impact.

The guiding principle is that color serves the product and lifestyle imagery, never competing with it.

## 3. Typography

Typography employs a clear hierarchy between a transitional-serif for impactful headlines and a humanist-sans for all functional text, establishing a voice that is both authoritative and approachable. This pairing allows the brand to convey quality and trust in display settings while maintaining excellent readability for body copy and interface elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -0.5px | Main hero headlines |
| body | 16px | 1.5 | 400 | 0.4px | General body text and UI elements |
| small | 12px | 1.3 | 400 | 0.4px | Secondary labels and metadata |

**Type rules:**
- Use transitional-serif for impactful headlines and humanist-sans for all functional text.
- Maintain a consistent letter-spacing of 0.4px across body text for readability.

## 4. Spacing

Spacing follows a strict 4px base grid, creating a consistent and predictable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A 4px base grid with consistent 11px and 8px gaps between UI elements.

## 5. Surfaces

Surface treatments are minimal, relying on very soft, diffused shadows and a consistent 1px border in deep teal to define interactive containers. The approach avoids heavy depth effects, keeping the focus on content and photographic elements.

- **Radius:** sm 4px · md 8px · lg 40px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 4px 5px 2px
- **Borders:** 1px solid #1F3438

## 6. Layout

The layout skeleton is wide and image-heavy, built around full-bleed hero sections that combine bold serif typography with lifestyle photography. The structure uses alternating background colors and generous whitespace to create a clear, airy visual hierarchy.

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

**Skeleton:** A wide, image-heavy layout with full-bleed hero sections and alternating background colors.

## 7. Motion & Interaction

Motion is treated as a subtle, functional layer, with smooth transitions applied to interactive states like hovers and page changes. The philosophy prioritizes refinement over spectacle, using a consistent custom easing to guide the user's attention without distraction.

- **Durations:** micro 180ms · small 250ms · medium 300ms
- **Easing:** `cubic-bezier(0.3, 1, 0.75, 1)`
- **Patterns:**
  - Subtle transitions on hover for buttons and links.
  - Smooth scroll or page transitions.

- **Hover:** Smooth color or opacity transitions on interactive elements.
- **Click:** Immediate visual feedback, likely a slight scale or color change.
- **Transition:** 0.25s to 0.3s transitions using a custom cubic-bezier easing.
- **Keyboard:** Standard focus states for accessibility, likely using a visible outline.

## 8. Voice & Don'ts

The editorial voice is confident, clean, and lifestyle-oriented, focusing on health, modern design, and the tangible qualities of the products. It uses bold, declarative headlines in serif type and action-oriented calls to action that are clear and informative.

- **Tone:** Confident, clean, and lifestyle-oriented, focusing on health and modern design.
- **Headline style:** Bold and declarative, using serif fonts to convey quality and trust.
- **CTA style:** Action-oriented and clear, often incorporating promotional details.
- **Avoid:** Jargon / Overly technical language / Aggressive sales tactics

### Don'ts
- ❌ don't use neon or highly saturated accent colors — screenshot shows a restrained palette of muted earthy tones like #5E6C51 and #B3C8E1.
- ❌ don't use sharp, square corners on primary buttons — screenshot shows pill-shaped buttons with a 40px border-radius.
- ❌ don't use aggressive, all-caps text for headlines — screenshot shows mixed-case serif headlines and uppercase only for small labels.
- ❌ don't use generic sans-serif fonts for everything — screenshot shows a distinct transitional-serif for display headlines.
- ❌ don't crowd the UI with too much text — screenshot shows a spacious layout with large margins and clear visual hierarchy.
- ❌ don't use dark mode or heavy background patterns — screenshot shows a clean, light-mode-first design with solid or very subtle gradient backgrounds.

The system deliberately avoids jargon, aggressive sales language, and technical complexity to maintain its trustworthy and accessible tone.

## System Prompt (paste into AI tool)

```
Caraway is a premium DTC e-commerce site for non-toxic kitchenware. Its design DNA is defined by a clean, spacious layout, a restrained palette featuring deep teal (#1F3438), olive green (#5E6C51), and soft blue (#B3C8E1), and a mix of transitional-serif (for display) and humanist-sans (for body) typography. The site emphasizes high-quality lifestyle photography and a sense of modern, healthy living. Critical don'ts: avoid neon colors, don't use square buttons, and avoid all-caps for headlines. The layout is wide and image-heavy, focusing on trust and product quality.
```