# Create Video · Design system migration spec

> Source: https://create.video  ·  Curated by OpenDesign  ·  en

> The site exemplifies a mature, scalable design system for a high-traffic social platform, balancing readability with functional density.

## 1. Identity DNA

The design system for Create Video is engineered as a digital public square: an open, structured environment where content is the citizen. Its architecture prioritizes clarity and rapid exchange, using a disciplined visual language to organize the constant flow of public discourse.

**One-liner:** A microblogging social platform designed for rapid information exchange and public discourse.
**Keywords:** Social · Timeline · Profile · Feed
**Analogy:** A digital public square for sharing short-form content and updates.

## 2. Color

The palette is a study in high-contrast readability, built on a foundation of pure white and deep ink. A single vibrant blue accent is reserved with strict intentionality, serving as the sole beacon for interactive elements across the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#BACBD4` | card background |
| `--ink` | `#0F141A` | body text |
| `--ink-soft` | `#52636F` | secondary text |
| `--muted` | `#BACBD4` | placeholder |
| `--accent` | `#1D9BF0` | single accent |
| `--line` | `rgba(228, 234, 236, 1)` | divider |

**Color principle:** A high-contrast, content-first palette prioritizing readability with a single vibrant blue accent for interactive elements.

The underlying principle is content-first, where color serves function, never decoration.

## 3. Typography

Typographic voice is uniform and unambiguous, delivered entirely through a single grotesque-sans family, TwitterChirp. The scale is calibrated for digital clarity, with a 15px base size and bold weights used sparingly to establish hierarchy on names and headings.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 20px | 1.2 | 700 | normal | Profile names and primary headings |
| body | 15px | 1.33 | 400 | normal | Post content and primary text |
| caption | 13px | 1.23 | 400 | normal | Secondary information like usernames and timestamps |

**Type rules:**
- Use a consistent grotesque-sans family (TwitterChirp) for all text.
- Maintain a 15px base size for readability.
- Use 700 weight for emphasis on names and titles.

## 4. Spacing

Rhythm is established through a strict 4px grid, creating a predictable and orderly vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard vertical rhythm based on a 4px grid, with 16px and 24px being primary gutters.

## 5. Surfaces

Depth is communicated with exceptional subtlety, using a single, faint shadow definition to lift elements from the surface. Borders are consistently rendered as a hairline rule, providing separation without visual weight.

- **Radius:** sm 4px · md 14px · lg 16px · pill 9999px
- **Shadows:**
  - 0px 4px 12px 0px rgba(0, 0, 0, 0.08)
- **Borders:** 1px solid #E4EAEC

## 6. Layout

The layout is a classic three-column skeleton: a narrow left sidebar for persistent navigation, a dominant center column for the primary content feed, and a right column for supplementary information and suggestions.

- **Container max:** 1265px
- **Grid:** 3 columns, gutter 30px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Three-column layout: Left sidebar for navigation, center column for the main feed, and a right column for suggestions and links.

## 7. Motion & Interaction

Motion is treated as functional feedback, not embellishment. Transitions are swift and consistent at 0.15 seconds, providing immediate yet unobtrusive confirmation of user action through color and opacity shifts.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover and focus.
  - Subtle opacity changes for interactive elements.

- **Hover:** Background color changes slightly (e.g., to #F7F9F9) and text color transitions.
- **Click:** Immediate visual feedback through color change.
- **Transition:** All transitions are set to 0.15s with a smooth cubic-bezier easing.
- **Keyboard:** Standard focus outlines are applied for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, informational, and built for the public sphere. Language is concise and imperative, avoiding ambiguity and corporate formality in favor of clear, action-oriented communication.

- **Tone:** Direct, informational, and public-facing.
- **Headline style:** Bold, concise, and often action-oriented.
- **CTA style:** Clear, imperative verbs (e.g., 'Sign up', 'Create account') on high-contrast buttons.
- **Avoid:** Formal or overly corporate language. / Decorative or flowery prose. / Ambiguous calls to action.

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a consistent grotesque-sans typography system.
- ❌ Don't use heavy drop shadows — screenshot shows minimal or no shadows on most elements, with one subtle example on cards.
- ❌ Don't use a complex grid with many gutters — screenshot shows a clean, three-column layout with consistent spacing.
- ❌ Don't use a dark mode theme — screenshot shows a primarily white background with black text.
- ❌ Don't use multiple accent colors — screenshot shows a single, dominant blue accent color for links and actions.
- ❌ Don't use square corners on buttons — screenshot shows fully rounded, pill-shaped buttons.

The system deliberately forgoes dark mode, serif typography, and decorative flourishes to maintain its focus on functional clarity.

## System Prompt (paste into AI tool)

```
A microblogging social platform for real-time public conversation. The design is clean and functional, prioritizing content with a white background (#FFFFFF), deep ink (#0F141A) for text, and a single vibrant blue accent (#1D9BF0) for interactive elements. Typography is a consistent grotesque-sans family at a 15px base size. Critical donts: Never use serif fonts or heavy drop shadows, avoid a dark mode aesthetic, and never use multiple accent colors. The layout is a structured three-column grid, and interactions are characterized by smooth, subtle color transitions on hover.
```