# Hello Monday · Design system migration spec

> Source: https://hellomonday.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how a restrictive color palette combined with strong typography can create a highly memorable and premium brand identity for a creative studio.

## 1. Identity DNA

The Hello Monday design system is built on an editorial magazine's conviction: that restraint itself is the primary creative tool. Its identity operates like a high-end publication, where every element exists in deliberate conversation with the empty space around it, creating a studio environment that feels both confident and deliberately unfinished—ready for collaboration.

**One-liner:** A creative agency crafting digital and magical experiences for startups and product departments.
**Keywords:** Creative Agency · Product Innovation · Digital Experiences · Collaborative
**Analogy:** A high-end editorial magazine meets a modern creative studio.

## 2. Color

The palette is a study in dramatic contrast, operating almost exclusively in black and white with a warm off-white (#F8F6F5) providing subtle depth to the background. A single playful pink (#DB7093) emerges only for specific highlights, its rarity making it a point of deliberate, punctuation-like emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F6F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#2C2D2E` | secondary text |
| `--muted` | `#CACACA` | placeholder |
| `--accent` | `#DB7093` | single accent |
| `--line` | `rgba(0, 0, 0, 0.3)` | divider |

**Color principle:** Stark black and white contrast with a single playful accent color, relying heavily on white space and typography.

The core principle is stark contrast; color is a tool for accent, not a system for filling space.

## 3. Typography

Typographic hierarchy is absolute, built on the clear dichotomy between a classic transitional serif for maximum impact headlines and a clean humanist sans-serif for body text. This pairing establishes an immediate editorial voice, where display type commands attention and body type ensures unwavering readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Main hero headlines |
| body-lg | 22px | 1.1 | 400 | normal | Primary body text and secondary headings |
| body-sm | 14px | 1.4 | 400 | normal | Small labels, navigation, and metadata |

**Type rules:**
- Display typography uses a classic transitional serif for maximum impact.
- Body typography uses a clean humanist sans-serif for high readability.
- Font weights are predominantly regular (400), with light (300) used sparingly for subtle hierarchy.

## 4. Spacing

Vertical rhythm is established through generous, almost architectural padding and large margins, often using substantial multiples of the base to create measured, breathable sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is established through generous padding and large margins, often using large multiples of the base (e.g., 64px, 71px).

## 5. Surfaces

Surfaces are defined by flat, clean planes with no drop shadows, relying instead on thin 1px solid dividers (rgba(0, 0, 0, 0.3)) to delineate sections. Sharp 90-degree corners are a non-negotiable constraint, reinforcing the system's precise, constructed feel.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(0, 0, 0, 0.3) used for subtle section dividers; no rounded corners.

## 6. Layout

The layout skeleton is a clean, expansive grid that prioritizes large hero sections and clear horizontal breaks. Generous white space is not empty but active, framing massive typography and guiding the eye through a deliberate visual narrative.

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

**Skeleton:** A clean grid with distinct hero sections, large horizontal dividers, and generous whitespace.

## 7. Motion & Interaction

Motion philosophy is one of refined subtlety, used to reveal content and confirm interaction rather than to decorate. Transitions are smooth and often deliberate in pace, frequently lasting a full second for larger reveals to maintain a calm, professional demeanor.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fade-in transitions for content blocks
  - Hover state transitions on text links

- **Hover:** Subtle underline or opacity change on text links and interactive elements.
- **Click:** Immediate response with no heavy feedback animations.
- **Transition:** All properties transition smoothly, often over 1 second for larger reveals.
- **Keyboard:** Standard tab navigation with focus states likely matching hover states.

## 8. Voice & Don'ts

The editorial voice is confident and professional, yet carries a tone of playful approachability. Headlines are bold, impactful, and often slightly whimsical or poetic, while CTAs are direct and action-oriented, presented as simple underlined text.

- **Tone:** Confident, professional, yet playfully approachable.
- **Headline style:** Bold, impactful, and often slightly whimsical or poetic.
- **CTA style:** Direct and action-oriented, presented as simple underlined text.
- **Avoid:** Avoid cluttered layouts or busy backgrounds. / Avoid using stock photography for team sections; prefer custom illustrations. / Avoid overly complex navigation structures.

### Don'ts
- ❌ Don't use rounded corners on cards or buttons — screenshot shows sharp 90-degree angles.
- ❌ Don't add drop shadows to surfaces — screenshot shows flat, clean layouts.
- ❌ Don't use a chaotic color palette — screenshot shows a strict black, white, and single-accent scheme.
- ❌ Don't hide navigation behind complex mega-menus — screenshot shows a minimal hamburger icon.
- ❌ Don't use sans-serif for major headlines — screenshot shows a prominent transitional-serif display font.
- ❌ Don't fill every pixel with content — screenshot shows extensive use of white space to create focus.

The system deliberately rejects clutter, chaotic color, rounded corners, stock photography for teams, complex navigation, and the compulsion to fill every pixel with content.

## System Prompt (paste into AI tool)

```
This is a creative agency portfolio site for Hello Monday. The design is minimalist and highly editorial, featuring a stark contrast between massive transitional-serif display fonts and a clean humanist-sans-serif body font. The color palette is predominantly monochrome (black #000000 and white #FFFFFF) with a warm off-white background (#F8F6F5) and a signature playful pink accent (#DB7093). Layouts rely heavily on generous white space, sharp 90-degree corners, and thin dividers. Key design constraints include: always use sharp, non-rounded corners; always use generous vertical spacing; and never use stock photography for team illustrations. The overall feel is sophisticated, confident, and premium.
```
