# Mad Ac · Design system migration spec

> Source: https://mad.ac  ·  Curated by OpenDesign  ·  en

> Worth including for its radical commitment to typography and custom iconography, proving that a strictly monochrome palette can still feel deeply expressive and forward-thinking.

## 1. Identity DNA

The Mad Ac system embodies an avant-garde studio ethos, where bold artistic expression is disciplined by structured systems thinking. Its identity is a high-contrast, achromatic dialogue between ink and void, rejecting decoration in favor of raw typographic and graphic presence.

**One-liner:** A high-contrast, expressive creative studio identity driven by bold typography and experimental iconography.
**Keywords:** Creative · Bold · Radical · Artistic · Systems-thinking
**Analogy:** An avant-garde design studio that merges bold artistic expression with structured systems thinking.

## 2. Color

Color is a deliberate absence. The palette is a strict binary of deep ink (#111313) on a near-white field (#F4F5F5), using only high-contrast form and negative space to direct focus and create hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4F5F5` | main background |
| `--ink` | `#111313` | body text |
| `--ink-soft` | `#4B5353` | secondary text |
| `--muted` | `#D8DCDC` | placeholder |
| `--line` | `rgba(17, 19, 19, 0.1)` | divider |

**Color principle:** A highly restrained, achromatic palette that relies entirely on high-contrast ink and negative space to direct focus.

This constraint forces clarity, making every element an exercise in pure form and weight.

## 3. Typography

The typographic voice is bold and direct, anchored by a humanist-sans at a uniform weight of 500. Tight tracking and generous vertical spacing create a dense, confident texture that contrasts with the airy layout.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 560 | -0.5px | Primary branding and hero text |
| headline | 32px | 1.1 | 500 | -0.4px | Section headings and navigation |
| body | 14px | 1.0 | 500 | -0.32px | Standard paragraph and UI text |

**Type rules:**
- Use tight tracking (-0.32px) for body and navigation text
- Maintain a uniform weight of 500 for primary text hierarchy
- Ensure generous vertical spacing to balance the dense typographic weight

## 4. Spacing

Spacing follows a loose, spacious rhythm, allowing large graphic elements to breathe while maintaining tight, precise padding within contained components like cards.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A loose, spacious rhythm that allows large graphic elements to breathe while maintaining tight internal padding on cards.

## 5. Surfaces

Depth is suggested not by shadow, but by the clean division of space. A single, subtle 1px border in semi-transparent ink defines surfaces, relying on negative space and contrast for visual separation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(17, 19, 19, 0.1)

## 6. Layout

The layout skeleton is minimalist and centered, prioritizing primary navigation. Content then flows into a stacked, card-based system that provides structure without imposing a rigid, traditional grid.

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

**Skeleton:** A minimalist, center-aligned layout for the primary navigation, transitioning to a stacked card-based system for content.

## 7. Motion & Interaction

Motion is restrained and purposeful, serving interaction rather than spectacle. Subtle opacity shifts and smooth clip-path transitions provide feedback and reveal content with clean, graphical precision.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle color and opacity transitions for interactive elements
  - Clip-path transitions for expressive graphical reveals
  - Smooth backdrop-filter changes for overlaying elements

- **Hover:** Subtle opacity or color shifts, typically a 0.15s transition.
- **Click:** Immediate response with minimal visual feedback.
- **Transition:** Smooth, fast transitions for state changes across UI components.
- **Keyboard:** Standard focus states with visible outlines or color changes.

## 8. Voice & Don'ts

The editorial voice is confident and slightly provocative, using bold, direct headlines to match the typographic intensity. It avoids corporate language and cluttered layouts, speaking instead with graphic conviction.

- **Tone:** Confident, forward-thinking, and slightly provocative.
- **Headline style:** Bold, direct, and highly expressive, often using all-caps for navigation.
- **CTA style:** Subtle and integrated into the typography, avoiding heavy button styles.
- **Avoid:** Avoid cluttered layouts or excessive decorative elements / Avoid low-contrast text or muted color palettes / Avoid generic, corporate-friendly language / Avoid heavy shadows or complex gradients / Avoid standard, uninspired icon sets / Avoid predictable, grid-heavy layouts without breathing room

### Don'ts
- ❌ Don't use a multi-colored palette — screenshot shows a strict black-and-white achromatic scheme.
- ❌ Don't use heavy drop shadows — screenshot shows elements defined by clean borders and negative space.
- ❌ Don't use thin, delicate typography — screenshot shows a bold, heavy humanist-sans with tight tracking.
- ❌ Don't use generic icons — screenshot features highly expressive, custom-drawn organic shapes.
- ❌ Don't use wide, loose letter-spacing — screenshot shows tight, condensed tracking (-0.32px).
- ❌ Don't use a dense, cluttered grid — screenshot shows a highly spacious, center-aligned minimalist layout.

It deliberately avoids color accents, complex gradients, and generic iconography, proving a monochrome system can be radically expressive.

## System Prompt (paste into AI tool)

```
This site represents a radical creative studio identity, defined by a high-contrast, achromatic palette (ink #111313 on background #F4F5F5) and bold, tightly tracked humanist-sans typography. The design relies on large expressive graphics and generous negative space rather than color or decoration. Key constraints include maintaining a strict black-and-white scheme, using heavy weights (500+) for all text, and avoiding generic icons or heavy shadows. Always prioritize bold typography and custom, organic iconography over standard UI patterns. Do not introduce color accents, as the design relies entirely on high-contrast form.
```