# Tomorrow Happens Studio · Design system migration spec

> Source: https://tomorrow-happens.studio  ·  Curated by OpenDesign  ·  en

> Worth including for its exceptionally restrained, poetic approach to web design, prioritizing typography and subtle motion over complex UI components.

## 1. Identity DNA

The design system is structured like a quiet poetry book, where a single-word anchor holds the composition steady while the rest unfolds in motion. Every decision—from the strict monochrome palette to the continuous scroll—serves this singular, reflective narrative. It is a system built not for density, but for pause.

**One-liner:** A minimalist design studio landing page that uses a continuous, fading poetic scroll anchored by the static word 'Tomorrow'.
**Keywords:** Minimal · Poetic · Design Studio · Reflective
**Analogy:** A quiet poetry book with a single-word anchor

## 2. Color

Color is reduced to its most fundamental state: a binary of pure white and solid black, with no chromatic intervention. Hierarchy is achieved not through hue, but through the precise modulation of opacity and weight, creating depth from absence.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#e3e3e3` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast minimalism using a strict monochrome palette with varying opacity for visual hierarchy.

The principle is one of high-contrast minimalism, where the palette's restraint forces every other element to carry its own visual weight.

## 3. Typography

Typography carries the entire emotional and structural load, bifurcated into a thin, transitional serif for the poetic display and a small, utilitarian grotesque for navigation. The serif operates as the studio's voice, set in a continuous, sentence-case scroll that prioritizes rhythm over individual statement.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 39px | 1.2 | 200 | normal | Continuous poetic headline scroll |
| body | 12px | 1.07 | 500 | normal | Navigation links and footer items |

## 4. Spacing

The rhythm is established through generous whitespace, creating a sense of breath around the tightly set, continuous line of text. Spacing is a field for the typography to occupy, not a grid to fill.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 60 / 96 px
- **Rhythm:** Generous whitespace with tight line height for the main display text.

## 5. Surfaces

Surfaces are defined by absolute flatness and absence, rejecting any shadow or gradient that might imply depth. A single, precise 1px border exists only to perform the most minimal act of separation in the navigation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid black for thin, precise navigation separators.

## 6. Layout

The layout skeleton is a simple binary: a fixed, narrow sidebar for navigation and a wide, central column for the scrolling text. This architecture creates a clear division between control and content, with the static sidebar anchoring the fluid main experience.

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

**Skeleton:** Sidebar navigation with the primary content focused on a vertically scrolling text block.

## 7. Motion & Interaction

Motion is not decorative but functional, used solely to articulate the passage of time within the scroll. The soft opacity fade on each line of text transforms a basic browser interaction into a deliberate, pacing mechanism.

- **Durations:** micro 150ms · small 500ms · medium 0ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Continuous vertical scroll with opacity fading for individual lines

- **Hover:** Opacity fades on navigation items.
- **Click:** Triggered on sidebar and footer navigation links.
- **Transition:** Smooth opacity transitions for text and links.
- **Keyboard:** Standard link navigation.

## 8. Voice & Don'ts

The editorial voice is poetic, reflective, and deliberately fragmented, using lowercase, sentence-case statements that invite reading as a continuous flow rather than as discrete headlines. It avoids density and declarative structure in favor of suggestion and tone.

- **Tone:** Poetic, reflective, and philosophical
- **Headline style:** Lowercase, sentence-case, fragmented statements that scroll continuously
- **CTA style:** Minimalist text links with a '+' suffix
- **Avoid:** Uppercase headers / Bright accent colors / Dense paragraphs

### Don'ts
- ❌ Don't use bright accent colors — the screenshot shows a strictly monochrome black-and-white palette.
- ❌ Don't use heavy font weights for display text — the screenshot shows a very thin, elegant serif font.
- ❌ Don't use drop shadows or complex 3D effects — the screenshot shows completely flat, two-dimensional elements.
- ❌ Don't use rounded corners on buttons or cards — the screenshot shows sharp, geometric, and borderless layouts.
- ❌ Don't use busy background patterns or imagery — the screenshot shows a clean, pure white background.
- ❌ Don't use complex, multi-level navigation menus — the screenshot shows only simple, flat text links.

The system deliberately refuses complexity—no accent colors, no heavy weights, no decorative shadows, no rounded forms—maintaining its integrity through rigorous omission.

## System Prompt (paste into AI tool)

```
This is a minimalist design studio portfolio. The primary visual identity is built on a stark monochrome palette of pure white (#ffffff) and solid black (#000000). It relies heavily on a thin, transitional serif font for its poetic, continuously scrolling display text, contrasted with a small grotesque sans-serif for navigation. The core interaction is a vertical scroll that creates a fading effect on the text. Critical donts include: never use bright accent colors, never use heavy font weights for the display text, and never add drop shadows, complex borders, or rounded corners to elements. The design should remain strictly flat, airy, and typographically focused.
```