Caraway — design system & UI screens
Warm editorial DTC hero with a navy-cookware kitchen spread; 'Stars, Stripes & Serious Savings', a red Save-up-to-$975 bundle badge and a best-sellers product row.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/caraway.
Decoded design system
Caraway's decoded design system: background #FCFCF9, text #000000, accent #C12F28, link #C12F28, primary #1F3438; type scale h1 48px / h2 20px / body 14.4px; 4px spacing base; 3px base radius. The single interactive/action color is #1F3438 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FCFCF9 |
| surface | #ECECEA |
| border | #D6D6D3 |
| text | #000000 |
| text_muted | #5F5F5E |
| primary | #1F3438 |
| accent | #C12F28 |
| link | #C12F28 |
| secondary | #FBF3E0 |
| button_bg | #1F3438 |
| button_text | #FFFFFF |
Using these colors
- Action color
#1F3438— the single interactive color; only on things you click or must notice, never large fills. primary,button_bgare all#1F3438— one role, not several (the action color).accent,linkare all#C12F28— one role, not several (the action color).- accent
#C12F28— accent for emphasis — keep it rare on the page. - secondary
#FBF3E0— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Suisse Works
- Body: Moderat
- h1: 48px
- h2: 20px
- body: 14.4px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 3px
- button: 40px
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Pages
Sections (8)
- Hero — Stars, Stripes & Serious Savings
- Gallery / Showcase — Save on Best Sellers row
- Gallery / Showcase — Kitchenware With High Standards
- Banner — Your Home, Made Better ticker
- Testimonial / Social Proof — Join the 2.5M+ Who Cook
- Feature — Transparency Is Our Standard
- Gallery / Showcase — Ceramic prep ambient video
- Footer — Email signup and footer