# ABC Dinamo · Design system migration spec

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

> An excellent reference for balancing heavy typographic presence with generous whitespace and editorial photography.

## 1. Identity DNA

ABC Dinamo operates like a premium boutique for digital type, where each font is presented as a high-end collectible tool. The design system treats the interface itself as a specimen sheet—a stark, refined container where typography is the primary exhibit. This is a foundry website built to let its own products do the talking.

**One-liner:** A modern, refined type foundry website that emphasizes bold typography, editorial imagery, and a minimalist white-space driven layout.
**Keywords:** typography · foundry · typeface · design · custom
**Analogy:** A premium boutique for digital type, treating fonts as high-end collectible tools.

## 2. Color

The palette is a study in restraint: a stark white canvas, pure black typography, and a single vibrant yellow accent for moments of emphasis. This high-contrast foundation ensures every typographic detail is legible and commanding.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F0F4F6` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#EBEBEB` | placeholder |
| `--accent` | `#FEE905` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Minimalist high-contrast palette with a stark white canvas, black typography, and a single vibrant yellow accent.

The principle is clarity through minimalism, using color not for decoration but as a functional signal within a monochrome field.

## 3. Typography

Typography is the system's voice, rendered in clean geometric and humanist sans-serif categories. All text holds at weight 400, with tight letter spacing for headlines and sparse uppercase transforms for labels, creating a confident, editorial presence without decorative flourish.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 43px | 1.0 | 400 | -0.3px | Hero headlines |
| heading | 27px | 1.1 | 400 | -0.2px | Section headers |
| body | 21px | 1.5 | 400 | 0px | Body text |
| caption | 12px | 1.3 | 400 | 0px | UI elements and captions |

**Type rules:**
- All text uses a weight of 400.
- Large headlines use tight letter spacing.
- Text transforms to uppercase sparingly for labels.

## 4. Spacing

Rhythm is established through generous whitespace between major sections, contrasted with tight, structured spacing within navigation and UI components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace between sections, with tight, structured spacing within navigation and UI components.

## 5. Surfaces

Depth is suggested, not rendered, through minimal borders and the strategic use of a single yellow shadow. The system avoids heavy shadows or layering, preferring flat surfaces with occasional 1px black lines for UI separation.

- **Radius:** sm 4px · md 12px · lg 30px · pill 999px
- **Shadows:**
  - rgb(255, 249, 0) 0px 0px 0px 1px
- **Borders:** Minimal borders, occasionally using 1px solid black for UI separation.

## 6. Layout

The layout is anchored by a persistent, left-aligned navigation sidebar, creating a strong vertical axis. The central and right content areas then hold large, asymmetric editorial imagery and feature blocks.

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

**Skeleton:** Asymmetric split layout with a persistent left-aligned navigation sidebar and a central/right content area for hero images and features.

## 7. Motion & Interaction

Motion is functional and unobtrusive, with smooth opacity fades for page transitions and cubic-bezier transforms for micro-interactions. The philosophy is to emphasize content flow, not to distract from the typographic subject matter.

- **Durations:** micro 250ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.1, 0.6, 0.4, 1)`
- **Patterns:**
  - Smooth opacity and background fades for page transitions.
  - Cubic-bezier transforms for micro-interactions.
  - Linear delays for sequential element loading.

- **Hover:** Subtle color shifts or background changes on navigation and UI elements.
- **Click:** Immediate feedback through active states.
- **Transition:** Unified 0.25s to 1s transitions using custom cubic-bezier curves.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, creative, and authoritative, using short, impactful, all-caps statements for headlines and direct, unadorned language for calls to action.

- **Tone:** Professional, creative, and authoritative.
- **Headline style:** Short, impactful, all-caps statements.
- **CTA style:** Simple, direct, and unadorned.
- **Avoid:** Heavy decorative elements. / Loud, clashing color palettes. / Complex, multi-layered gradients.

### Don'ts
- ❌ Don't use bold font weights — screenshot shows all text at weight 400.
- ❌ Don't use dark mode — screenshot shows a primarily bright white background.
- ❌ Don't add complex gradients — screenshot shows flat, solid color backgrounds.
- ❌ Don't use decorative serif fonts — screenshot shows clean geometric and humanist sans-serifs.
- ❌ Don't overuse bright colors — screenshot shows a mostly black-and-white palette with minimal yellow accents.
- ❌ Don't use sharp, square corners — screenshot shows heavily rounded pill and card shapes.

The system deliberately rejects bold weights, dark mode, complex gradients, decorative serifs, loud color palettes, and sharp corners.

## System Prompt (paste into AI tool)

```
This is a modern, refined type foundry website that emphasizes bold typography, editorial imagery, and a minimalist white-space driven layout. The design uses a stark white background with solid black text for maximum contrast, occasionally accented by a vibrant yellow. Typography is predominantly clean geometric and humanist sans-serif categories, presented at a large scale with tight letter spacing in headlines. A persistent left-aligned navigation sidebar anchors the interface. Key hex colors include #FFFFFF, #000000, and #FEE905. Critical donts: never use bold font weights, avoid dark mode entirely, do not introduce complex gradients, stick to sans-serif categories, keep color usage strictly minimal, and always use heavily rounded corners for cards and chips.
```