# Wearemotto · Design system migration spec

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

> This site is an excellent study in the power of extreme typographic scale and restraint to create a premium, authoritative brand presence.

## 1. Identity DNA

The system operates like a high-end architectural firm for brand strategy: structure and space are the primary materials. Every component is stripped to its essential form, where massive typographic scale and expansive whitespace carry the full weight of the brand's authority.

**One-liner:** A bold, type-led agency site that commands attention through massive display fonts and expansive whitespace.
**Keywords:** Strategy · Design · Consultancy · Innovation · Futurism
**Analogy:** A high-end architectural firm for brand strategy

## 2. Color

The palette is a study in restraint: a warm off-white field (#F4F3F0) serves as the ground, with deep, near-black ink (#1B1B1C) as the sole type color. This high-contrast monochrome creates immediate visual clarity and a sense of sophisticated permanence.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4F3F0` | main background |
| `--ink` | `#1B1B1C` | body text |
| `--ink-soft` | `#717476` | secondary text |
| `--muted` | `#848484` | placeholder |
| `--muted-soft` | `#4D5153` | weak hint |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** High-contrast monochrome with a warm neutral base

The principle is absolute clarity through chromatic simplicity.

## 3. Typography

The typographic voice is declared through a geometric and humanist sans-serif system, set with aggressive confidence. Display type is rendered in massive, all-caps scales with a tight 1.0 line height and consistent medium weight, creating a monolithic, declarative presence on the page.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 153px | 1.0 | 500 | -1px | Main hero headline |
| heading-1 | 99px | 1.0 | 500 | -1px | Secondary headlines |
| body | 20px | 1.38 | 500 | normal | Body text and navigation |

**Type rules:**
- Massive, all-caps display type dominates the layout
- Tight line heights (1.0) for large display text
- Medium weight (500) used consistently across all text

## 4. Spacing

The vertical rhythm is generous and deliberate, established by 158px of top padding that grants major sections profound breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 19 / 24 / 32 / 38 / 48 / 67 / 77 / 99 / 158 px
- **Rhythm:** Generous vertical spacing with 158px top padding for major sections

## 5. Surfaces

Surfaces are flat and graphic, devoid of shadows or three-dimensional effects. The only border is a functional, 1px solid black line used to underline active calls to action.

- **Radius:** sm 0px · md 9px · lg 9999px · pill 9999px
- **Borders:** 1px solid black for active CTA underlines

## 6. Layout

The layout skeleton is a full-bleed hero section that commands the viewport. This gives way to a wide, multi-column grid for portfolio items, maintaining the system's expansive spatial character.

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

**Skeleton:** Full-bleed hero with a wide multi-column grid for portfolio items

## 7. Motion & Interaction

Motion is polished and performant, using smooth, high-out cubic-bezier easings for content reveals. Interactions rely on subtle opacity shifts and complex transform animations for portfolio elements, ensuring transitions feel both substantial and fluid.

- **Durations:** micro 350ms · small 400ms · medium 750ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth, high-out eases for content reveals
  - Subtle opacity transitions on hover
  - Complex transform animations for portfolio elements

- **Hover:** Subtle color or opacity shifts on links and buttons
- **Click:** Immediate response with smooth easing into new state
- **Transition:** Smooth 0.35s opacity and 0.7s color transitions
- **Keyboard:** Standard tab navigation with visible focus states

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and visionary, mirrored in the headline style of declarative, all-caps statements. Calls to action remain simple, direct text links, reinforcing the system's visual restraint.

- **Tone:** Confident, authoritative, and visionary
- **Headline style:** Declarative statements in massive, all-caps geometric sans-serif
- **CTA style:** Simple, direct text links with minimal visual weight
- **Avoid:** Playful language / Rounded corners / Bright accent colors / Dense text blocks

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a strictly monochrome palette with a warm off-white background.
- ❌ Don't use small, centered headlines — screenshot shows massive, left-aligned display type that spans the viewport.
- ❌ Don't use heavy drop shadows or 3D effects — screenshot shows completely flat, 2D surfaces.
- ❌ Don't use rounded buttons or cards — screenshot shows sharp edges or very specific circular pills.
- ❌ Don't use serif fonts — screenshot shows a strictly sans-serif typographic system.
- ❌ Don't use dense, multi-column text layouts — screenshot shows extreme whitespace and a single-column reading flow for primary content.

The system deliberately avoids playful language, rounded corners, bright accent colors, and dense text blocks.

## System Prompt (paste into AI tool)

```
This is a high-end agency and consultancy site characterized by massive, bold display typography and expansive whitespace. The primary colors are a warm off-white background (#F4F3F0) and deep black text (#1B1B1C), creating a sophisticated, high-contrast aesthetic. The typography uses geometric and humanist sans-serif categories, with display headlines set at extreme sizes (150px+) using a tight 1.0 line height and medium weight. Interactions are smooth and refined, relying on subtle opacity and color shifts. Critically, do not use rounded corners, drop shadows, or bright accent colors; the design relies purely on typographic scale and spatial rhythm. Avoid cluttered layouts and ensure all headlines remain left-aligned and uppercase for maximum impact.
```