# Vitaarchitecture · Design system migration spec

> Source: https://vitaarchitecture.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of ultra-refined, high-end minimalist design, perfect for studying how extreme restraint and typography can create a premium, architectural feel.

## 1. Identity DNA

This system operates with the deliberate silence of a pristine gallery, where architecture is presented without distraction. It is a refined portfolio balancing austere minimalism with sophisticated typographic detail, using every empty square centimeter as a compositional element.

**One-liner:** A refined architectural portfolio balancing austere minimalism with sophisticated typographic details.
**Keywords:** architectural · minimal · editorial · refined
**Analogy:** A pristine gallery space with a subtle serif accent.

## 2. Color

Color is employed with absolute discipline: a stark, high-contrast dialogue between a light neutral gray background and pure black ink. The palette exists solely to frame content, creating a theatrical space for photography and typography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EFEFEF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#9E9E9E` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Extreme restraint using high-contrast neutrals to let the architectural photography breathe.

The principle is one of extreme restraint, using neutrals to let the architectural subject breathe.

## 3. Typography

The typographic voice is defined by a deliberate pairing: a thin didone-serif for large, elegant display elements, and a clean grotesque-sans for all functional UI. This creates a hierarchy where form meets function with refined precision.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 196px | 1.0 | 200 | -7.84px | Large decorative numbers and impact statements |
| headline | 48px | 1.3 | 400 | -0.2px | Primary headings and navigation items |
| body | 16px | 1.5 | 400 | -0.16px | Standard body text and UI elements |

**Type rules:**
- Use didone-serif for large, elegant display elements like the '214' numeral.
- Use grotesque-sans for functional UI, navigation, and standard paragraph text.
- Maintain tight negative letter-spacing across all typography to preserve the refined aesthetic.

## 4. Spacing

Rhythm is established through generous, almost vast whitespace and isolated vertical padding that isolates content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace with isolated vertical padding, e.g., 207px top/bottom

## 5. Surfaces

Surfaces are flat and austere, defined only by thin, crisp black lines used sparingly for separation. The system avoids depth cues, relying on the typographic and spatial hierarchy to establish order.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, crisp black lines used sparingly for separation

## 6. Layout

The layout skeleton is a single-column or highly structured asymmetric grid, dominated by massive empty space. Content is given immense room to breathe, with a clear editorial cadence from large display numerals to fine detail.

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

**Skeleton:** A single-column or highly structured asymmetric grid dominated by massive empty space

## 7. Motion & Interaction

Motion philosophy centers on subtlety and purpose, focusing on quiet color fades and opacity transitions. These adjustments occur over 0.2 to 0.5 seconds, providing feedback without drawing attention to the interface itself.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color fades on interaction
  - Opacity transitions for elements

- **Hover:** Subtle text color change on interactive elements.
- **Click:** Immediate response with minimal visual feedback.
- **Transition:** color 0.2s, opacity 0.5s
- **Keyboard:** Standard focus states

## 8. Voice & Don'ts

The editorial voice is confident, silent, and highly refined, favoring minimal headlines often composed of large numbers or single words. CTAs are understated, functional text, avoiding any colorful or exuberant calls to action.

- **Tone:** Confident, silent, and highly refined.
- **Headline style:** Minimal, often using large numbers or single words.
- **CTA style:** Understated, functional text.
- **Avoid:** Exclamation points / Marketing buzzwords / Colorful calls to action / Decorative UI elements

### Don'ts
- ❌ Don't use shadows — screenshot shows completely flat surfaces.
- ❌ Don't use border-radius — screenshot shows sharp, unrounded corners.
- ❌ Don't use vibrant colors — screenshot shows strictly monochrome/black and white.
- ❌ Don't use drop shadows — screenshot relies entirely on flat design.
- ❌ Don't clutter the interface — screenshot shows extreme negative space.
- ❌ Don't use sans-serif for display text — screenshot uses a didone-serif for the large numeral.

The system deliberately omits shadows, rounded corners, vibrant hues, and decorative UI, finding its strength in what it chooses not to do.

## System Prompt (paste into AI tool)

```
This is a refined architectural portfolio website. It positions itself through extreme restraint, high-end minimalism, and a gallery-like presentation of work. The key colors are a very light neutral gray (#EFEFEF) background with strict black (#000000) ink, creating a high-contrast, austere feel. Typography uses a sophisticated pairing of a thin didone-serif for large display elements (like the '214' numeral) and a clean, functional grotesque-sans for navigation and body text. Critical design rules: maintain generous, almost vast whitespace; use only thin, crisp lines for separation; and never introduce shadows, border-radius, or vibrant colors. The tone is confident, silent, and premium.
```