---
title: "Resident design system"
variant: extended
source: https://resident.co.nz/en/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/resident-co-nz)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Resident · Design System

> Quiet space for considered design

**Theme:** light · **Industry:** design · **Source:** https://resident.co.nz/en/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Resident’s homepage presents furniture, lighting, and design projects through a restrained editorial layout. A pure white canvas, black typography, generous whitespace, and image-led storytelling let the work carry the visual identity.

## North star

Let a white, spacious editorial canvas frame the furniture and architecture; keep interface styling quieter than the imagery.

## Overview

The visual system is defined by a clean white canvas (#ffffff) and near-absolute black typography (#000000), with no measured accent or surface colours. Subtle olive, stone, and warm grey tones appear in photography and product imagery rather than as interface colours; keep them image-bound. MessinaSansWeb is used throughout, giving the small editorial captions and larger headings a consistent, contemporary voice. The opening places a large wordmark above a paired, image-led feature; below, images and short text blocks alternate with expansive blank intervals. Product releases use neat, evenly aligned image tiles with compact names, designer credits, and prices. Project stories range from paired images to a single full-width photograph, maintaining a gallery-like cadence. Keep edges and backgrounds flat: the evidence shows no shadows, decorative borders, or coloured section bands. The overall effect is quiet and architectural, with generous spacing doing the work that ornament would otherwise do.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Page canvas and consistent background across editorial, product, project, and footer sections. |
| Ink | `#000000` | `--color-ink` | neutral | Wordmark, headings, body copy, captions, and footer text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MessinaSansWeb | `--font-body` | webfont | 500, 400 | Site-wide headings, editorial copy, product captions, links, and footer details. | DM Sans |

- **MessinaSansWeb:** Use measured weights 400 and 500; headings are subtly tight-tracked, while body copy and captions remain untransformed.

### Type scale — Perfect Fifth (ratio ≈ 1.459, base 18.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 27px | 500 | 1.29 | -0.037em | — | MessinaSansWeb | Prominent page heading and major editorial titles. |
| body | 18.5px | 500 | 1.29 | 0 | — | MessinaSansWeb | Project descriptions, editorial paragraphs, and primary copy. |
| caption | 14px | 400 | 1.4 | 0 | — | MessinaSansWeb | Product names, designer credits, prices, and compact labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 5, 6, 14, 19, 21, 27 px.
- Section rhythm 334px · element gap — · card padding — · max content width 1398px.

The measured page max width is 1398px, with content laid out as a spacious editorial grid. The first view pairs two large images beneath the right-aligned wordmark; further down, image-and-copy groups shift between paired features, product tiles, and project stories. A two-column section and a five-column footer appear in the measured structure. The 334px section gap creates a pronounced, gallery-like rhythm. Keep elements aligned to broad content edges and leave ample blank space between unrelated blocks.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.

The page is flat and gallery-like: measured data contains no shadows, gradients, or surface colours, and the sections share the same white background. Avoid cards that appear lifted or boxed in. Use image boundaries and whitespace to define groups; reserve the rounded treatment only for the measured pill-shaped button where relevant.

## Imagery

Photography leads: architectural interiors, residences, landscapes, people, and styled product shots are presented in large, clean rectangular frames. Product tiles use pale, uncluttered backdrops; project imagery can be atmospheric and darker. The hero pairs a real space photograph with a loose coloured architectural drawing. A video appears in the lower editorial feed. Keep image colours inside the media rather than translating them into UI accents.

## Components

### Wordmark

Large black Resident wordmark positioned above the hero imagery, aligned toward the right in the opening view; a prominent repeat anchors the footer.

### Editorial image-and-copy feature

Large project or news image paired with concise black copy, with generous blank space separating it from neighboring content.

### Product tile

Rectangular product image followed by compact product name, designer credit, and price; the measured page includes four-item product groups.

### Project story

Large interior or architecture image with a short project title and descriptive copy beneath or alongside it.

### Footer directory

White footer with the wordmark, company contact details, and small link groups arranged across five columns.

### Pill button

A measured button has a 50% radius and dark #333333 text; keep it visually understated and do not infer an unmeasured fill.

### Measured component styles

- **Primary button**: transparent background · text #333333 · radius 50% · padding 1px 6px · 400 13.9969px MessinaSansWeb
- **Link** (“New Release. Resident is thrilled to int”): transparent background · text #000000 · radius 0px · padding 0px · 400 13.9969px MessinaSansWeb

## Do

- Use #ffffff as the continuous page canvas.
- Set core text and the wordmark in #000000.
- Let large, carefully framed images lead each story.
- Preserve generous blank intervals between content groups.
- Keep product captions compact and information-rich.
- Use MessinaSansWeb or a close sans-serif substitute.

## Don't

- Do not introduce unmeasured accent colours into interface elements.
- Do not add coloured section bands or gradients.
- Do not add shadows or decorative card borders.
- Do not crowd the page with dense controls or copy.
- Do not treat colours inside photographs as brand UI colours.
- Do not add unsupported spacing, sizes, or corner radii.

## Agent prompt

Build a new Resident-style page as a quiet editorial gallery, not a conventional boxed ecommerce template. Use Gallery White (#ffffff) as the full-page canvas and Ink (#000000) for the wordmark, headings, copy, and captions. Use MessinaSansWeb where available, with DM Sans as a close free substitute. Follow the measured spacious rhythm and broad content width, letting large architectural and product images define each block. Alternate paired image-and-copy stories, product tiles, and project features; keep text concise, with names, designer credits, and prices easy to scan. Maintain generous empty intervals between sections and simple alignment across image edges. Keep surfaces flat, without shadows, gradients, coloured bands, or invented interface accents. Let any warm, olive, or stone colours remain within photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Right-aligned wordmark above two adjacent large images on white. | brand introduction, paired visual entry | large wordmark, side-by-side imagery, white canvas |
| 2 | feature-grid | Editorial stories arranged as a sequence of image-and-copy groups. | story discovery, editorial browsing | image-led blocks, short copy, large whitespace |
| 3 | product-grid | Four aligned product images with compact details below. | product discovery, price scanning | product tiles, designer credits, prices |
| 4 | feature-split | Two image-and-copy features arranged side by side. | project reading, news discovery | paired imagery, editorial captions |
| 5 | feature-split | Full-bleed project photograph followed by title and short copy. | case-study viewing, project context | full-width photography, compact caption |
| 6 | product-showcase | Introductory copy beside a mixed-size arrangement of product images. | craft storytelling, product exploration | mixed image sizes, product captions, editorial intro |
| 7 | feature-grid | Three project images with titles and short descriptions in columns. | project browsing, related story discovery | three-column image row, caption blocks |
| 8 | content-feed | Three compact image or video items with short titles. | editorial browsing, video discovery | media thumbnails, short labels |
| 9 | footer | Large wordmark above five columns of compact contact and link details. | contact lookup, site navigation | wordmark, small link groups, social icons |

## Source CSS custom properties (selected)

```css
--hsf-default-row__horizontal-spacing: 30px;
--hsf-default-row__vertical-spacing: 20px;
--hsf-default-module__vertical-spacing: 10px;
--hsf-default-button__font-family: Helvetica;
--hsf-default-button__font-size: 1em;
--hsf-default-button__color: rgba(255, 255, 255, 1);
--hsf-default-button__background-color: rgba(255, 92, 53, 1);
--hsf-default-button__background-image: none;
--hsf-default-button__border-radius: 3px;
--hsf-default-button__border-width: 0px 0px 0px 0px;
--hsf-default-button__border-style: none;
--hsf-default-button__border-color: initial;
--hsf-default-button__box-shadow: none;
--hsf-default-button__font-weight: 700;
--hsf-default-richtext__font-family: Helvetica;
--hsf-default-richtext__font-size: 1em;
--hsf-default-richtext__color: rgb(33, 45, 58);
--hsf-default-heading__font-family: Helvetica;
--hsf-default-heading__color: rgb(33, 45, 58);
--hsf-default-heading__text-shadow: none;
--hsf-default-background__padding: 40px;
--hsf-default-background__border-style: none;
--hsf-default-background__border-color: rgba(255, 255, 255, 1);
--hsf-default-background__border-radius: 0px;
--hsf-default-background__border-width: 1px 1px 1px 1px;
--hsf-default-progressbar-text__font-family: Helvetica;
--hsf-default-progressbar-text__font-size: 1em;
--hsf-default-progressbar-text__color: rgb(33, 45, 58);
--hsf-default-progressbar-progressLine__background-color: rgba(1, 129, 132, 1);
--hsf-default-progressbar-progressLine__background-image: none;
--hsf-default-progressbar-progressLine__border-color: rgb(149, 148, 148);
--hsf-default-progressbar-progressLine__border-style: none;
--hsf-default-progressbar-progressLine__border-width: 0px 0px 0px 0px;
--hsf-default-progressbar-trackLine__background-color: rgba(217, 217, 217, 1);
--hsf-default-erroralert__font-family: Helvetica;
--hsf-default-erroralert__font-size: 1em;
--hsf-default-erroralert__color: rgb(229, 21, 32);
--hsf-default-infoalert__font-family: Helvetica;
--hsf-default-infoalert__font-size: 1em;
--hsf-default-infoalert__color: rgb(37, 51, 66);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/resident-co-nz