---
title: "Not Real design system"
variant: extended
source: https://notreal.tv/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/notreal-tv)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Not Real · Design System

> Quiet monochrome, expressive moving-image work.

**Theme:** light · **Industry:** design · **Source:** https://notreal.tv/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Not Real presents a creative studio portfolio on a pale, near-white canvas, using black typography and an airy asymmetric project grid. Refined serif accents and vivid CGI, animation, and campaign imagery bring contrast without turning the interface into a colourful UI.

## North star

Keep the interface monochrome and spacious, letting an irregular gallery of vivid project media provide the page’s visual energy.

## Overview

The page is built around a restrained two-colour interface: #f2f2f2 covers the canvas, while #000000 handles the logo, navigation, text, links, and fine rules. Saturated purples, greens, pinks, and warm metallic tones appear inside project media rather than as persistent interface accents, so the portfolio feels calm even as individual cases stand out. Telegraf provides a clean, contemporary sans-serif voice for navigation, body copy, and project labels; Ogg adds editorial contrast to selected italic phrases and project titles. The layout is spacious and deliberately uneven: a broad three-column project field places media at different sizes and positions, with descriptive text immediately beneath each item. Large negative spaces separate the work and preserve a gallery-like rhythm. The visual hierarchy relies on typography, placement, and imagery rather than cards, shadows, or decorative colour blocks.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f2f2f2` | `--color-gallery-mist` | surface | Page canvas and navigation background; provides a continuous pale field around the project media. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Logo, headings, navigation, project labels, links, footer text, and thin divider rules. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Gallery Mist) · `--color-text` → `#000000` (Studio Ink) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| telegraf | `--font-body` | webfont | 400 | Primary sans-serif for navigation, body copy, project names, and links. | Inter |
| ogg | `--font-display` | webfont | 400 | Editorial serif emphasis within introductory copy and selected project-title lines. | Cormorant Garamond |

- **telegraf:** Regular weight throughout; navigation and links use lightly open tracking, while body copy is widely tracked.
- **ogg:** Regular weight; used selectively, often in italic contrast against Telegraf.

### Type scale — Augmented Fourth (ratio ≈ 1.384, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 400 | 1.1 | 0.002em | — | telegraf | Large studio wordmark or primary page statement. |
| h2 | 25.5px | 400 | 1.5 | -0.02em | — | ogg | Editorial serif copy and emphasized project-title lines. |
| h3 | 25px | 400 | 1 | 0 | — | telegraf | Project headings and strong sans-serif labels. |
| h4 | 24.5px | 400 | 1.06 | -0.02em | — | ogg | Smaller serif emphasis within project captions. |
| body | 15px | 400 | 2 | 0.033em | — | telegraf | Studio introduction and supporting project descriptions. |
| nav | 25px | 400 | 1 | 0.04em | — | telegraf | Top-level Work, About, Jobs, and Contact links. |
| link | 20px | 400 | 2 | 0 | — | telegraf | Project links, social prompts, and footer destinations. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 11, 18, 44 px.
- Section rhythm 110px · element gap — · card padding — · max content width 1352px.

Use a spacious three-column project field within a measured maximum width of 1352px. Keep the studio wordmark and introductory statement near the top, with navigation aligned across the upper area. Distribute projects asymmetrically, varying media widths and vertical placement rather than forcing uniform cards. Place captions directly beneath each image or video. Maintain generous section separation, with the measured section gap of 110px, and use the page edges and open canvas as part of the composition.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.31s ease` on interactive elements.

The interface is flat: measured data shows no shadows, gradients, or rounded component treatments. Use the pale canvas as a continuous ground and black hairlines sparingly for separators, such as the social prompt and footer. Keep project media visually distinct through its own imagery, not card elevation.

## Imagery

Treat project media as the main source of colour and personality: polished CGI, animation stills, and branded campaign scenes appear in varied rectangular crops. Keep image colours and lighting intact rather than applying a unifying overlay. Mix large landscape frames with smaller or more vertical pieces, and leave clear pale space around each image so the work reads as a curated portfolio.

## Components

### Top navigation

A sparse row of Work, About, Jobs, and Contact links in regular Telegraf, set directly on the pale canvas.

### Studio introduction

Pair the large NotReal wordmark with a compact studio description; use Ogg for selective editorial emphasis within the copy.

### Project gallery

An asymmetrical three-column field of image and video projects with varied media proportions and substantial open space.

### Project caption

Place project name and supporting campaign or discipline details immediately below each media item, mixing sans-serif and serif emphasis.

### Social announcement

Present the Instagram update as a prominent text link with arrow treatment and thin black divider rules.

### Footer

Keep the copyright line and social destinations small and direct, aligned along the bottom with a fine black rule.

### Measured component styles

- **Link** (“The One Club for Creativity. Emotion Mee”): transparent background · text #000000 · radius 0px · padding 0px · 400 0px telegraf
- **Navigation item** (“Work”): transparent background · text #292a2c · radius 0px · padding 0px · 400 20px telegraf

## Do

- Use #f2f2f2 as the continuous page canvas.
- Reserve #000000 for text, navigation, links, and rules.
- Let project media carry the strong colour.
- Build an irregular gallery rather than uniform cards.
- Use Ogg selectively for editorial contrast.
- Leave generous space between project groups.

## Don't

- Do not add persistent bright UI accent colours.
- Do not place projects in shadowed cards.
- Do not force every media item into one size.
- Do not crowd captions against neighbouring projects.
- Do not use bold, all-caps navigation styling.
- Do not add gradients or decorative rounded containers.

## Agent prompt

Build a creative-studio portfolio page with the restrained, editorial character of Not Real. Use Gallery Mist (#f2f2f2) as the full-page canvas and Studio Ink (#000000) for the wordmark, navigation, copy, links, and hairline dividers. Set navigation and body text in a clean Telegraf-like sans serif; use a refined Ogg-like serif sparingly for italic emphasis. Arrange projects in a spacious, asymmetric three-column gallery, mixing landscape and smaller formats with captions directly beneath media. Let vivid CGI, animation, and campaign imagery supply colour; do not introduce colourful UI accents. Keep the page flat, without shadows or card chrome, and preserve broad breathing room between content groups. Include a concise studio introduction, project captions, an editorial social link, and a minimal footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Spacious three-column asymmetric project gallery with a top navigation and studio introduction. | project-led browsing, direct project links, persistent section navigation | pale monochrome canvas, mixed media proportions, serif caption accents, thin divider rules |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/notreal-tv