---
version: alpha
name: Mala Project
description: Warm editorial restaurant identity — a bone-paper cream canvas with deep ink text, a single oxblood-red Sichuan accent, bilingual English/Chinese typography, and a serif display voice paired with a clean sans for UI. Generous whitespace, hairline rules, and squared-off buttons evoke a printed menu more than a web app.

colors:
  # Canvas + ink
  background: "#f4efe6"
  surface: "#ffffff"
  surface-soft: "#faf6ee"
  ink: "#1a1714"
  ink-secondary: "#5c544a"
  ink-muted: "#8a8073"

  # Brand accent — Sichuan oxblood / chili red
  primary: "#a01e1e"
  primary-hover: "#7e1717"
  accent-warm: "#c8702a"

  # Lines + neutrals
  border: "#d8cfc0"
  border-strong: "#1a1714"
  divider: "#e3dccf"

  # On-color
  on-primary: "#f4efe6"
  on-ink: "#f4efe6"

  # Status-ish utility
  success: "#4a6b3e"
  link: "#a01e1e"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.25px
  heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  subheading:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 1.5px
  eyebrow:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 2px
  caption:
    fontFamily: "Work Sans, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.25px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.divider}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"
  menu-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 0px
    borderColor: "{colors.divider}"
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Mala Project Design System

## Overview

Mala Project is a Sichuan mala xiang guo restaurant in New York, and its site reads like a well-set printed menu rather than a software product. The whole experience rests on a warm bone-paper canvas (`{colors.background}`) — a cream with just enough warmth to feel like uncoated stock — with deep near-black ink (`{colors.ink}`) for text. There is exactly one brand color doing the emotional work: a deep Sichuan oxblood red (`{colors.primary}`) that stands in for chili heat, anchoring CTAs, links, and the occasional eyebrow label without ever flooding the page.

The typographic system is the personality. Headlines run in a high-contrast serif display voice (Playfair Display as the closest Google match) that gives the brand its editorial, slightly old-world warmth, while all functional UI — navigation, buttons, body copy, captions — sits in a clean humanist sans (Work Sans). This serif/sans pairing is the central move: the serif announces, the sans operates. Bilingual English/Chinese labels run side by side throughout the navigation ("Menu 菜单", "Reserve 预定"), so the type system has to hold both scripts gracefully.

Chrome is deliberately spare. Buttons are squared off (no radius), often just an ink-bordered rectangle that inverts to solid ink on hover, or a solid oxblood fill for the primary action. Separation between sections comes from generous whitespace and hairline rules (`{colors.divider}`), not from boxes or shadows. There are essentially no drop shadows; depth is implied by spacing and the contrast between the cream canvas and occasional pure-white surfaces (`{colors.surface}`).

**Key Characteristics:**
- Warm bone-paper cream canvas (`{colors.background}`) with deep ink text — printed-menu feel
- A single oxblood-red Sichuan accent (`{colors.primary}`) for CTAs, links, and heat cues
- Serif display (Playfair Display) for headlines + humanist sans (Work Sans) for all UI
- Bilingual English/Chinese typography baked into the navigation
- Squared-off, zero-radius buttons; bordered rectangles that invert to ink on hover
- Hairline rules and whitespace instead of cards, shadows, and boxes
- Wide-tracked uppercase eyebrows and buttons for an editorial cadence

## Colors

### Canvas & Ink
- **Bone Paper** (`{colors.background}`): The default page canvas — a warm cream evoking uncoated menu stock.
- **White Surface** (`{colors.surface}`): Occasional pure-white panels and inputs that lift off the cream.
- **Soft Cream** (`{colors.surface-soft}`): Subtle alternating-section tint.
- **Ink** (`{colors.ink}`): Primary text and headings — near-black, slightly warm.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, fine print, disabled text.

### Brand Accent
- **Sichuan Oxblood** (`{colors.primary}`): The signature chili red — CTAs, links, eyebrows, badges.
- **Oxblood Hover** (`{colors.primary-hover}`): Darker red on interaction.
- **Warm Clay** (`{colors.accent-warm}`): A secondary warm earthen tone for occasional highlights.

### Lines & Neutrals
- **Border** (`{colors.border}`): Soft hairline around inputs and panels.
- **Border Strong** (`{colors.border-strong}`): Ink outline on secondary buttons and emphatic rules.
- **Divider** (`{colors.divider}`): Whisper-thin section and list separators.

### On-Color
- **On Primary** (`{colors.on-primary}`): Cream text on oxblood fills.
- **On Ink** (`{colors.on-ink}`): Cream text on ink fills (inverted buttons).

## Typography

### Font Family
- **Display / Headings**: `Playfair Display`, with fallbacks `Georgia, serif` — high-contrast serif, editorial warmth.
- **UI / Body**: `Work Sans`, with fallbacks `Helvetica, Arial, sans-serif` — clean humanist sans for everything functional.

### 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` | 56px serif hero — restaurant name, landing statement |
| `display` | Major section titles |
| `heading` | Sub-section and dish-group headings |
| `subheading` | Sans intro lines under serif headings |
| `body-large` | Lead paragraphs, about copy |
| `body` | Standard reading and menu text |
| `body-small` | Dense lists, secondary detail |
| `nav-link` | Navigation labels (incl. bilingual) |
| `button-ui` | Buttons — wide-tracked uppercase |
| `eyebrow` | Section kickers above headings |
| `caption` | Metadata, hours, fine print |

### Principles
- **Serif announces, sans operates**: Playfair Display carries all expressive headline moments; Work Sans handles every interactive and reading surface.
- **Bilingual by default**: English and Chinese labels coexist; type sizes leave room for both scripts.
- **Wide tracking for cadence**: Eyebrows and buttons use 1.5–2px letter-spacing in uppercase to feel printed and composed.
- **Restraint in weight**: Serif stays at a medium (500) weight to preserve elegance; sans uses 600 only for buttons and eyebrows.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large editorial jumps (`{spacing.3xl}`–`{spacing.4xl}`) for breathing room between sections.

