---
version: alpha
name: Abcdinamo
description: Light design system extracted from abcdinamo.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  surface: "#D9D9D9"
  on-surface: "#000000"
  typfacepanelbackground: "#242423"
  color-5: "#FFEA00"
  color-6: "#03C502"
  color-7: "#030303"
  color-8: "#D497FE"
  color-9: "#3E260F"
  color-10: "#121212"
  color-11: "#FF0000"
  dinamoupdateinputbackground: "#1CDC04"
  color-13: "#5E5E5E"
  typefacebuttoncolor: "#E6E9EB"
  primary: "#000000"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Monument Grotesk
    fontSize: 73.77px
    fontWeight: 400
    lineHeight: 0.9
  headline-md:
    fontFamily: Monument Grotesk
    fontSize: 30.06px
    fontWeight: 400
    lineHeight: 1.1
  title-md:
    fontFamily: Monument Grotesk
    fontSize: 19.13px
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontFamily: Monument Grotesk Mono
    fontSize: 15.03px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.02em
  body-sm:
    fontFamily: Monument Grotesk Mono
    fontSize: 11.95px
    fontWeight: 400
    lineHeight: 1.486
    letterSpacing: -0.02em
rounded:
  sm: 9px
  md: 110px
  full: 9999px
spacing:
  xxs: 2.5px
  xs: 3.5px
  sm: 5.5px
  md: 6px
  lg: 7px
  xl: 9.5px
  2xl: 13.5px
  3xl: 14.5px
  4xl: 18.5px
  5xl: 20.5px
  6xl: 24px
  7xl: 27.5px
  8xl: 29.5px
  9xl: 33px
  container: 941px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.background}"
    rounded: 0px
    padding: 0px
    height: 29px
  card:
    backgroundColor: "{colors.typfacepanelbackground}"
    rounded: 109.8px
    padding: 27.3px
  input:
    rounded: 10.2px
    padding: 0px
    height: 62.8px
---

# Abcdinamo

> Extracted from [https://abcdinamo.com/](https://abcdinamo.com/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Abcdinamo uses a light canvas (#FFFFFF) with a monochrome palette. Type is set in **Monument Grotesk**, **Mxi Rnd Rg A** (display), **Hny Rg A** (ui), **Monument Grotesk Mono** (mono), with 15px body text. Layout: 941px container, none-detected navigation, 8 sections. Built with an undetected stack.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 0 | bg | 25.6% | `--tagBackground` |
| `surface` | `#D9D9D9` | 0.885 0 0 | surface | 7.7% | — |
| `on-surface` | `#000000` | 0 0 0 | text | 4.0% | `--emFont` |
| `typfacepanelbackground` | `#242423` | 0.26 0.002 106.5 | other | 12.5% | `--typfacePanelBackground` |
| `color-5` | `#FFEA00` | 0.925 0.194 102.9 | other | 11.0% | — |
| `color-6` | `#03C502` | 0.714 0.242 142.5 | other | 9.2% | — |
| `color-7` | `#030303` | 0.097 0 0 | other | 9.1% | — |
| `color-8` | `#D497FE` | 0.773 0.155 310.4 | other | 6.7% | — |
| `color-9` | `#3E260F` | 0.293 0.051 62.3 | other | 6.0% | — |
| `color-10` | `#121212` | 0.182 0 0 | other | 5.7% | — |
| `color-11` | `#FF0000` | 0.628 0.258 29.2 | other | 1.2% | — |
| `dinamoupdateinputbackground` | `#1CDC04` | 0.777 0.261 142.1 | other | 0.54% | `--dinamoUpdateInputBackground` |
| `color-13` | `#5E5E5E` | 0.482 0 0 | other | 0.31% | — |
| `typefacebuttoncolor` | `#E6E9EB` | 0.932 0.004 236.5 | other | 0.25% | `--typefaceButtonColor` |

Contrast: text on background 21:1, accent 21:1.

Gradients in use: `conic-gradient(rgb(0, 0, 0) 55.1592deg, rgb(89, 89, 89) 55.1592deg)`.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Monument Grotesk** | body | 400 | 53.4% | webfont |
| **Mxi Rnd Rg A** (CSS: `mxi-rnd-rg-A`) | display | 400 | 8.4% | webfont |
| **Ora Vr Rg A** (CSS: `ora-vr-rg-A`) | other | 400 | 7.1% | webfont |
| **Mfa Rg A** (CSS: `mfa-rg-A`) | other | 400 | 6.4% | webfont |
| **Stfn Smpl A** (CSS: `stfn-smpl-A`) | other | 400 | 5.7% | webfont |
| **Cam Md A** (CSS: `cam-md-A`) | other | 400 | 5.4% | webfont |
| **Hny Rg A** (CSS: `hny-rg-A`) | ui | 400 | 4.7% | webfont |
| **Monument Grotesk Mono** | mono | 400 | 4.2% | webfont |
| **Pblsh Rndd Slb Md A** (CSS: `pblsh-rndd-slb-md-A`) | other | 400 | 4.1% | webfont |

Declared in `@font-face` but not used to paint text on this page: Dinamo Darkroom, Dinamo Loading, Bbblg Rg A, Bbblg Rg B, Cam Md B, Cow Rg A. Don't treat these as the page's fonts.

Scale (px): 12, 15, 19, 24.5, 30, 74. Effective ratio ≈ 1.49 (close to a perfect fifth). Body 15px at line-height 1.3; display 73.77px with tracking 0em. Headings are upper case. On a 390px viewport the body is 12px and display 44.17px.

## Layout

Spacing has no reliable single base unit; the most used steps are 2.5, 3.5, 5.5, 6, 7, 9.5, 13.5, 14.5, 18.5, 20.5, 24, 27.5, 29.5, 33px. Sections open with about 219px of space before their first line of text. Content sits in a 941px container on a 2-column grid. Text density 0.088 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **hero** (1076px, bg #FFFFFF)
2. **section** — “GREAT DESIGNERS USE FONT CUSTOMIZER” (1533px, bg #FFEA00)
3. **section** — “Dinamo Hardware” (2512px, bg #FFFFFF)
4. **section** — “Variable Fonts 4 Life” (1167px, bg #030303)
5. **section** — “MUSIC TO MY EARS” (1061px, bg #D497FE)
6. **testimonials** — “Express yourself” (3337px, bg #121212)
7. **section** — “Pricing for Culture & Non-Profits” (482px, bg #D9D9D9)
8. **newsletter** (629px, bg #FFFFFF)

## Shapes

Dominant corner radius is a full pill; radii in use: 9px, 110px, pill. Borders: hairline (1px).

## Components

- **button-primary**: backgroundColor `#000000`, textColor `#FFFFFF`, rounded `0px`, padding `0px 0px`, height `29px`, fontFamily `Monument Grotesk`, fontSize `9.15px`, fontWeight `400`
- **card**: rounded `109.8px`, padding `27.3px`, backgroundColor `#242423`
- **input**: rounded `10.2px`, height `62.8px`, padding `0px 0px`

## Do's and Don'ts

- Do keep the palette monochrome; there is no chromatic brand accent on the page.
- Do set body copy in Monument Grotesk at 15px / 1.3.
- Do use Mxi Rnd Rg A only for display sizes, not for body text.
- Don't introduce font weights beyond 400.
- Don't add drop shadows; depth comes from tone and borders.
- Do keep corners at pill for most controls, and use the larger radii only for cards and media.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.base`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.