---
version: alpha
name: Care of Chan
description: Editorial warmth for a culinary events studio — a near-black ink on warm off-white canvas, oversized serif headlines paired with a quiet grotesque body, generous whitespace and image-first storytelling. Minimal chrome, no rounded flourish, color carried by photography not UI.
colors:
  # Canvas + ink
  background: "#f5f1ea"
  surface: "#ffffff"
  surface-soft: "#faf7f1"
  ink: "#1a1714"
  ink-pure: "#000000"

  # Accent — warm terracotta drawn from the food photography
  primary: "#b5462e"
  accent-clay: "#c9603f"
  accent-cream: "#e8dfd0"

  # Secondary text
  ink-secondary: "#5c544a"
  ink-muted: "#8a7f70"

  # Lines + tints
  border: "#ddd4c5"
  divider: "#cabfac"

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

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1.6px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.4px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.6px

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.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"

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

  image-tile:
    backgroundColor: "{colors.accent-cream}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  divider-rule:
    backgroundColor: "{colors.divider}"
    height: 1px
---

# Care of Chan Design System

## Overview

Care of Chan is a culinary events and hospitality studio, and its website reads like the printed menu of a thoughtful restaurant — warm, editorial, and unhurried. The canvas is a soft, paper-warm off-white (`{colors.background}`) rather than clinical white, immediately signaling that this is a brand about gathering, food, and human warmth. Near-black ink (`{colors.ink}`) carries a faint brown undertone, so the page never feels cold or corporate. Color in the UI is deliberately restrained; the real color comes from large, full-bleed food and event photography.

Typography does the heavy lifting. Oversized serif headlines (Playfair Display in this mapping) deliver an editorial, magazine-cover voice — "Gather with Ease." set large and tight. The serif's high contrast and elegant ductus evoke fine dining and print editorial. Against it, a quiet neutral grotesque (Inter) handles body copy, eyebrows, and UI, keeping everything legible and out of the way so the serif and the imagery can sing. The pairing of a dramatic serif display with an understated sans body is the brand's core typographic move.

Structurally, the layout is image-first and list-based. Services, collaborators, and offerings are presented as clean scannable lists; sections are separated by generous whitespace and thin hairline rules rather than boxes or shadows. There is almost no decorative chrome — corners are square, elevation is flat, borders are single hairlines in a warm taupe (`{colors.border}`). The only accent color is a terracotta/clay tone (`{colors.primary}`) pulled from the warmth of the photography, used sparingly for eyebrows, links, and hover states.

**Key Characteristics:**
- Warm paper-toned off-white canvas (`{colors.background}`), never clinical white
- Brown-tinted near-black ink (`{colors.ink}`) for warmth
- Oversized high-contrast serif display headlines paired with a neutral grotesque body
- Image-first, list-based information architecture
- Square corners and flat elevation — hairline rules, no shadows or boxes
- Single restrained terracotta accent (`{colors.primary}`) carried over from food photography
- Letter-spaced uppercase eyebrows for editorial section labels
- Generous vertical whitespace as the primary separation device

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas. The brand's signature surface.
- **Surface White** (`{colors.surface}`): Pure white for cards and lifted panels that need to read brighter than the paper canvas.
- **Soft Surface** (`{colors.surface-soft}`): A subtle warm tint between paper and white for alternating sections.
- **Ink** (`{colors.ink}`): Primary text and headings — near-black with a warm brown undertone.
- **True Black** (`{colors.ink-pure}`): Reserved for maximum-contrast detail moments.

### Accent
- **Terracotta** (`{colors.primary}`): The single warm accent — eyebrows, links, button hover. Drawn from the food photography.
- **Clay** (`{colors.accent-clay}`): Lighter terracotta for secondary accent touches.
- **Cream** (`{colors.accent-cream}`): Warm neutral fill behind image tiles and placeholders.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, de-emphasized list items.

### Lines & Tints
- **Border** (`{colors.border}`): Warm taupe hairline for rules, card outlines, nav underline.
- **Divider** (`{colors.divider}`): Slightly stronger hairline for section dividers.

## Typography

### Font Family
- **Display / Headings**: `Playfair Display`, with fallbacks `Georgia, serif` — a high-contrast editorial serif.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif` — a neutral grotesque.

### 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` | 72px serif hero — editorial billboard impact |
| `section-heading` | Major section titles in serif |
| `sub-heading` | Lighter serif sub-sections |
| `eyebrow` | Letter-spaced uppercase section labels |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | List items, secondary copy |
| `button-ui` | Buttons and nav links |
| `caption` | Image captions, metadata |

### Principles
- **Serif for voice, sans for function**: Every headline is the dramatic high-contrast serif; everything operational (nav, buttons, lists) is the quiet sans.
- **Editorial eyebrows**: Section labels use letter-spaced uppercase Inter in terracotta — the magazine-section-header move.
- **Tight display tracking**: Serif headlines run negative letter-spacing for a confident, set-in-print feel.
- **Generous line-height on body**: 1.60–1.65 keeps reading copy airy, matching the whitespace-heavy layout.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Whitespace is the primary separation device — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical padding.

