# Yuga · Design system migration spec

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

> A masterclass in brutalist digital design, using scale and contrast to create a powerful, memorable brand presence.

## 1. Identity DNA

Yuga’s design system is a monolithic digital entity carved from absolute darkness. It operates on a principle of total binary contrast, where every element exists in a state of stark, uncompromising opposition. This is not a palette of choices but a declaration of absolute form.

**One-liner:** High-contrast brutalist digital presence anchored by massive typography.
**Keywords:** bold · minimal · monolithic · digital · avant-garde
**Analogy:** A monolithic digital entity carved from absolute darkness.

## 2. Color

The color system is a study in absolutes. It uses a strict binary of pure black and pure white, rejecting any intermediate grays or muted tones to create maximum visual impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#131313` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--accent` | `#D3DE5D` | single accent |
| `--line` | `rgba(255, 255, 255, 1)` | divider |

**Color principle:** Absolute binary contrast with strict black and white foundations.

The governing principle is absolute contrast; there is no middle ground, only the stark division between light and void.

## 3. Typography

The typographic voice is structural and monumental, built on the heavy grotesque-sans of AK Monument Grotesk. The system uses extreme weight and scale for hierarchy, with body copy intentionally small and dense to heighten the contrast.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 102px | 0.82 | 800 | -4.8px | Impactful, large-scale headings |
| heading | 52px | 0.9 | 800 | -1.04px | Section headers and emphasis |
| body | 14px | 1.1 | 400 | normal | Small body copy and labels |

**Type rules:**
- Use extreme tight tracking for large display text
- Maintain heavy weight for structural hierarchy
- Keep body text small and dense for contrast

## 4. Spacing

Spacing is governed by a strict 4px grid, enforcing a tight and deliberate rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px grid with tight vertical spacing.

## 5. Surfaces

Surfaces are defined by absence and edge. Shadows are eliminated entirely, leaving structural separation to be communicated solely through thin, high-contrast borders.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, high-contrast borders for structural separation.

## 6. Layout

The layout skeleton is an expansive dark canvas designed to host massive typographic anchors. It prioritizes generous negative space to let these monolithic elements breathe and dominate.

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

**Skeleton:** Expansive dark canvases with massive typographic anchors.

## 7. Motion & Interaction

Motion is philosophy of deliberate fluidity. The system employs smooth opacity fades and transformative structural shifts that feel both refined and inevitable.

- **Durations:** micro 220ms · small 400ms · medium 700ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth opacity fades
  - Transformative structural shifts

- **Hover:** Visual state shifts via color or opacity changes.
- **Click:** Immediate structural feedback.
- **Transition:** Smooth, decelerated transitions for fluid movement.
- **Keyboard:** Accessible focus management via tab navigation.

## 8. Voice & Don'ts

The editorial voice is assertive, direct, and uncompromising. Headlines are short, impactful statements set in massive type, while all language avoids friendliness, frills, or ambiguity.

- **Tone:** Assertive, direct, and uncompromising.
- **Headline style:** Short, impactful statements in massive type.
- **CTA style:** Concise and action-oriented.
- **Avoid:** Friendly or casual language / Frills and decorative elements / Hesitant or ambiguous phrasing

### Don'ts
- ❌ don't use muted grays — screenshot shows absolute black (#000000) and white (#FFFFFF) instead
- ❌ don't use serif fonts — screenshot shows a heavy grotesque-sans (AK Monument Grotesk) instead
- ❌ don't use small display sizes — screenshot shows massive 102px headers instead
- ❌ don't use wide tracking — screenshot shows tight, negative letter-spacing (-4.8px) instead
- ❌ don't use rounded corners on cards — screenshot shows sharp edges instead
- ❌ don't use subtle gradients — screenshot shows flat, high-contrast blocks instead

It deliberately forgoes warmth, decoration, and nuanced tones in favor of pure, monolithic impact.

## System Prompt (paste into AI tool)

```
This is a minimalist, high-contrast design system for a bold digital agency or studio. The primary background is absolute black (#000000) with white (#FFFFFF) text for maximum impact. The typography is a heavy grotesque-sans (AK Monument Grotesk) used in massive sizes (up to 102px) with tight letter-spacing. Layouts are spacious and expansive, emphasizing structural clarity. Critical donts: never use soft grays or muted tones; keep all contrasts binary; avoid serif typefaces or decorative elements; maintain extremely tight tracking on display text; use sharp edges instead of rounded corners. The design is aggressive and uncompromising, prioritizing bold visual statements over soft usability. Interactions are smooth but subtle, relying on opacity and transform transitions.
```