---
version: alpha
name: "Dinamo"
description: "Swiss experimental type foundry using its own typefaces as the UI, pure black-and-white canvas with electric yellow and green accents, and motion-charged hover states that treat every interaction as a specimen demonstration."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"             # off-white used for alternating sections / specimen tiles
  surface-dark: "#000000"        # inverted panels — dark backgrounds for contrast promos

  # Ink / text
  ink: "#000000"
  ink-muted: "#5a5a5a"           # secondary labels and captions
  on-background: "#000000"
  on-surface: "#000000"
  on-dark: "#ffffff"             # text on surface-dark panels

  # Brand accent — electric yellow
  primary: "#fee905"             # CTA strips, highlighted buttons, hover fill; Dinamo signature yellow
  on-primary: "#000000"          # black text on yellow is the brand's contrast pairing

  # Accent 2 — phosphor green (hover border)
  accent-green: "#00ff00"        # focus / hover border glow on interactive links — Dinamo's digital signal

  # Borders
  border: "#ebebeb"              # hairline dividers, card outlines

  # Focus / states
  focus-ring: "#fee905"          # yellow focus outline mirrors the primary accent
  text-hover: "#fee905"          # was rgb(254,233,5) — opaque; used as link hover background stamp

  # Shadow tint
  shadow-soft: "#e0e0e0"         # opaque approx for any subtle elevation

typography:
  display-hero:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 86px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0px
  display:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 51px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-section:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  button-ui:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  mono:
    fontFamily: "Monument Grotesk Mono, SFMono-Regular, Consolas, Monaco, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.32px
  caption:
    fontFamily: "Monument Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 11px
  md: 22px
  lg: 33px
  xl: 66px
  2xl: 99px
  3xl: 132px

rounded:
  none: 0px
  sm: 12px
  md: 32px
  lg: 48px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    border: "1px solid {colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 22px
    border: "1px solid {colors.border}"
  card-hover:
    backgroundColor: "{colors.surface}"

  font-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 33px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 3px 8px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    border: "1px solid {colors.ink}"
  input-focus:
    border: "1px solid {colors.accent-green}"

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 11px 22px

  marquee-strip:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-hero}"
    padding: 11px 0px
---

# Dinamo Design System

## Overview

Dinamo, the Basel-based type foundry behind ABC Diatype, ABC Favorit, Monument Grotesk, and dozens of other releases, treats its website as a living type specimen — every pixel is an argument for the quality and character of what it sells. The canvas is absolute {colors.background} white against {colors.ink} black, with no midtones, no gradients, and no decorative chrome getting between the viewer and the letterforms. It is one of the most disciplined two-color systems in commercial type design, and the few moments where {colors.primary} electric yellow enters the composition land with the force of a neon sign in a white room.

The foundry's UI font is Monument Grotesk, its own workhorse grotesque, deployed across every size from 11px navigation labels to 86px section headers. This is not incidental — it turns every scroll through the site into an implicit demonstration of what the typeface can do across optical scales. The secondary voice is Monument Grotesk Mono, which appears in metadata, product codes, and specimen annotations, creating a tool-like register that contrasts with the warm expressivity of the display cuts. Deeper in the layout, rotational ABC fonts cycle through the hero grid as large-format specimens, making the homepage a shifting gallery of the catalog.

Motion is a first-class material at Dinamo. The easing signature — `cubic-bezier(0.55, 0.08, 0, 1)` for navigation and `cubic-bezier(0.1, 0.6, 0.4, 1)` for cards and media — feels spring-like and physical. Hovering a type card slides it slightly; hovering the wordmark triggers a subtle rotation transform. A marquee strip in {colors.primary} yellow wraps the footer, perpetually cycling font names. Sticker animations (float, bounce, wobble) add a playful self-awareness that keeps the system from feeling too cold.