### Grid & Container
- Centered single-column content with generous side margins
- Max content width approximately 1100px
- Menu and content sections stack as full-width bands separated by hairline rules
- Hero is a centered serif statement over the cream canvas

### Whitespace Philosophy
- **Printed-page calm**: Large vertical padding between sections; the cream canvas is allowed to breathe.
- **Rules over boxes**: Separation comes from `{colors.divider}` hairlines and whitespace, not cards or shadows.
- **One accent, used sparingly**: Oxblood appears only where action or heat is implied, never as decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks, most chrome |
| Hairline (Level 1) | 1px `{colors.divider}` rule | Section and list separation |
| Outline (Level 1b) | 1px `{colors.border-strong}` | Secondary button borders, emphatic frames |
| Surface (Level 2) | White `{colors.surface}` on cream | Inputs, occasional lifted panels |
| Focus (Accessibility) | 2px `{colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Mala Project effectively has no shadow system — depth is editorial, created by the contrast between the warm cream canvas and pure-white surfaces, plus hairline rules and whitespace. Nothing floats; everything sits on the page like ink on paper.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs — squared-off default |
| `xs` | 2px | Minimal softening where needed |
| `sm` | 4px | Small functional elements |
| `md` | 6px | Rare softer containers |
| `pill` | 9999px | Small status badges only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid oxblood fill, cream text, zero radius, wide-tracked uppercase. The default action.
- **`button-secondary`** — Cream surface with an ink border; inverts to solid ink on hover.

### Navigation
- **`nav-bar`** — Cream header, ink links, bilingual labels, hairline bottom divider. No sticky shadow.

### Cards & Lists
- **`card`** — White panel on cream, squared corners, soft hairline border, no shadow.
- **`menu-item`** — Full-width row separated by a `{colors.divider}` hairline; serif/sans mix for dish name and description.

### Inputs
- **`input`** — White surface, soft border, zero radius; focus switches the border to oxblood.

### Labels & Badges
- **`eyebrow-label`** — Oxblood wide-tracked uppercase kicker above headings.
- **`badge`** — Small oxblood pill with cream text for tags or status.

## Do's and Don'ts

### Do
- Keep the cream `{colors.background}` as the dominant canvas
- Use Playfair Display for headlines and Work Sans for all UI and body
- Reserve oxblood `{colors.primary}` for actions, links, and heat cues
- Separate sections with hairline rules and whitespace, not boxes or shadows
- Keep buttons squared-off (zero radius) with wide-tracked uppercase labels
- Support bilingual English/Chinese labels in navigation and headings

### Don't
- Don't introduce drop shadows or floating cards — depth is editorial
- Don't round buttons or inputs — the squared rectangle is the identity
- Don't flood the page with oxblood; it is a single, sparing accent
- Don't set body or menu text in the serif — serif is for headlines only
- Don't use a stark pure-white page background; the warmth of the cream is essential
- Don't add a second loud accent color — restraint is the brand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hamburger nav, hero serif scales down |
| Tablet | 600–1024px | Wider margins, two-up content where it fits |
| Desktop | 1024–1200px | Centered single column, full editorial spacing |
| Large Desktop | >1200px | Maximum content width, generous side margins |

### Touch Targets
- Buttons use comfortable 14px/28px padding
- Bilingual nav links keep adequate spacing for both scripts
- Menu rows are full-width tap targets

### Collapsing Strategy
- Hero serif: 56px → scales down on mobile while keeping line-height tight
- Navigation: horizontal bilingual links → hamburger menu
- Section spacing: 64–96px → tightened on mobile but still generous
- Menu lists: full-width rows remain single-column at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Bone Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Primary CTA: Oxblood `{colors.primary}`, cream text, zero radius
- Secondary CTA: cream with ink border, inverts to ink on hover
- Link: Oxblood `{colors.link}`
- Divider: hairline `{colors.divider}`

### Example Component Prompts
- "Create a hero on a warm cream `{colors.background}` canvas. Restaurant name at 56px Playfair Display weight 500, line-height 1.05, color `{colors.ink}`. Sans intro line at 18px Work Sans weight 500, letter-spacing 0.5px, color `{colors.ink-secondary}`. Oxblood CTA (`{colors.primary}`, zero radius, 14px 28px padding, uppercase wide-tracked Work Sans 14px weight 600)."
- "Design a menu list: full-width rows on cream, each separated by a 1px `{colors.divider}` hairline. Dish name in Work Sans 16px weight 500 `{colors.ink}`, description in 14px `{colors.ink-secondary}`, price right-aligned."
- "Build a secondary button: cream background, 1px `{colors.border-strong}` border, zero radius, uppercase Work Sans 14px weight 600 letter-spacing 1.5px; on hover fill `{colors.ink}` with `{colors.on-ink}` text."
- "Add an eyebrow label above a heading in oxblood `{colors.primary}`, Work Sans 12px weight 600, uppercase, letter-spacing 2px."

### Iteration Guide
1. Cream canvas + ink text + one oxblood accent is the entire palette — resist adding more.
2. Serif (Playfair Display) for headlines only; sans (Work Sans) for everything functional.
3. Zero radius everywhere except small pill badges.
4. Separation is hairlines and whitespace — never shadows or boxes.
5. Buttons and eyebrows are uppercase with wide tracking; body and serif headings are not.
6. Keep bilingual English/Chinese labels balanced in size.

---

## 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 Mala Project. Brand names and trademarks belong to their respective owners.