# Notreal Tv · Design system migration spec

> Source: https://notreal.tv  ·  Curated by OpenDesign  ·  en

> A prime example of a high-end agency portfolio that uses typography and layout to convey prestige without relying on excessive decoration.

## 1. Identity DNA

The design system for NotReal functions as a curated gallery space, where the architecture of the interface recedes to let the work speak. Its structure is built on a minimal, high-contrast canvas, deliberately sparse to foreground the agency's craft and storytelling.

**One-liner:** An independent creative house combining craft, storytelling, and technology for global brands.
**Keywords:** creative · independent · design-driven · craft · storytelling · technology
**Analogy:** A curated gallery of a high-end creative studio.

## 2. Color

The color principle is one of strategic absence: a neutral, high-contrast foundation of off-white and deep charcoal that cedes chromatic authority to the portfolio imagery itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f2f2f2` | main background |
| `--ink` | `#292a2c` | body text |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Minimal, high-contrast canvas where the portfolio imagery provides the color.

This restraint ensures the interface never competes with the creative work it presents.

## 3. Typography

Typographic voice is defined by a clear duality: a refined transitional serif for the brand mark and artistic accents, and a clean geometric sans-serif for all functional text, creating a dialogue between editorial elegance and modern clarity.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.9 | 400 | -2px | Main logo/hero title |
| h2 | 25px | 1.2 | 400 | -0.5px | Section titles and descriptions |
| body | 18px | 1.67 | 400 | 0.5px | Navigation and general text |

**Type rules:**
- Use the transitional serif for the main logo and artistic accents.
- Use the geometric sans for all navigation, descriptions, and body text.

## 4. Spacing

Spacing follows a spacious, airy rhythm, using generous margins and padding to create clear visual separation and a sense of considered curation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious and airy, with large margins between portfolio items and generous padding around text blocks.

## 5. Surfaces

Surfaces are treated with minimal depth, relying on occasional subtle shadows and sharp, structural borders rather than decorative fills or pronounced effects.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 0px 5px 0px rgb(128, 128, 128)
- **Borders:** Minimal, occasionally a 2px solid black for subtle structural divisions.

## 6. Layout

The layout skeleton is an asymmetrical, grid-based composition that gives disproportionate visual weight to large, prominent media blocks. Concise, left-aligned captions sit directly below, maintaining a strict, clean hierarchy.

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

**Skeleton:** Asymmetrical, grid-based layout with large, prominent media blocks and concise, left-aligned text captions.

## 7. Motion & Interaction

Motion philosophy is one of refinement and utility; transitions are smooth and understated, serving primarily to confirm interactions and guide navigation without drawing attention to themselves.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transitions on navigation and interactive elements.
  - Hover effects on portfolio items.

- **Hover:** Subtle visual changes or underlines on text links and portfolio cards.
- **Click:** Direct navigation to project details.
- **Transition:** Smooth transitions for hover states and page navigation.
- **Keyboard:** Standard tab navigation for links and interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional, refined, and artistic, conveyed through short, descriptive headlines and a tone that avoids the casual or the generic.

- **Tone:** Professional, refined, and artistic.
- **Headline style:** Short, descriptive, and often italicized for emphasis.
- **CTA style:** Minimal, text-based links in the navigation.
- **Avoid:** Overly casual or slang language. / Excessive use of exclamation points. / Vague or generic descriptions.

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, square edges.
- ❌ Don't use bright, saturated UI colors — screenshot shows a neutral, off-white background.
- ❌ Don't use sans-serif for the main logo — screenshot shows a transitional serif.
- ❌ Don't clutter the layout — screenshot shows a very clean, airy grid with plenty of whitespace.
- ❌ Don't use drop shadows on primary elements — screenshot shows flat imagery with only minimal, subtle shadows on specific elements.
- ❌ Don't use all-caps for body text — screenshot shows sentence case or title case.

This system deliberately forgoes decorative UI elements, saturated color, and casual language to maintain its sharp, gallery-like focus.

## System Prompt (paste into AI tool)

```
This is the design DNA for NotReal, an independent creative house. The site features a clean, editorial layout on an off-white (#f2f2f2) background with deep charcoal (#292a2c) text. Typography contrasts a refined transitional serif for the logo and accents with a clean geometric sans-serif for navigation and descriptions. The layout is grid-based but asymmetrical, giving significant visual weight to large, high-quality portfolio images. Critical design constraints: Do not use rounded corners or bright UI colors; the aesthetic is sharp, flat, and professional. Do not clutter the interface; ample whitespace is a core feature. Do not use sans-serif for the main 'NotReal' brand mark; it must remain a serif.
```