CURATED · OPEN · FREE

Caraway

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

homedtc

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://www.carawayhome.com

📦 Browse pack contents →

Identity DNA

premiumnon-toxicfamilymodernclean

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

Color

#1F3438Ink

#333333Ink soft

#FFFFFFBG

#E4E3DBBG soft

#B3C8E1BG quiet

#737373Muted

rgba(31,52,56,1.0)Line

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

Typography

transitional-serif · humanist-sans

display56px · 700
body16px · 400
small12px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 40px

pill · 9999px

1px solid #1F3438

rgba(0, 0, 0, 0.05) 0px 4px 5px 2px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

180msmicro

250mssmall

300msmedium

cubic-bezier(0.3, 1, 0.75, 1)easing

Subtle transitions on hover for buttons and links. · Smooth scroll or page transitions.

Smooth color or opacity transitions on interactive elements. · Immediate visual feedback, likely a slight scale or color change.

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.

Voice & Don'ts

Tone Confident, clean, and lifestyle-oriented, focusing on health and modern design.
Headlines Bold and declarative, using serif fonts to convey quality and trust.
CTAs Action-oriented and clear, often incorporating promotional details.

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.
Avoid: Jargon
Avoid: Overly technical language
Avoid: Aggressive sales tactics

Inside the pack — real screenshots

Caraway — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko