---
version: alpha
name: Tadaima
description: Quiet Japanese-Scandinavian retail editorial — a warm paper-white canvas, deep charcoal ink, and muted clay and sage accents. Generous whitespace, a refined serif display paired with a clean grotesque, near-zero radii, and hairline borders. The interface recedes so the objects can breathe.
colors:
  # Canvas + ink
  background: "#f5f1ea"
  surface: "#ffffff"
  surface-soft: "#ebe5db"
  ink: "#1f1b16"
  ink-soft: "#3a352d"

  # Secondary / muted text
  ink-secondary: "#6b6256"
  ink-tertiary: "#9a9082"

  # Brand accents — muted, earthy
  primary: "#9c6a4a"        # warm clay / terracotta
  primary-deep: "#7d5238"
  sage: "#8a9279"           # soft muted green
  sand: "#d9cdb8"

  # Lines + hairlines
  border: "#ddd5c8"
  border-strong: "#c7bca9"

  # On-color
  on-primary: "#fbf8f2"
  on-ink: "#f5f1ea"

  # States
  link: "#7d5238"
  focus: "#9c6a4a"

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.8px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0px
  body-medium:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 1.6px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0.2px
  price:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 15px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 15px 32px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 15px 32px
    borderColor: "{colors.border-strong}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 15px 32px

  link-underline:
    textColor: "{colors.link}"
    typography: "{typography.body-medium}"

  badge:
    backgroundColor: "{colors.sage}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  product-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 40px
    borderColor: "{colors.border}"

  price-tag:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.price}"
---

# Tadaima Design System

## Overview

Tadaima — Japanese for "I'm home" — is a Copenhagen design retailer, and its website behaves like a well-kept room rather than a storefront. The canvas is a warm paper white (`{colors.background}`), not the clinical pure white of most e-commerce. Everything sits on this soft, slightly toasted surface so that product photography and objects feel placed on a paper backdrop. Deep, near-black charcoal ink (`{colors.ink}`) carries the text, and the whole palette stays muted and earthen — there is no saturated brand blue, no glossy gradient, no shadow drama.

The typographic system is the brand's voice. A high-contrast serif (Cormorant Garamond as the closest Google match) handles all display and section headings with light weight and tight tracking, lending an editorial, almost magazine-like calm. Underneath it, a geometric grotesque (Jost) handles body copy, labels, and prices at light weights with wide letter-spacing on the uppercase micro-labels. The pairing — refined serif over airy sans — is the entire personality: quiet, considered, Scandinavian-Japanese.

