PIAF DESIGN.md — Technical Reference Summary

Version: 2.0 · April 2026

Format: Agent-consumable design system rules (Google Stitch DESIGN.md)

Stack: Next.js 14+ · Sanity CMS · Tailwind CSS · Vercel

Direction: Spacious Minimal × Warm Tonal

Design Tokens — CSS Custom Properties

Colour

:root {
  /* Backgrounds */
  --colour-bg:           #F5F2EC;   /* Harbour Linen */
  --colour-surface:      #EDE9E1;   /* Warm Stone */
  --colour-surface-deep: #DDD7CC;   /* Sand Dune */

  /* Text */
  --colour-text:         #1F1E1B;   /* Deep Charcoal */
  --colour-text-sub:     #5A5650;   /* Slate Taupe */
  --colour-text-muted:   #9A948C;   /* Warm Ash */

  /* Accent */
  --colour-accent:       #B87E6A;   /* Warm Clay */
  --colour-accent-light: #D9B9AE;   /* Blush Sand */
  --colour-accent-dark:  #8C5C4A;   /* Fired Clay */

  /* Utility */
  --colour-border:       #D4CEC5;   /* Stone Line */
  --colour-overlay:      rgba(31, 30, 27, 0.45); /* Dusk Veil */
  --colour-white:        #FFFFFF;   /* Dark/image backgrounds only */
}

Tonal range (light → dark):

#F5F2EC  #EDE9E1  #DDD7CC  #B87E6A  #5A5650  #1F1E1B
Harbour  Warm     Sand     Warm     Slate    Deep
Linen    Stone    Dune     Clay     Taupe    Charcoal

Typography

:root {
  --font-heading: 'Canela Deck Web', 'Noto Serif TC', Georgia, serif;
  --font-body:    'Montserrat', 'Noto Sans TC', system-ui, sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif; /* pull quotes ONLY */
  --font-cn-heading: 'Noto Serif TC', serif;
  --font-cn-body:    'Noto Sans TC', sans-serif;

  /* Type scale */
  --text-display: clamp(3rem, 6vw, 5rem);       /* 48–80px */
  --text-h1:      clamp(2.25rem, 4vw, 3.5rem);  /* 36–56px */
  --text-h2:      clamp(1.75rem, 3vw, 2.5rem);  /* 28–40px */
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem); /* 20–28px */
  --text-h4:      1.125rem;                     /* 18px */
  --text-pull:    clamp(2rem, 3vw, 3rem);        /* 32–48px — Cormorant Italic only */
  --text-body-lg: 1.125rem;                     /* 18px */
  --text-body:    1rem;                         /* 16px */
  --text-caption: 0.875rem;                     /* 14px */
  --text-button:  0.8125rem;                    /* 13px */
  --text-overline:0.75rem;                      /* 12px */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Line heights */
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-pull:     1.3;
  --lh-body:     1.65;
  --lh-body-cjk: 1.80;
  --lh-tight:    1.25;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.12em;  /* buttons */
  --ls-widest:   0.20em;  /* overlines */
}

Type Role Assignments

Role	Size	Weight	Font
Display	5rem / 80px	300 Light	Canela Deck Web
H1	3.5rem / 56px	400 Regular	Canela Deck Web
H2	2.5rem / 40px	400 Regular	Canela Deck Web
H3	1.75rem / 28px	300 Light	Canela Deck Web
H4	1.125rem / 18px	600 SemiBold	Montserrat
Pull Quote	2rem–3rem	Italic 300–400	Cormorant Garamond Italic — max one per section
Body Large	1.125rem / 18px	400 Regular	Montserrat
Body	1rem / 16px	400 Regular	Montserrat
Caption	0.875rem / 14px	400 Regular	Montserrat
Button	0.8125rem / 13px	500 Medium	Montserrat (all-caps)
Nav	0.8125rem / 13px	500 Medium	Montserrat
Overline	0.75rem / 12px	600 SemiBold	Montserrat (all-caps)

Chinese Typography

Role	Font	Size	Line-height
CN Headings	Noto Serif TC Light (300)	~10% smaller than EN	1.3
CN Body	Noto Sans TC Regular (400)	1.1rem / 17.6px	1.8
CN UI / Nav	Noto Sans TC Regular/Medium	0.8125rem	1.5
CN Pull Quote	Noto Serif TC Light	2rem–2.5rem, ls 0.05em	1.3

Spacing

:root {
  --space-1:  8px;   --space-2:  16px;  --space-3:  24px;
  --space-4:  32px;  --space-5:  48px;  --space-6:  64px;
  --space-7:  80px;  --space-8:  96px;  --space-9:  128px;
  --space-10: 160px;
  --width-content:   800px;
  --width-container: 1320px;
  --width-narrow:    600px;
  --width-narrative: 700px;
  --radius-pill:     100px;
  --radius-card:     4px;
  --radius-dropdown: 8px;
}