---
name: Caraway
description: "A great example of a premium DTC brand using restrained design to highlight product quality and lifestyle."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F3438"
  secondary: "#333333"
  neutral: "#737373"
  bg-soft: "#E4E3DB"
  bg-quiet: "#B3C8E1"
  line: "rgba(31,52,56,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.4px"
  small:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.4px"

rounded:
  sm: 4px
  md: 8px
  lg: 40px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A modern, premium DTC e-commerce site for non-toxic kitchenware.

*A premium, non-toxic cookware brand focused on modern home life.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F3438`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(31,52,56,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A 4px base grid with consistent 11px and 8px gaps between UI elements.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 4px 5px 2px
- Borders: 1px solid #1F3438

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 40px
- `pill`: 9999px

## Components

- **button:** Highly rounded (40px), pill-shaped buttons with solid backgrounds or outlines.
- **card:** Minimalist cards, primarily defined by large, high-quality product or lifestyle photography.
- **chip:** Small, rounded badges used for status (e.g., 'NEW').
- **input:** Full-width search bar with rounded ends and an integrated search icon.
- **hero:** A large, split-screen hero section combining bold serif typography with lifestyle imagery.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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