# Ncda Biz · Design system migration spec

> Source: https://ncda.biz  ·  Curated by OpenDesign  ·  en

> An excellent example of high-end architectural studio typography and whitespace management.

## 1. Identity DNA

The Ncda Biz design system operates on the principle of a quiet gallery space, where the architecture and artwork are the primary focus. It is a framework of restraint, using massive typography and expansive whitespace to curate attention, not demand it. The system's identity is defined by what it deliberately omits.

**One-liner:** A premium interior design studio portfolio emphasizing massive typography and expansive white space.
**Keywords:** minimalist · architectural · refined · interior design
**Analogy:** A quiet gallery space where the artwork speaks

## 2. Color

The color system is a study in subtraction, using a strict monochrome palette of white, near-black, and medium gray to create a neutral backdrop. This absence of hue ensures that the photographic portfolio content is the sole source of visual vibrancy and narrative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#191919` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(25, 25, 25, 0.1)` | divider |

**Color principle:** Strict monochrome palette to let photography and typography dominate

The underlying principle is that a system without color accents possesses a timeless quality and avoids competing with the work it presents.

## 3. Typography

The typographic voice is one of architectural precision, pairing a transitional serif for monumental display text with a neo-grotesque sans for legible body copy. The rules enforce a consistent, light weight and dramatic scale shifts to establish a clear hierarchy rooted in editorial clarity.

- **Display:** transitional-serif
- **Body:** neo-grotesque-sans
- **Mono:** neo-grotesque-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| hero | 280px | 0.85 | 400 | -3px | Massive studio acronym logo |
| heading-lg | 62px | 1.0 | 400 | -1px | Major section headers |
| body-lg | 32px | 1.2 | 400 | -0.3px | Introductory paragraphs |
| body | 21px | 1.6 | 400 | -0.2px | General body copy |
| caption | 11px | 1.4 | 400 | 0.4px | Small UI elements and timestamps |

**Type rules:**
- Use uppercase for section headers
- Maintain extremely tight letter-spacing on large display sizes
- Keep font weight consistent at 400 throughout

## 4. Spacing

Spacing rhythm is irregular and content-driven, prioritizing visual breathing room over rigid, mathematical grids. The generous, asymmetric whitespace is a core structural element, not merely empty background.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular, dictated by content and breathing room requirements

## 5. Surfaces

Surface treatment is defined by absolute flatness, with no shadows, borders, or background colors to create illusionary depth. The interface exists on a single, pure plane where typography and photography alone define hierarchy and separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders

## 6. Layout

The layout skeleton is intentionally gridless, built on expansive white space and severe left alignment. It rejects centered symmetry in favor of asymmetric composition, allowing massive typographic elements like the 'NCDA' acronym to anchor the viewport with authority.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 48px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Gridless, highly asymmetric layout with expansive white space

## 7. Motion & Interaction

The motion philosophy is one of quiet feedback, employing only the smoothest opacity and color transitions to acknowledge interaction. All movement is calibrated to be felt as a subtle state change rather than seen as a decorative animation.

- **Durations:** micro 220ms · small 220ms · medium 400ms
- **Easing:** `cubic-bezier(0.77, 0, 0.175, 1)`
- **Patterns:**
  - Smooth opacity transitions on hover
  - Color transitions on interactive elements

- **Hover:** Subtle color change with 0.2s transition
- **Click:** Standard pointer cursor
- **Transition:** All transitions use 0.2s duration with custom cubic-bezier easing
- **Keyboard:** Standard browser defaults

## 8. Voice & Don'ts

The editorial voice is professional and quiet, mirroring the architectural tone of the visual design. It favors understatement, using minimal, large-scale statements for headlines and plain text links for interaction, avoiding all exclamatory language.

- **Tone:** Professional, quiet, architectural
- **Headline style:** Minimal, large-scale, statement-driven
- **CTA style:** Understated text links with brackets for counts
- **Avoid:** Exclamation points / Bright colors / Decorative elements

### Don'ts
- ❌ Don't use drop shadows — screenshot shows completely flat design with no elevation
- ❌ Don't use rounded corners — screenshot shows perfectly sharp edges on all elements
- ❌ Don't use a centered layout — screenshot shows left-aligned text and asymmetric positioning
- ❌ Don't add background colors to sections — screenshot shows only a pure white background
- ❌ Don't use a bright accent color — screenshot shows a strictly monochrome palette
- ❌ Don't use decorative borders or dividers — screenshot shows spacing and typography doing all the separation work

This system deliberately forgoes any decorative elements, bright accents, or UI embellishments that would distract from the photographic work.

## System Prompt (paste into AI tool)

```
This is a premium interior design studio portfolio that uses a strictly monochrome palette of white (#FFFFFF) and near-black (#191919) with gray (#808080) for secondary text. The typography combines a transitional serif for display elements with a neo-grotesque sans for body text. The layout is characterized by massive whitespace and huge typographic elements like the full-width 'NCDA' acronym. Critical donts: never introduce color accents, never use rounded corners, never center-align content, never add background colors to sections. The design prioritizes photographic content and breathing room over UI density.
```