**Key Characteristics:**
- Pure binary palette: {colors.background} white and {colors.ink} black carry all UI weight — colour is reserved for signals
- {colors.primary} electric yellow (#FEE905) is the sole CTA colour, focus ring, and hover fill — used exclusively, never diluted
- {colors.accent-green} phosphor green (#00FF00) appears as the hover border on interactive links — a deliberate digital signal
- Monument Grotesk as both the UI system font and the primary showpiece; the design proves the product
- 11px base spacing unit, not 8px — rhythms fall at 11 / 22 / 33 / 66 / 99 / 132px, giving the page a custom cadence
- Large pill radius (48px on image tiles, 32px on cards) creates balloon-like containers that feel contemporary and friendly
- Type specimen cards dominate the layout — the homepage is a grid of live, rotating letterform examples
- Motion-first philosophy: every hover triggers a transform or colour shift at 0.25s with spring-like custom easing
- Marquee animation in {colors.primary} yellow at the footer is a brand constant — typography as ticker
- Flat elevation system with no drop shadows; depth is created by background colour contrast alone
- Uppercase used selectively for section headers and navigation, creating hierarchy without weight changes
- Monument Grotesk Mono for metadata and codes — tool-like precision contrasting expressive display cuts

## Colors

### Primary Canvas
- **White** (`{colors.background}`): The dominant surface — entire pages read as specimens printed on white stock
- **Off-white** (`{colors.surface}`): Tile and section backgrounds; separates zones without introducing color

### Ink
- **Black** (`{colors.ink}`): All primary text, borders, button outlines, and navigation labels
- **Muted** (`{colors.ink-muted}`): Secondary captions and metadata labels at reduced emphasis

### Brand Accent
- **Electric Yellow** (`{colors.primary}`): The foundry's signature — used for CTA strips, primary buttons, marquee backgrounds, and the hover fill stamp. It appears rarely, which is what makes it work.
- **On Yellow** (`{colors.on-primary}`): Black text on yellow; the contrast is stark and intentional

### Interaction Signals
- **Phosphor Green** (`{colors.accent-green}`): Link hover borders and focus rings in specific contexts — an 8-bit, screen-space hue that signals interactivity without matching the brand yellow
- **Focus Ring** (`{colors.focus-ring}`): Yellow focus outline applied consistently to keyboard-focused controls

### Dark Mode Inversion
- **Inverted panel** (`{colors.surface-dark}` / `{colors.on-dark}`): Black-background promotional sections with white type — used for high-contrast feature callouts

### Border
- **Hairline** (`{colors.border}`): Subtle #ebebeb rule used at container edges and tile dividers; invisible at a glance, structural under scrutiny

## Typography

### Font Family
- **Primary**: `Monument Grotesk`, with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`
- **Monospace**: `Monument Grotesk Mono`, with fallbacks: `SFMono-Regular, Consolas, Monaco, monospace`
- **Specimen fonts** (dynamically loaded per tile): ABC Diatype, ABC Favorit, ABC Arizona, ABC Daily Scotch, ABC Camera Rounded, ABC Publisher Rounded, ABC Pelikan, ABC Solar, ABC Bubblegum, ABC Honeymoon, and others — loaded per-page as the catalog warrants

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero section headers, marquee text, large promotional callouts |
| `display` | Product description leads, large body sections, intro paragraphs |
| `heading-section` | Section titles, uppercase navigation categories |
| `heading-sub` | Card titles, sub-section anchors |
| `body-large` | Lead text, featured quotes, specimen annotations |
| `body` | General prose, product descriptions, editorial copy |
| `nav-link` | Top-level navigation, footer link lists, tag labels |
| `button-ui` | CTA buttons, action labels |
| `mono` | Font metadata, weight listings, technical product codes |
| `caption` | Image captions, price tags, release dates |

### Principles
- Weight is never used for hierarchy — only size distinguishes levels; Monument Grotesk stays at 400 throughout
- Uppercase at `heading-section` and `nav-link` does the work that bold would do in other systems
- The 11px `nav-link` / `caption` size is extremely small — it trusts the type's optical clarity
- Negative tracking (`-0.32px`) on `mono` tokens corrects for the open spacing of monospace glyphs
- Line-height drops to 0.9 on `display-hero` — tightly-set display text that stacks like a poster

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: **11px** — an unconventional choice that produces a distinctive cadence. The rhythm falls at 11 / 22 / 33 / 66 / 99 / 132px, all multiples of 11.

This 11px base feels editorial and print-influenced rather than digital. It produces proportions that are slightly more compressed than 8px grids, matching the tight leading and dense specimen layouts found in type specimen books.

### Grid & Container
- Max content width: approximately 1440px
- Variable column layout — hero uses a masonry-like multi-column specimen grid; editorial sections drop to 2 columns
- Full-bleed sections (marquee, dark-inversion panels) break the column grid to signal content transitions
- Navigation is fixed-top, minimal: 11px text, `{spacing.md}` padding, no separators

### Whitespace Philosophy
- Generous margins at page edges (66–99px) frame the content like a printed specimen sheet
- Within sections, spacing is deliberately dense — type tiles sit close together to allow visual comparison
- The contrast between dense tile grids and wide editorial sections creates rhythm and rest

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All UI surfaces — cards, tiles, inputs |
| Section boundary (Level 1) | Background colour change (`{colors.surface}` or `{colors.surface-dark}`) | Section transitions without shadow |
| Card hover | Slight lift via `transform: translateY(-2px)` at 0.25s | Type specimen tile hover feedback |
| Focus Ring | 1px solid `{colors.focus-ring}` | Keyboard focus on interactive controls |
| Modal | None — overlaid on dimmed page background | Font trial / purchase modal |

**Shadow Philosophy**: Dinamo runs completely flat. No drop shadows appear anywhere in the UI — depth is created entirely through background-colour contrast, card borders, and motion (hover transforms). This is consistent with the system's Swiss-influenced aesthetic: shadows are decorative; structure is structural.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Input labels, nav elements, marquee strips |
| `sm` | 12px | Inputs, email field, search form |
| `md` | 32px | Standard cards, font tiles, modal containers |
| `lg` | 48px | Primary image tiles, large specimen containers |
| `pill` | 9999px | Buttons, badges, tag labels |

The Dinamo system favours large radius values. Cards are generous rounded rectangles that feel balloon-like rather than boxed. Buttons are full pills. This creates a visual warmth that counterbalances the stark black-and-white palette — the shapes are friendly even when the colour is not.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants
- **`button-primary`** — full pill, {colors.primary} yellow fill with {colors.on-primary} black text; on hover inverts to black fill with white text; used for primary CTAs ("Explore ABC Arizona", newsletter subscribe)
- **`button-secondary`** — full pill, white fill with black border and black text; matches primary sizing; used for secondary actions and ghost states on dark sections

### Cards / Font Tiles
- **`card`** — standard rounded-md card with hairline `{colors.border}` border; used for editorial content and smaller font previews
- **`font-tile`** — larger rounded-lg container at `{colors.surface}` off-white; used for the homepage specimen grid; holds live typeface renderings in a contextual colour that may change per brand season

### Marquee Strip
- **`marquee-strip`** — full-bleed yellow strip (`{colors.primary}`) with black type at `{typography.display-hero}` scale; loops at 4.4s linear; contains repeating font names separated by punctuation marks

### Inputs
- **`input`** — rounded-sm, thin black border, no fill; focus state swaps border to `{colors.accent-green}` phosphor green — a deliberate signal shift
- Email subscription input in the newsletter section uses the same token but with a wider pill shape

### Navigation
- Sticky top bar with {colors.background} white background; {typography.nav-link} 11px text; no bottom border; logo on left, font categories and cart on right; collapses to hamburger on mobile

### Badges
- **`badge`** — pill shape, {colors.primary} yellow fill, black text; used for "New", "Trial", and release-status tags on font cards

## Do's and Don'ts

### Do
- Use `{colors.primary}` only for primary CTAs, the marquee, and hover fill stamps — it earns its impact through scarcity
- Let the typefaces do the visual work; use large specimen sizes (86–246px) to show the product in context
- Maintain the 11px spacing rhythm (multiples of 11) for all internal padding and layout gaps
- Use `{rounded.pill}` for all buttons and `{rounded.lg}` for image tiles — the generous radius is part of the brand's warmth
- Apply `{colors.accent-green}` exclusively as a focus/hover border signal, never as a fill colour
- Animate type tiles with `transform` and `opacity` at `cubic-bezier(0.1, 0.6, 0.4, 1)` 0.25s — keep motion consistent with the extracted easing signature
- Use `{typography.mono}` for all technical metadata: weight codes, glyph counts, release years
- Pair {colors.surface-dark} inverted sections with {colors.on-dark} text for high-impact promotional callouts

### Don't
- Don't introduce mid-range weights (500, 600, 700) — Monument Grotesk stays at 400 throughout; hierarchy is size-only
- Don't use drop shadows — the system is entirely flat; depth comes from background contrast and motion
- Don't dilute {colors.primary} yellow with opacity — it only works as a full-saturation stamp
- Don't break the 11px spacing unit with ad hoc values; if 11px rhythm feels wrong, go to the next multiple
- Don't introduce new accent colours — the three-colour system (black / white / yellow) with the occasional phosphor green signal is the full palette
- Don't use serif or script typefaces except when displaying ABC Daily Scotch or another foundry specimen — the UI is grotesque-only
- Don't centre-align body text; the editorial grid is always left-aligned, often full-width ragged right
- Don't scale buttons smaller than `{typography.button-ui}` 17px — the pill form needs minimum mass to read correctly

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <360px | Single column; display-hero drops to ~44px |
| Mobile | 360–767px | Single column; nav collapses to hamburger; specimen grid 1-up |
| Tablet | 768–1023px | 2-column grid; sidebar navigation revealed |
| Desktop | 1024–1439px | Multi-column specimen grid; full horizontal nav |
| Large Desktop | ≥1440px | Max-width container centred; generous side margins |

### Touch Targets
- Navigation links are 44px minimum hit-area even at 11px visual size — padding extends the target zone
- Pill buttons are naturally touch-friendly at their default height (~46px with padding)
- Font tiles scale to full-width on mobile, maintaining tap area

### Collapsing Strategy
- Navigation collapses from full horizontal to hamburger overlay at 767px
- Specimen grid collapses from 3–4 columns to 2 columns at tablet, 1 column at mobile
- The marquee strip stays full-width and full-height at all breakpoints — it is a brand constant
- Display text scales down proportionally; body and caption stay fixed

### Image Behavior
- Specimen images are object-fit contain within their tile containers, never cropped
- Sticker / decorative overlays hide on mobile to reduce visual noise
- Hero image grid collapses from masonry to single-column at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent (yellow): `{colors.primary}`
- On-accent: `{colors.on-primary}`
- Hover/focus signal (green): `{colors.accent-green}`
- Muted text: `{colors.ink-muted}`
- Border: `{colors.border}`
- Dark section: `{colors.surface-dark}` / `{colors.on-dark}`

### Example Component Prompts

- "Build a type specimen hero section using `{colors.background}` white canvas. Render the font name at `{typography.display-hero}` in the actual typeface being shown. Below it, show the family name at `{typography.heading-section}` and a one-line description at `{typography.body}`. Add a `{components.button-primary}` CTA — pill shape, `{colors.primary}` fill, `{colors.on-primary}` text — reading 'Explore Free Trial'. On hover, button inverts to `{colors.ink}` fill with `{colors.background}` text."

- "Create a font-tile card component using `{components.font-tile}` token as the base. Rounded-lg (`{rounded.lg}`) container at `{colors.surface}` off-white. Inside, render a large specimen at ~128px in the brand typeface. Below the specimen add the font name at `{typography.heading-sub}` and the family details at `{typography.mono}`. On hover, apply a subtle `transform: translateY(-3px)` transition at `cubic-bezier(0.1, 0.6, 0.4, 1) 0.25s`."

- "Build a sticky navigation bar: `{colors.background}` white, `{typography.nav-link}` 11px text, `{colors.ink}` black text, 11px vertical padding (`{spacing.sm}`). Logo on the far left. Navigation links centred or right-aligned with `{spacing.md}` gaps. No border or shadow. On scroll, add no visual change — the nav remains flat and identical."

- "Create a full-bleed marquee strip using `{components.marquee-strip}` tokens: `{colors.primary}` yellow background, `{colors.on-primary}` black text at `{typography.display-hero}` size and uppercase. Animate the inner content with a `linear 4.4s infinite` marquee. The strip should run from edge to edge with no horizontal margin. Place it between sections as a brand divider."

- "Design a newsletter subscription block: centre-aligned, `{colors.background}` white, heading at `{typography.display}` reading 'Stay in the loop', subtext at `{typography.body}`. Below, an email `{components.input}` at full width with `{rounded.sm}` corners, then a `{components.button-primary}` pill button. On input focus, border shifts to `{colors.accent-green}` at 0.25s transition."

- "Build a product badge using `{components.badge}` token: `{colors.primary}` yellow background, `{colors.on-primary}` black text at `{typography.caption}`, full `{rounded.pill}` shape, 3px 8px padding. Apply it to the top-left of font-tile cards to mark 'New', 'Trial', or 'Variable' status."

### Iteration Guide

1. Start with a `{colors.background}` white canvas and set all type in Monument Grotesk at weight 400 — introduce no other weight
2. Use {colors.primary} yellow for exactly one CTA on the page; everything else stays black or white
3. Scale type using the full range: push display text large (86px+) and set metadata small (11px mono) — the range is the message
4. Apply `{rounded.lg}` / `{rounded.pill}` generously on containers and buttons; avoid sharp corners except in nav and marquee strips
5. Add hover motion last: `transform translateY(-2px)` on tiles, colour-swap on buttons, green border-flash on inputs
6. Spacing base is 11px — every gap should be 11, 22, 33, 66, or 132px; eliminate any ad hoc values
7. If a section needs emphasis, invert it: `{colors.surface-dark}` background with `{colors.on-dark}` text, no additional chrome needed

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dinamo. Brand names and trademarks belong to their respective owners.