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

# NCDA · Design System

> Quiet architecture, expressed through scale and space

**Theme:** light · **Industry:** design · **Source:** https://ncda.biz/ · **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._

NCDA presents its interior design practice through an oversized wordmark, concise studio introduction, and a sequence of project imagery. A restrained monochrome interface and generous whitespace let the residential, public, art, and bespoke work carry the visual emphasis.

## North star

Keep the interface nearly invisible: use monochrome type, oversized scale, generous white space, and let project imagery provide the variation.

## Overview

The page uses a Gallery White canvas (#ffffff) as a nearly continuous field, with no decorative colour bands or prominent interface chrome. Ink (#191919) supplies the main typography and enormous NCDA wordmark, while Quiet Gray (#808080) distinguishes introductory copy and project links. The separately measured pure black (#000000) appears sparingly in text and links; keep it a minor tonal variation rather than a new accent system. TWK Everett Regular gives the uppercase display and category headings a clean, architectural presence; Suisse Works Regular adds a quieter contrast in small captions. The opening composition pairs small time and menu labels with a short studio statement, then lets the oversized wordmark dominate the lower viewport. Below, full-width video and staggered project images alternate with broad white intervals. Project headings and view-all links sit close to their images, keeping navigation legible without cards, borders, or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and continuous background behind the intro, project sections, and footer. |
| Architect Ink | `#191919` | `--color-architect-ink` | neutral | Primary text, oversized NCDA wordmark, section headings, and selected project links. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted studio introduction, project view-all links, and secondary text. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Minor text and link variation; not a broad section colour or a distinct accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#191919` (Architect Ink) · `--color-text` → `#191919` (Architect Ink) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191919` | `#ffffff` | 17.58:1 | AAA |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#191919` | 4.45:1 | AA-large |
| `#ffffff` | `#191919` | 17.58:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWK Everett Regular | `--font-body` | webfont | 400 | Display wordmark, headings, body copy, and large uppercase project links. | Inter |
| Suisse Works Regular | `--font-suisse-works-regular` | webfont | 400 | Small caption text and compact supporting labels. | Libre Baskerville |
| TWK Everett Mono Regular | `--font-mono` | webfont | 400 | Monospaced code-style text role; use for compact technical or coded labels if present. | IBM Plex Mono |

- **TWK Everett Regular:** Regular weight throughout; display and h1 use uppercase with tight negative tracking, while body copy stays sentence case.
- **Suisse Works Regular:** Regular weight; used sparingly for small captions with slightly open tracking.
- **TWK Everett Mono Regular:** Regular monospaced face; measured for a code role, with no prominent visible use in the screenshots.

### Type scale — Golden Ratio (ratio ≈ 1.627, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62.5px | 400 | 0.8 | -0.05em | uppercase | TWK Everett Regular | Oversized uppercase NCDA wordmark across the opening viewport. |
| h1 | 32px | 400 | 1.2 | -0.01em | uppercase | TWK Everett Regular | Large uppercase section or page headings. |
| h2 | 21px | 400 | 1.35 | -0.01em | — | TWK Everett Regular | Supporting subheadings and medium-sized labels. |
| body | 14.5px | 400 | 1.4 | 0 | — | TWK Everett Regular | Studio introduction, project descriptions, and footer information. |
| caption | 11px | 400 | 1.44 | 0.04em | — | Suisse Works Regular | Small secondary captions and compact supporting labels. |
| link | 32px | 400 | 1.2 | -0.01em | uppercase | TWK Everett Regular | Prominent uppercase project-category links such as PUBLIC. |
| code | 21px | 400 | 0.8 | -0.01em | — | TWK Everett Mono Regular | Compact monospaced labels where a code-like treatment is needed. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 15, 21, 25, 26, 28, 53, 59, 150, 188 px.
- Section rhythm 188px · element gap — · card padding — · max content width 1335px.

Use a spacious, single-column editorial flow on a white canvas, with a measured page maximum width of 1335px. The opening screen distributes small utility text near the top and a compact studio introduction to the right, leaving a large gap before the wordmark. Follow with full-bleed media, a centered explore cue, and project sections that alternate left- and right-aligned image compositions. Keep section intervals generous; the measured section gap is 188px. Finish with a compact multi-column footer.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.77, 0, 0.175, 1)` on interactive elements.

The interface is essentially flat: measured data reports no shadows, gradients, or radius scale, and no prominent border treatment appears in the screenshots. Separate content through whitespace, image placement, and typography rather than cards or layered surfaces. Keep media crisp and flush against its surrounding white canvas.

## Imagery

Prioritize real interior photography and video: quiet residential rooms, public spaces, sculptural art, and bespoke furniture. Images are large, rectangular, and minimally treated, with the screenshot showing warm, natural material tones against the monochrome interface. Use broad media framing and preserve each image’s own colour and atmosphere; avoid decorative overlays or illustration-led graphics.

## Components

### Utility header

Place local time labels at the left and a simple Menu label at the right over the white canvas.

### Studio introduction

A short, right-aligned studio statement combines primary Ink text with muted gray supporting copy.

### Oversized wordmark

Set NCDA in exceptionally large uppercase TWK Everett Regular, filling the opening composition.

### Explore cue

Use a small downward-arrow label centered between the introductory media and project categories.

### Project category heading

Pair an uppercase category name with a muted view-all label and project count near the image.

### Project media

Show large rectangular photography or video without card framing, shadows, or decorative borders.

### Contact footer

Arrange studio name, address, contact details, privacy, credits, and copyright in a compact multi-column close.

### Measured component styles

- **Link** (“PUBLIC”): transparent background · text #808080 · radius 0px · padding 0px · 400 31.9487px TWK Everett Regular · uppercase

## Do

- Use Gallery White as the uninterrupted page canvas.
- Set primary headings and the wordmark in TWK Everett Regular.
- Reserve Quiet Gray for secondary copy and project links.
- Use large real-project images as the main source of visual variety.
- Alternate project image alignment down the page.
- Separate sections with generous white intervals.

## Don't

- Don't add bright accent colours or coloured section bands.
- Don't put project content into elevated cards.
- Don't add shadows, gradients, or ornamental borders.
- Don't crowd the opening wordmark with extra interface elements.
- Don't use heavy font weights where regular weight is measured.
- Don't treat colours inside project photography as interface palette colours.

## Agent prompt

Build a new editorial portfolio page in NCDA’s restrained architectural style. Use Gallery White (#ffffff) as the continuous canvas, Architect Ink (#191919) for primary headings and display text, and Quiet Gray (#808080) for secondary labels and links; Pure Black (#000000) should remain a minor text variation. Use a clean regular-weight sans serif similar to TWK Everett for oversized uppercase titles and readable body copy, with a restrained serif caption face. Compose a sparse utility header, concise studio introduction, oversized wordmark, then generous white space around large, unframed project photography. Stagger project compositions left and right and keep category headings and view-all links close to their images. Avoid cards, shadows, gradients, decorative borders, and interface colour borrowed from photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White single-column opening with utility labels above intro copy and oversized wordmark. | time and menu utilities, studio introduction | oversized uppercase wordmark, minimal top labels, large whitespace |
| 2 | video | A full-bleed video strip follows the wordmark. | ambient studio overview | edge-to-edge media, unframed video |
| 3 | category-nav | Centered, sparse prompt on a white band between media and project work. | downward exploration cue | small uppercase label, down arrow |
| 4 | product-showcase | Left-aligned HOME heading, view-all link, and rectangular project image. | browse residential work, view all projects | uppercase category title, muted project count, large image |
| 5 | product-showcase | Right-shifted PUBLIC heading and project image within a wide white canvas. | browse public work, view all projects | uppercase category title, muted project count, asymmetric image placement |
| 6 | gallery | Left-aligned ART heading and large close-framed artwork image. | browse art projects, view all projects | uppercase category title, large image, minimal metadata |
| 7 | product-showcase | Right-shifted BESPOKE heading, product link, and tall furniture image. | browse bespoke products, view all products | uppercase category title, muted item count, portrait-oriented image |
| 8 | footer | Compact two-column footer with studio identity and small contact and policy details. | contact studio, access privacy and credits | small footer labels, multi-column text, minimal wordmark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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