### Grid & Container
- Max content width: approximately 1200px
- Hero: large serif headline over or beside full-bleed imagery
- Services/collaborators: clean single-column or two-column scannable lists
- Image galleries: edge-to-edge or tight-gutter grids of photography

### Whitespace Philosophy
- **Editorial breathing room**: Massive vertical padding between sections; the page is meant to feel like turning pages in a print magazine.
- **Hairlines over boxes**: Separation comes from thin warm rules (`{colors.divider}`) and space, never from shadows or filled containers.
- **Image as content**: Photography occupies large blocks; surrounding text is sparse and intentional.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for everything — the system is flat |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, image tiles, nav underline |
| Rule (Level 1b) | `1px solid {colors.divider}` | Section dividers |

**Depth Philosophy**: Care of Chan avoids shadows entirely. Depth and structure come from hairline rules, square edges, and generous spacing — the visual language of editorial print, not app UI.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, image tiles are all square |
| `xs` | 2px | Tiny incidental rounding |
| `sm` | 4px | Small functional elements |
| `md` | 6px | Maximum rounding, used sparingly |
| `pill` | 9999px | Reserved for tags/dots if needed |

## Components

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

### Buttons
- **`button-primary`** — Solid ink, paper-toned text, square corners. Hover shifts to terracotta (`{colors.primary}`).
- **`button-outline`** — Transparent with a 1px ink border, square corners. The quieter secondary action.

### Labels
- **`eyebrow-label`** — Letter-spaced uppercase terracotta text marking section starts.

### Cards & Tiles
- **`card`** — White surface, hairline border, square corners, generous padding. No shadow.
- **`image-tile`** — Cream placeholder fill behind photography, hairline framed.

### Navigation
- **`nav-bar`** — Paper background, ink links, hairline bottom border. Minimal and quiet.

### Dividers
- **`divider-rule`** — 1px warm divider line separating sections.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white
- Pair the high-contrast serif display with the neutral sans body
- Keep corners square and elevation flat — hairlines, not shadows
- Use terracotta (`{colors.primary}`) sparingly for accents only
- Let photography carry the color
- Use letter-spaced uppercase eyebrows for section labels
- Give sections generous vertical whitespace

### Don't
- Don't introduce rounded corners or drop shadows — it breaks the editorial flatness
- Don't set body copy in the serif — the serif is for headlines only
- Don't add a second accent color; the palette is warm-neutral plus terracotta
- Don't crowd sections; whitespace is the design
- Don't use clinical pure white as the page background
- Don't apply terracotta to large fills — it's an accent, not a surface

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, headline scales down, lists stack |
| Tablet | 600–1024px | Two-column lists, image grids tighten |
| Desktop | 1024–1400px | Full editorial layout, max content width |
| Large | >1400px | Centered with generous margins |

### Collapsing Strategy
- Hero serif: 72px → scales down while keeping tight tracking
- Navigation: horizontal links → simple menu
- Image grids: multi-column → single column, maintaining square framing
- Section spacing: 96px+ → ~48px on mobile

### Image Behavior
- Full-bleed photography maintains aspect ratio across sizes
- Image tiles keep hairline framing at all breakpoints
- Photography remains the dominant visual element on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Primary CTA: Ink `{colors.ink}` (hover terracotta `{colors.primary}`)
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent / eyebrow: Terracotta `{colors.primary}`
- Hairline: `{colors.border}`

### Example Component Prompts
- "Create a hero on warm paper background `{colors.background}`. Headline 'Gather with Ease.' at 72px Playfair Display weight 500, line-height 1.02, letter-spacing -1.5px, color `{colors.ink}`. Eyebrow above it in 13px Inter weight 500 uppercase, letter-spacing 1.6px, terracotta `{colors.primary}`."
- "Design a service list: section heading 44px Playfair Display, items in 15px Inter weight 400 `{colors.ink-secondary}`, separated by 1px `{colors.divider}` hairlines. No boxes, generous vertical space."
- "Build a primary button: solid `{colors.ink}` fill, `{colors.on-ink}` text, square corners (0px radius), 14px Inter weight 500, padding 14px 28px. Hover background shifts to terracotta `{colors.primary}`."
- "Create an image gallery: square-cornered tiles with `{colors.accent-cream}` placeholder fill and 1px `{colors.border}` frame, tight gutters, edge-to-edge on mobile."

### Iteration Guide
1. Serif headlines, sans body — never mix the roles
2. Warm paper canvas, never clinical white
3. Flat and square — hairlines and whitespace replace shadows and boxes
4. One accent only: terracotta, used sparingly
5. Let photography supply the color and energy

---

## 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 Care of Chan. Brand names and trademarks belong to their respective owners.