Chrome is deliberately near-invisible. Borders are hairlines in a warm taupe (`{colors.border}`), corners are square or barely rounded (`{rounded.none}` to `{rounded.xs}`), and there are no card shadows. Product cards are simply image, title, and price with generous air around them. Accents appear only sparingly: a warm clay/terracotta (`{colors.primary}`) and a soft muted sage (`{colors.sage}`) mark sale tags, links, and the occasional call to action. The negative space does the heavy lifting.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`) — never clinical pure white as the page base
- Serif display (Cormorant Garamond) over geometric-grotesque body (Jost) — editorial calm
- Light type weights (300–500) throughout; nothing bolder than medium
- Wide-tracked uppercase micro-labels (`{typography.label}`, 1.6px letter-spacing)
- Square-to-hairline geometry — `{rounded.none}` buttons and product cards, no shadows
- Muted earthen accents only: clay (`{colors.primary}`) and sage (`{colors.sage}`)
- Generous whitespace (`{spacing.3xl}`–`{spacing.4xl}`) framing every object

## Colors

### Canvas & Ink
- **Paper White** (`{colors.background}`): The page base — a warm, toasted off-white.
- **Surface** (`{colors.surface}`): Pure white used inside image frames and content cards.
- **Surface Soft** (`{colors.surface-soft}`): Slightly deeper warm tint for alternating sections.
- **Charcoal Ink** (`{colors.ink}`): Headings, body, primary buttons. Warm near-black, never pure.
- **Ink Soft** (`{colors.ink-soft}`): Softer ink for longer reading passages.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Prices, captions, supporting copy.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Placeholder text, fine print, metadata.

### Brand Accents
- **Clay** (`{colors.primary}`): The warm terracotta accent — links, accent CTAs, highlights.
- **Clay Deep** (`{colors.primary-deep}`): Hover state for primary/accent, underlined links.
- **Sage** (`{colors.sage}`): Soft muted green — badges, secondary tags, seasonal markers.
- **Sand** (`{colors.sand}`): Warm neutral fill for soft section blocks and dividers.

### Lines
- **Border** (`{colors.border}`): Hairline dividers and product-card outlines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button edges.

### On-Color
- **On Primary** (`{colors.on-primary}`): Text on clay/sage fills.
- **On Ink** (`{colors.on-ink}`): Paper-tinted text on charcoal buttons.

## Typography

### Font Family
- **Display / Headings**: `Cormorant Garamond`, with fallbacks `Georgia, serif` — high-contrast serif, light weight.
- **Body / UI**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — geometric grotesque, light weights.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — magazine cover impact |
| `display` | Major section openers |
| `section-heading` | Feature / collection titles |
| `card-title` | Product names |
| `body-large` | Editorial introductions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, links |
| `label` | Wide-tracked uppercase micro-labels, buttons, nav |
| `caption` | Fine print, metadata |
| `price` | Product prices |

### Principles
- **Serif announces, sans reads**: Cormorant Garamond carries every heading; Jost carries everything functional.
- **Light by default**: Body at weight 300, headings at 500 — the page never feels heavy.
- **Wide tracking on small caps**: Uppercase labels open to 1.6px letter-spacing for an editorial, gallery-label feel.
- **No bold**: 500 is the ceiling. Emphasis comes from size, serif/sans contrast, and space.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 140px) between major sections.

### Grid & Container
- Max content width: approximately 1280px with generous side gutters
- Hero: large serif headline over a single full-bleed or framed image
- Product grids: 2–4 column, wide gaps, no card chrome
- Hairline dividers (`{colors.border}`) separate sections rather than background shifts

### Whitespace Philosophy
- **Room to breathe**: Objects are framed by air; whitespace is the primary compositional tool.
- **Quiet rhythm**: Sections alternate paper white and surface-soft warm tints, never high contrast.
- **No drop shadows**: Depth comes from the warm paper base and hairline borders alone.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, image frames — the default |
| `xs` | 2px | Content cards, soft containers |
| `sm` | 4px | Inputs, minor containers |
| `md` | 6px | Larger soft blocks |
| `pill` | 9999px | Small badges/tags only |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Charcoal fill, paper text, square corners, wide-tracked uppercase label. The default CTA.
- **`button-secondary`** — Paper surface with a hairline `{colors.border-strong}` edge.
- **`button-accent`** — Clay (`{colors.primary}`) fill for highlighted seasonal actions.

### Product Cards
- **`product-card`** — Image, title (`{typography.card-title}`), and price (`{typography.price}`). No shadow, square corners, hairline divider.

### Badges
- **`badge`** — Sage pill for "New" / "Restocked" markers; the only pill geometry in the system.

### Inputs
- **`input`** — Paper surface, square, hairline border; focus shifts the border to clay (`{colors.focus}`).

### Navigation
- **`nav-bar`** — Paper background, wide-tracked uppercase links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas warm paper white (`{colors.background}`), never pure white
- Pair Cormorant Garamond display with Jost body
- Use light weights (300 body, 500 headings) — nothing heavier
- Track uppercase labels wide (1.6px)
- Keep buttons and product cards square (`{rounded.none}`)
- Reserve clay and sage accents for links, tags, and the occasional CTA
- Let whitespace and hairline borders carry the structure

### Don't
- Don't use pure white as the page base — it breaks the warmth
- Don't add drop shadows or elevation drama
- Don't use bold weights — 500 is the ceiling
- Don't round buttons or product cards — square is the identity
- Don't introduce saturated or cool brand colors; stay earthen
- Don't crowd the layout — air is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, stacked nav |
| Tablet | 600–1024px | 2-column product grids, expanded gutters |
| Desktop | 1024–1280px | 3–4 column grids, full editorial spacing |
| Large | >1280px | Centered, generous side margins |

### Collapsing Strategy
- Hero serif: 64px → ~36px on mobile, keeps tight tracking
- Product grid: 4-column → 2-column → single column
- Nav: horizontal uppercase links → hamburger drawer
- Section spacing: 140px → ~64px on mobile

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tadaima. Brand names and trademarks belong to their respective owners.