---
version: alpha
name: Swire Properties SD
description: Editorial corporate sustainability reporting — generous white canvas, a signature Swire forest green as the single brand accent, near-black ink, large quiet headlines and roomy reading measure. Restraint as institutional credibility; the green appears only on links, rules, and data accents.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f6f4"
  ink: "#1a1a1a"
  ink-secondary: "#555555"
  ink-muted: "#7a7a7a"

  # Brand accent — Swire forest green
  primary: "#1f5c45"
  primary-deep: "#143d2e"
  primary-soft: "#e7efea"

  # Footer / dark band
  footer-bg: "#1a2420"
  on-footer: "#e7efea"

  # Interactive
  link: "#1f5c45"
  link-hover: "#143d2e"
  focus-ring: "#1f5c45"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d3d3d"
  gray-500: "#7a7a7a"
  gray-300: "#cfcfcf"
  gray-200: "#e3e3e3"
  gray-100: "#eef0ee"

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

  # Data / badge
  badge-bg: "#e7efea"
  badge-text: "#1f5c45"

typography:
  display-hero:
    fontFamily: "Lora, Georgia, 'Times New Roman', serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Lora, Georgia, serif"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.3px
  sub-heading:
    fontFamily: "Lora, Georgia, serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.4px
  data-figure:
    fontFamily: "Lora, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.5px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    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
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

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

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.gray-200}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 40px

  card-data:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.data-figure}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.gray-200}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

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

  footer:
    backgroundColor: "{colors.footer-bg}"
    textColor: "{colors.on-footer}"
    typography: "{typography.body-small}"
    padding: 64px 32px
---

# Swire Properties SD Design System

## Overview

The Swire Properties Sustainable Development (SD) report is institutional editorial design at its most disciplined — a digital annual report dressed in the visual restraint of a luxury developer that lets the substance of its data carry the page. The canvas is pure white (`{colors.background}`) with near-black ink (`{colors.ink}`), and the entire system commits to a single brand accent: Swire's signature forest green (`{colors.primary}`), a deep, slightly muted teal-green that reads as heritage rather than fashion. Color is functional and rationed — it appears on links, eyebrow labels, key data figures, and the occasional rule, never as decoration.

The typographic system pairs a serif display face for headlines and large data figures with a clean grotesque sans for reading text and UI. This serif/sans split is the spine of the report's editorial voice: serif headlines (here mapped to Lora) feel published and considered, while the sans body (Inter) keeps long passages of sustainability narrative legible and modern. Headlines run large and quiet — generous size, modest weight, gentle negative tracking — so they announce without shouting.

Layout leans on whitespace as the primary structural device. Sections breathe with `{spacing.3xl}`–`{spacing.4xl}` vertical rhythm, full-bleed photography of properties and people alternates with measured single-column reading columns, and data is surfaced in restrained metric cards where the figure itself (set in the serif) is the hero. The dark footer band (`{colors.footer-bg}`) closes each page with the wall of sustainability index badges — DJSI, MSCI, GRESB and peers — that anchor the report's credibility.

**Key Characteristics:**
- Pure white canvas with near-black ink — gallery restraint
- A single rationed brand accent: Swire forest green (`{colors.primary}`)
- Serif display (Lora) for headlines and data figures, sans (Inter) for reading and UI
- Quiet large headlines — big size, mid weight, gentle negative tracking
- Whitespace-driven rhythm with `{spacing.3xl}`+ section spacing
- Uppercase tracked eyebrow labels in green above section headings
- Metric/data cards where the serif figure is the focal point
- Dark forest footer band carrying the sustainability-index badge wall

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headings, body copy. Near-black, never pure `#000`.
- **Background** (`{colors.background}`): Page and card surface — pure white.
- **Swire Green** (`{colors.primary}`): The single brand accent — links, eyebrows, data figures, rules.
- **Green Deep** (`{colors.primary-deep}`): Hover/pressed state of the accent.
- **Green Soft** (`{colors.primary-soft}`): Tinted backgrounds for badges and quiet panels.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, footnotes.

### Surface
- **Surface Soft** (`{colors.surface-soft}`): Quiet section/feature card fills.
- **Footer Bg** (`{colors.footer-bg}`): Dark forest band at page foot.
- **On Footer** (`{colors.on-footer}`): Light text on the footer band.

### Interactive
- **Link** (`{colors.link}`): Inline links — green, often underlined.
- **Link Hover** (`{colors.link-hover}`): Darkened green on hover.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.

### Neutral Scale
- **Gray 900–100** (`{colors.gray-900}` → `{colors.gray-100}`): Borders, dividers, rules, disabled states.

### Data / Badge
- **Badge Bg** (`{colors.badge-bg}`): Tinted green pill background.
- **Badge Text** (`{colors.badge-text}`): Green pill text.

## Typography

