# Moderne St · Design system migration spec

> Source: https://moderne.st  ·  Curated by OpenDesign  ·  en

> This site effectively uses bold typography and a unique color palette to create a professional yet creative atmosphere.

## 1. Identity DNA

The design system for Moderne St is built like a vibrant, illustrated creative studio. Its identity is defined by a clear **analogy**: a digital workspace that feels both inspiring and organized, a place where ad teams can brainstorm and find insights without visual clutter.

**One-liner:** A digital workspace providing highly tailored ad ideas and insights for creative teams.
**Keywords:** Creative · Workspace · Ad Ideas · Brainstorming · Insights
**Analogy:** A vibrant, illustrated creative studio for ad teams.

## 2. Color

The palette establishes a clear visual dialogue between warm, approachable off-whites and deep, authoritative indigo. This contrast is punctuated by a bright coral accent, creating focal points without resorting to a harsh red.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F3EAE5` | main background |
| `--bg-quiet` | `#171C5D` | quiet area |
| `--ink` | `#3E3C43` | body text |
| `--ink-soft` | `#7C7AAD` | secondary text |
| `--muted` | `#7A7780` | placeholder |
| `--accent` | `#FF7E85` | single accent |
| `--line` | `rgba(124, 128, 173, 1.0)` | divider |

**Color principle:** Warm off-white backgrounds contrasted with deep indigo sections and bright coral accents.

The core principle is one of controlled warmth and professional depth, avoiding flat, clinical whites or overly saturated primaries.

## 3. Typography

Typographic voice is split between two distinct roles: a humanist sans-serif commands attention at large scales, while a transitional serif provides a grounded, readable voice for body copy. This creates a clear hierarchy between impactful display text and detailed explanations.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1px | Large hero headings on dark backgrounds. |
| body | 16px | 1.5 | 400 | 0px | General paragraph text and UI elements. |

**Type rules:**
- Use humanist sans-serif for impactful, large-scale display text.
- Use a transitional serif for body copy and detailed explanations.
- Maintain clear typographic hierarchy between large display text and standard body text.

## 4. Spacing

Vertical rhythm is generous, using large padding blocks to give each content section room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 55 / 64 / 96 / 140 px
- **Rhythm:** Generous vertical spacing with large padding blocks to separate distinct content sections.

## 5. Surfaces

Surfaces are defined by flat design and structural clarity. Depth is conveyed through thin, 2px borders and subtle rounded corners, rejecting the use of drop shadows.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin 2px borders used for outlined cards and buttons.

## 6. Layout

The layout skeleton is a standard responsive structure, anchored by a prominent, split hero section. This establishes a strong visual hierarchy, leading from a dark-background hero into clearly separated content blocks.

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

**Skeleton:** Standard responsive layout with a prominent hero section followed by content blocks.

## 7. Motion & Interaction

Motion is functional and restrained, designed to feel responsive without distraction. Transitions are brief and immediate, reinforcing the efficiency of the interface.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Quick 0.15s transitions for UI elements like buttons and color changes.

- **Hover:** Quick 0.15s color transitions on interactive elements.
- **Click:** Immediate response to clicks.
- **Transition:** Smooth transitions for opacity and color changes.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice balances professional expertise with inspiring, slightly playful language. Headlines are large and impactful, while calls to action remain direct and clear.

- **Tone:** Professional, inspiring, and slightly playful.
- **Headline style:** Large, impactful, and focused on creative empowerment.
- **CTA style:** Direct and action-oriented, such as 'Get Started'.
- **Avoid:** Jargon-heavy language / Dry, overly corporate tone

### Don'ts
- ❌ Don't use a flat white background — the screenshot shows a warm off-white (#F3EAE5) for content sections.
- ❌ Don't use a bright primary color for the dark sections — the screenshot shows a deep indigo (#171C5D).
- ❌ Don't use a bright red for the accent color — the screenshot shows a soft coral (#FF7E85).
- ❌ Don't use purely geometric sans-serif fonts for body copy — the screenshot shows a transitional serif.
- ❌ Don't use heavily rounded corners for UI elements — the screenshot shows subtle 4px border-radius.
- ❌ Don't use drop shadows for card elements — the screenshot shows flat design with thin borders instead.

It deliberately avoids jargon-heavy language and a dry, overly corporate tone.

## System Prompt (paste into AI tool)

```
A SaaS tool for creative teams that provides ad ideas and insights. The palette features warm off-white backgrounds (#F3EAE5), deep indigo sections (#171C5D), and bright coral accents (#FF7E85). Typography uses humanist sans-serif for large display text and a transitional serif for body copy. Critical donts include: Do not use a flat white background; Do not use a bright primary color for dark sections; Do not use a bright red for the accent color. The design relies on bold, large typography and colorful, textured illustrations.
```