# Unknown Untitled · Design system migration spec

> Source: https://unknown-untitled.com/en  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of extreme restraint in modern portfolio design, using typography and space as its primary expressive tools.

## 1. Identity DNA

This system operates as a meticulously curated, quiet gallery that lets the work speak through silence and space. It is a portfolio defined by extreme restraint, where vast negative space and oversized monochromatic typography become the primary instruments of expression. The result is a design of deliberate calm and refined global sophistication.

**One-liner:** A design studio's portfolio defined by extreme restraint, vast negative space, and oversized monochromatic typography.
**Keywords:** refined · minimal · deliberate · global · societal
**Analogy:** A meticulously curated, quiet gallery that lets the work speak through silence and space.

## 2. Color

The palette is a strict, achromatic study in value contrast, anchored by ultra-light typography against expansive fields of background. Its principle is to establish a calm, sophisticated atmosphere through a near-black ink and a warm off-white ground, relying entirely on extreme value contrast.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0EFEF` | main background |
| `--bg-soft` | `#F9F9F9` | card background |
| `--ink` | `#080807` | body text |
| `--muted` | `#343434` | placeholder |
| `--line` | `rgba(8,8,7,1.0)` | divider |

**Color principle:** Strict achromatic palette relying on extreme value contrast and expansive negative space to establish a calm, sophisticated atmosphere.

The core principle is to establish a calm, sophisticated atmosphere through absolute chromatic restraint, making the absence of color a deliberate structural choice.

## 3. Typography

Typography is the dominant voice, rendered exclusively in a geometric sans-serif at an ultra-light weight to preserve an airy, delicate aesthetic. Aggressive negative tracking compresses the letterforms into dense, cohesive blocks, creating a textural and architectural presence on the page.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 193.9px | 0.95 | 300 | -12px | Main hero headings and large-scale portfolio titles |
| body | 47.5px | 1.05 | 300 | -2.4px | Body paragraphs and supporting descriptive text |

**Type rules:**
- Maintain an ultra-light weight (300) across all text elements to preserve the airy, delicate aesthetic.
- Use aggressive negative tracking to give the geometric letterforms a dense, cohesive block-like appearance.
- Keep line-heights extremely tight to match the dense tracking and prevent excessive vertical spacing.
- Use standard sans-serif as the only fallback when SCTO is unavailable, avoiding serif or decorative fonts.

## 4. Spacing

The spacing rhythm is asymmetrical and expansive, using massive vertical padding to force a slow, deliberate scrolling cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetrical and expansive, using massive vertical padding and margins to force a slow, deliberate scrolling rhythm.

## 5. Surfaces

Surfaces are defined by the complete absence of physical boundaries; shadows and borders are omitted entirely. Structure emerges solely from the interplay of typography, imagery, and negative space.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible. The design relies entirely on typography, imagery, and negative space to define structure without physical boundaries.

## 6. Layout

The layout skeleton is a strictly minimal, top-heavy document flow. Elements are left-aligned or centered with extreme vertical padding, creating a vast, unbroken column that prioritizes content over structural decoration.

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

**Skeleton:** A strictly minimal, top-heavy document flow. Elements are left-aligned or centered with extreme vertical padding and no visible grid lines or structural borders.

## 7. Motion & Interaction

Motion philosophy is one of subtlety and consistency, governed by a single, unified easing curve across all transitions. Fast micro-interactions handle immediate feedback, while slower, deliberate timings are reserved for primary state changes, maintaining the interface's quietness.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Fast micro-interactions (200ms) for standard hover and click state changes.
  - Slower, more deliberate transitions (400-600ms) for primary element opacity and color shifts.
  - Strict application of a single, consistent easing curve across all animated properties.

- **Hover:** Subtle opacity shifts and color transitions, maintaining the overall quietness of the interface without introducing loud feedback.
- **Click:** Standard pointer cursor with immediate, minimal visual feedback via the established transition timings.
- **Transition:** All properties are transitioned with a unified cubic-bezier curve, ensuring a smooth, fluid, and consistent feel.
- **Keyboard:** Not explicitly visible in screenshots, but implied standard link focus behavior.

## 8. Voice & Don'ts

The editorial voice is intellectual, quiet, and deeply conceptual, mirrored by understated text links that blend into the typographic hierarchy. The system deliberately avoids heavy font weights, saturated accent colors, and conventional button shapes to preserve its serene authority.

- **Tone:** Intellectual, quiet, deliberate, and deeply conceptual.
- **Headline style:** Extremely large, ultra-light, and heavily tracked geometric sans-serif, often in a single dominant line.
- **CTA style:** Subdued, understated text links that blend into the overall typographic hierarchy rather than standing out.
- **Avoid:** Heavy font weights / Saturated or bright accent colors / Conventional button shapes / Complex or cluttered layouts

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows ultra-light (300) exclusively.
- ❌ Don't add saturated accent colors — screenshot shows a strict monochromatic palette.
- ❌ Don't use rounded corners on elements — screenshot shows strictly sharp, unrounded geometry.
- ❌ Don't use drop shadows or gradients on UI components — screenshot shows completely flat surfaces.
- ❌ Don't use excessive vertical padding — screenshot shows massive whitespace between major sections.
- ❌ Don't rely on decorative UI elements — screenshot shows a completely stripped-down, typographic interface.

What it deliberately omits—decorative UI elements, chromatic flourishes, and visual noise—is as critical to its identity as what it includes.

## System Prompt (paste into AI tool)

```
Position this as a minimalist design studio portfolio that prioritizes quiet confidence over loud presentation. The visual language is defined by a strict achromatic palette: a near-black (#080807) for ink, a warm off-white (#F0EFEF) for background, and occasional deep grays (#343434) for muted text. Typography is exclusively geometric-sans rendered at an ultra-light weight (300) with aggressive negative tracking, creating dense, deliberate blocks of text. The layout relies heavily on massive negative space and a single, consistent cubic-bezier transition for all animations. Key critical donts: never use font weights heavier than 300, never introduce saturated accent colors, and never add decorative elements like shadows or rounded corners. The system must maintain extreme restraint and rely purely on typography, photography, and space to communicate.
```