### Font Family
- **Display / Data**: `Lora`, fallback `Georgia, 'Times New Roman', serif` — serif voice for headlines and figures.
- **Body / UI**: `Inter`, fallback `Helvetica, Arial, sans-serif` — grotesque sans for reading and interface.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 52px serif report/section hero |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-section serif headings |
| `card-title` | Sans card and module titles |
| `eyebrow` | Uppercase tracked green kicker above headings |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Captions, secondary UI |
| `button-ui` | Buttons, nav links |
| `data-figure` | Large serif metric numbers in data cards |
| `caption` | Badges, footnotes, metadata |

### Principles
- **Serif announces, sans explains**: Headlines and metric figures in the serif; all reading and UI in the sans. The contrast is the editorial signature.
- **Quiet headlines**: Large but mid-weight (500) with gentle negative tracking — authority without aggression.
- **Tracked uppercase eyebrows**: Section kickers use `{typography.eyebrow}` in green — 1.5px letter-spacing.
- **Roomy measure**: Body line-height 1.65–1.7 for sustained reading of report narrative.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with editorial section jumps up to `{spacing.4xl}` (140px).

### Grid & Container
- Max reading column ~720px; full-bleed media breaks the column
- Section eyebrow → serif heading → sans lead paragraph is the repeating rhythm
- Data presented in 2–4 column metric grids
- Full-width property photography between text sections

### Whitespace Philosophy
- **Section rhythm**: `{spacing.3xl}`–`{spacing.4xl}` vertical padding between major sections.
- **Restraint as credibility**: Empty space signals institutional confidence; nothing competes with the data and imagery.
- **Single accent discipline**: Green is rationed so each appearance reads as meaningful.

## Components

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

### Buttons
- **`button-primary`** — Swire green fill, white text, near-square `{rounded.sm}` corners.
- **`button-secondary`** — White with green outline and green text.

### Labels & Badges
- **`eyebrow-label`** — Uppercase tracked green kicker.
- **`badge`** — Soft-green pill for index/certification tags.

### Cards
- **`card`** — White, hairline `{colors.gray-200}` border, generous `32px` padding.
- **`card-feature`** — Soft-fill quiet panel for callouts.
- **`card-data`** — Metric card where the serif `{typography.data-figure}` number is the hero, in green.

### Navigation & Footer
- **`nav-bar`** — White sticky header, hairline bottom border, sans links.
- **`footer`** — Dark forest band carrying navigation and the sustainability-index badge wall.

## Do's and Don'ts

### Do
- Ration the green — links, eyebrows, data figures, rules only
- Pair serif headlines with sans reading text
- Keep headlines large but mid-weight with gentle negative tracking
- Let whitespace carry the structure (`{spacing.3xl}`+ sections)
- Use the serif for hero metric figures in data cards

### Don't
- Don't introduce a second accent color — green is the whole palette
- Don't set headlines in heavy/bold weights — restraint is the voice
- Don't use pure black ink — near-black `{colors.ink}` only
- Don't crowd sections — the whitespace is intentional
- Don't set body or data figures in the wrong family (sans for reading, serif for figures)

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, media stacks |
| Tablet | 600–1024px | 2-column data grids, expanded padding |
| Desktop | 1024–1400px | Full reading column + full-bleed media |
| Large | >1400px | Centered, generous side margins |

### Collapsing Strategy
- Hero serif: 52px → ~32px on mobile, tracking eased proportionally
- Data grids: 4-column → 2-column → single column
- Full-bleed media keeps aspect ratio; mobile uses `-mb` image variants
- Footer badge wall: grid → wrapped multi-row
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Swire Green `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink `{colors.ink}` / secondary `{colors.ink-secondary}`
- Link: Swire Green `{colors.link}`
- Eyebrow: Swire Green `{colors.primary}`

### Example Component Prompts
- "Create a report section: uppercase green eyebrow (`{typography.eyebrow}`, `{colors.primary}`), then a 38px Lora serif heading weight 500 in `{colors.ink}`, then a 19px Inter lead paragraph in `{colors.ink-secondary}` at line-height 1.7."
- "Design a data card: white surface, hairline `{colors.gray-200}` border, 6px radius. Large 44px Lora figure in `{colors.primary}`, label below in 12px Inter `{colors.ink-muted}`."
- "Build a primary button: `{colors.primary}` fill, white text, 4px radius, 14px Inter weight 600 with 0.4px tracking, 14px/28px padding; hover to `{colors.primary-deep}`."
- "Create a dark footer band (`{colors.footer-bg}`) with light text (`{colors.on-footer}`) and a wrapped grid of sustainability-index badge logos."

### Iteration Guide
1. Green is rationed — if it appears more than on links, eyebrows, figures and rules, pull it back
2. Serif for headlines and metric numbers; sans for everything readable
3. Headlines stay mid-weight (500) — never bold
4. Whitespace is the layout; default to more space, not less
5. Near-black ink, never pure black

---

## 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 Swire Properties SD. Brand names and trademarks belong to their respective owners.