# Embacy · Design system migration spec

> Source: https://www.embacy.io/nft  ·  Curated by OpenDesign  ·  en

> The site is worth including as a prime example of a clean, sophisticated agency portfolio that uses scale and negative space to create visual impact.

## 1. Identity DNA

This design system is built for a high-end design agency portfolio, one that serves global tech brands with precision and restraint. Its identity DNA is defined by a high-contrast monochrome base and a single, vibrant orange accent—a palette that speaks with clarity and confidence rather than volume.

**One-liner:** A clean, sophisticated design agency portfolio featuring bold typography and a high-contrast black-and-white base.
**Keywords:** global · tech · design · partner · agency
**Analogy:** A high-end design agency portfolio focused on global tech brands.

## 2. Color

The color system operates on a strict principle of high-contrast monochrome, establishing a powerful visual foundation through black and white alone. A single vibrant orange accent is reserved for moments of emphasis, ensuring it carries significant weight when it appears.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f7f7f7` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#ff5319` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome base with a single vibrant orange accent used sparingly for emphasis and calls-to-action.

The core principle is economy: use the accent only where it must direct the eye.

## 3. Typography

The typographic voice is both monumental and clean, driven by a geometric sans-serif set in massive scales. It relies on tight, negative letter spacing and generous vertical whitespace to build hierarchy, deliberately avoiding heavy font weights in favor of pure scale and positioning.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | hero headline |
| heading | 43px | 1.1 | 400 | -0.5px | section title |
| body | 16px | 1.3 | 400 | -0.16px | general text |
| caption | 14px | 1.4 | 400 | 0 | small text |

**Type rules:**
- Use tight negative letter spacing for headlines.
- Maintain generous vertical whitespace between sections.
- Avoid heavy font weights; rely on size and spacing for hierarchy.

## 4. Spacing

The spatial rhythm is generous and deliberate, using ample whitespace to create clear, breathing separation between grid items and content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with clear separation between grid items.

## 5. Surfaces

Surfaces are defined by flat planes and the stark contrast between background fields. Depth is achieved through layout and spacing alone, with a strict avoidance of decorative borders and drop shadows.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Borders:** Minimal to no visible borders; structure is defined by spacing and background contrast.

## 6. Layout

The structural skeleton is a standard 12-column grid, providing a robust framework for editorial compositions. This grid collapses cleanly to a 2-column layout on mobile, maintaining the system's integrity across devices.

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

**Skeleton:** Standard 12-column grid that collapses to a 2-column grid on mobile.

## 7. Motion & Interaction

Motion is used with purpose and subtlety, favoring smooth opacity and transform transitions that feel like a natural part of the interface's physics. The philosophy is one of fluid continuity, not decoration, with a horizontal scrolling marquee serving as a key functional pattern.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.1, 0, 0.3, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for page elements.
  - Horizontal scrolling marquee for announcements.

- **Hover:** Subtle opacity or color transitions.
- **Click:** Direct navigation or smooth scroll.
- **Transition:** Consistent 0.4s to 0.6s transitions with custom easing.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and confident, avoiding excessive adjectives and technical jargon. Headlines are minimal, large-scale, and declarative, while calls-to-action use playful clarity with emojis as visual anchors.

- **Tone:** Professional, direct, and confident.
- **Headline style:** Minimal, large-scale, and declarative.
- **CTA style:** Playful yet clear, using emojis as visual anchors.
- **Avoid:** Excessive adjectives / Technical jargon / Loud or aggressive sales copy

### Don'ts
- ❌ Don't use multiple bright accent colors — screenshot shows only one dominant orange.
- ❌ Don't use heavy font weights like bold or black — screenshot shows predominantly 400-weight text.
- ❌ Don't add decorative borders to cards — screenshot shows structure through spacing and image content.
- ❌ Don't use wide letter spacing for headlines — screenshot shows tight, negative tracking.
- ❌ Don't clutter the interface with many UI components — screenshot shows a very clean, minimal layout.
- ❌ Don't use drop shadows for depth — screenshot shows a flat design aesthetic.

They deliberately do not pursue visual complexity, instead committing to a system where emptiness and restraint are the primary tools for focus and impact.

## System Prompt (paste into AI tool)

```
This is a design agency portfolio for Embacy, a 'Design Partner for Global Tech Brands'. The design relies on a high-contrast monochrome palette with a single vibrant orange (#FF5319) accent. Typography uses a geometric sans-serif (Haffer) with large, tightly tracked headlines and generous whitespace. Critical donts include avoiding heavy font weights, multiple accent colors, decorative borders, wide tracking, cluttered UIs, and drop shadows. The layout is clean and editorial, focusing on large imagery and bold text.
```
