# Moving Brands · Design system migration spec

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

> An excellent example of restrained, high-end agency design that uses extreme contrast and a single bold color to create a memorable brand presence.

## 1. Identity DNA

Moving Brands' design system is built on the analogy of a midnight design studio, where a deep, dark canvas serves as the primary environment. A single, aggressive neon chartreuse accent acts as the critical, striking focal point within this controlled darkness. This creates a system of high contrast and deliberate focus, mirroring the global creative agency's direct and forward-thinking identity.

**One-liner:** A global creative company shaping how organizations are seen and experienced.
**Keywords:** creative agency · branding · global · design
**Analogy:** A midnight design studio with a striking neon accent.

## 2. Color

The color system is defined by its stark, high-contrast monochrome base. A deep black background hosts pure white and light gray text, with a single neon chartreuse reserved exclusively for critical actions and primary calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#212121` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#D0D0D0` | secondary text |
| `--muted` | `#B5B6B8` | placeholder |
| `--accent` | `#BFFE00` | single accent |
| `--line` | `rgba(181, 182, 184, 1.0)` | divider |

**Color principle:** High-contrast monochrome base with a single, aggressive neon chartreuse accent for critical actions.

The principle is singular, aggressive contrast to create a memorable, high-end brand presence without visual clutter.

## 3. Typography

Typography is unified by a clean, humanist sans-serif category for both display and body text, ensuring a cohesive and modern voice. The system relies on generous line heights for optimal readability against the dark background, using weight 500 sparingly for interactive labels.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 400 | -0.5px | Main hero headline |
| display-md | 32px | 1.2 | 400 | 0px | Section headings |
| body-lg | 23px | 1.3 | 400 | 0px | Introductory paragraph |
| body | 19px | 1.4 | 400 | 0px | Main body text |
| body-sm | 15px | 1.4 | 400 | 0px | Small supporting text |
| label | 15px | 1.4 | 500 | 0px | Navigation links |

**Type rules:**
- Display and body typography should use the same humanist sans-serif family for a cohesive, modern feel.
- Maintain generous line heights for readability against the dark background.
- Use weight 500 sparingly for interactive labels and secondary emphasis.

## 4. Spacing

A generous vertical rhythm defines the spacing system, emphasizing an expansive, premium feel on the dark canvas.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm emphasizes the expansive, premium feel of the dark canvas.

## 5. Surfaces

Surfaces are primarily defined by depth through selective shadow and the absence of borders. The design relies heavily on spacing and color contrast for element separation, maintaining a clean, borderless aesthetic.

- **Radius:** sm 0px · md 0px · lg 10px · pill 999px
- **Shadows:**
  - 0px 32px 68px rgba(0, 0, 0, 0.3)
- **Borders:** Minimal and invisible; relies heavily on spacing and color contrast for separation.

## 6. Layout

The layout skeleton begins with a generous, single-column centered column for hero sections, establishing a clear value proposition. It expands into multi-column grids for service areas, using ample negative space to maintain hierarchy and focus.

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

**Skeleton:** Generous single-column centered content for hero, expanding to multi-column grids for services.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, sophisticated transitions and background-position shifts for a calm but dynamic pace. Subtle fade-ins are used for content reveals, ensuring animations enhance the premium aesthetic without becoming a distraction.

- **Durations:** micro 250ms · small 750ms · medium 750ms
- **Easing:** `cubic-bezier(0, 0.25, 0.53, 1.01)`
- **Patterns:**
  - Smooth page transitions and background-position shifts.
  - Subtle fade-ins for content sections.

- **Hover:** Smooth background-color or color transitions.
- **Click:** Immediate visual feedback with slight scale or color shift.
- **Transition:** all 0.25s cubic-bezier(0.55, 0, 0.1, 1) for standard interactions.
- **Keyboard:** Focus states likely follow the high-contrast neon accent.

## 8. Voice & Don'ts

The editorial voice is confident, forward-thinking, and professional, matching the agency's global positioning. Headlines are direct and expansive, while calls to action are simple, clear, and made highly visible through the accent color.

- **Tone:** Confident, forward-thinking, and professional.
- **Headline style:** Direct, action-oriented, and expansive.
- **CTA style:** Simple, clear, and highly visible.
- **Avoid:** Cluttered interfaces / Muted or pastel color palettes / Serif typefaces / Overly complex grid systems / Excessive borders or drop shadows

### Don'ts
- ❌ Don't use a serif typeface — screenshot shows a clean, humanist sans-serif throughout.
- ❌ Don't use multiple bright accent colors — screenshot shows a single, dominant neon chartreuse.
- ❌ Don't use a light or white background — screenshot shows a deep black background as the primary canvas.
- ❌ Don't overcrowd the layout with UI elements — screenshot shows generous whitespace and minimal components.
- ❌ Don't use soft, low-contrast text colors — screenshot maintains high contrast with pure white and light grays.
- ❌ Don't use complex, overlapping decorative elements — screenshot shows a highly restrained, text-focused design.

The system deliberately avoids cluttered interfaces, muted palettes, and complex decorative elements, adhering to a strict, text-focused design.

## System Prompt (paste into AI tool)

```
This is a premium creative agency website. Positioning is forward-thinking and global, built on a stark, high-contrast canvas. Key colors are a deep black (#000000) background, pure white (#FFFFFF) and light gray (#D0D0D0) text, with a single aggressive neon chartreuse (#BFFE00) accent for primary calls to action. Typography uses a clean humanist-sans category for both display and body, ensuring cohesion. Critical donts: Never use a serif font, never use multiple bright accent colors, and never crowd the layout with unnecessary UI elements or borders.
```
