# Xn  Smon Vpa · Design system migration spec

> Source: https://xn--smon-vpa.com  ·  Curated by OpenDesign  ·  en

> A prime example of restrained, typography-driven design where scale and whitespace replace traditional UI ornamentation.

## 1. Identity DNA

The Smon Vpa portfolio operates as a curated exhibition of digital artifacts on a pristine white gallery wall. Its system is built on a foundation of computational design principles, where bold typography and intentional whitespace define the visual hierarchy without decorative distraction.

**One-liner:** A minimalist studio portfolio highlighting computational design through bold typography and soft color accents.
**Keywords:** computational design · studio · portfolio · minimalist
**Analogy:** A curated exhibition of digital artifacts on a pristine white gallery wall.

## 2. Color

A stark, high-contrast monochrome base of black on white provides the foundational structure, punctuated by soft lavender and muted coral accents for interactive emphasis. These pastel tones are reserved for large surface areas, ensuring they guide interaction without overwhelming the typographic narrative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#D6D0FF` | card background |
| `--ink` | `#000000` | body text |
| `--accent` | `#FD8878` | single accent |
| `--line` | `rgba(0,0,0,0.2)` | divider |

**Color principle:** High-contrast black on white, punctuated by soft pastel and muted warm accents.

The palette enforces a clear rule: high contrast for readability, soft accents for engagement.

## 3. Typography

Typography is the primary structural element, employing a humanist-sans for both massive, tightly tracked display text and clean body copy. The choice prioritizes clarity and geometric precision, with letter-spacing tightening at scale to create a cohesive, architectural voice.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 172px | 1.0 | 400 | -1px | Main section headings |
| heading | 66px | 1.2 | 400 | -1px | Sub-headings |
| body | 31px | 1.3 | 400 | 0 | Navigation and list items |

**Type rules:**
- Use Tex Gyre Heros for all primary display and body text.
- Reserve the serif typeface for brand marks only.
- Maintain tight negative letter-spacing for large display sizes.

## 4. Spacing

Rhythm is established through a consistent 4px base scale, with generous whitespace used as a active design element to delineate sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base scale with generous whitespace between sections.

## 5. Surfaces

Surfaces are rendered as completely flat planes, rejecting depth cues like drop shadows in favor of minimalist separation. Borders are employed sparingly and with purpose, using only thin 2px top rules to structure list items.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal borders used only to separate list items with a 2px top border.

## 6. Layout

The layout skeleton is a strict single-column, full-width composition. Horizontal rules carved from top borders separate content rows, creating a linear, scroll-driven portfolio list.

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

**Skeleton:** Full-width sections with distinct top borders separating rows in the portfolio list.

## 7. Motion & Interaction

Motion philosophy favors restraint and precision, using fast micro-interactions to confirm user input. Animations are limited to functional purposes, such as smooth color transitions and the expansion of content areas.

- **Durations:** micro 200ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth 0.2s color transitions on interactive elements
  - Subtle 0.1s transform shifts on click
  - 0.5s height animations for expanding content

- **Hover:** Color transition on text elements over 0.2s.
- **Click:** Subtle 0.1s transform scale effect.
- **Transition:** All primary properties animate with a 0.2s duration.
- **Keyboard:** Standard focus states with color transitions.

## 8. Voice & Don'ts

The editorial voice is sophisticated and professional, expressed through bold, tightly tracked headlines in lowercase or title case. Communication relies on large interactive surface areas rather than traditional button styling or verbose calls-to-action.

- **Tone:** Sophisticated, minimalist, and professional.
- **Headline style:** Bold, tightly tracked, lowercase or title case, extremely large scale.
- **CTA style:** Minimal text, relying on large interactive surface areas rather than traditional button styling.
- **Avoid:** Busy layouts / Heavy shadows / Bright neon colors / Decorative icons

### Don'ts
- ❌ Don't use harsh borders — screenshot shows minimal 2px top borders only.
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use small button sizes — screenshot shows massive full-width pill shapes.
- ❌ Don't use centered navigation — screenshot shows left-aligned site name and right-aligned links.
- ❌ Don't use complex grids — screenshot shows a strict single-column linear list.
- ❌ Don't use bold weights — screenshot shows uniform 400 weight typography.

The system deliberately excludes complex grids, heavy ornamentation, and bold typographic weights in favor of a unified, singular column.

## System Prompt (paste into AI tool)

```
A minimalist computational design studio portfolio utilizing a high-contrast palette of black (#000000) on white (#FFFFFF), punctuated by soft lavender (#D6D0FF) and muted coral (#FD8878) accents. The typography relies on humanist-sans for massive, tightly tracked display text and clean body copy. Critical design rules include: maintain strict single-column layout with full-width interactive pills, avoid heavy shadows and drop effects entirely, and use generous whitespace between top-bordered list items.
```