Accord Partners · DESIGN.md · machine-readable brand layer

Precision at speed.

Token reference and live sample implementations, generated from brand.accordpartners.ai v2.1. The website is the master; this is the machine projection coding agents inherit.

How to read this page. Everything below renders from the DESIGN.md tokens — no hardcoded hex. Colors, buttons, cards, nav, badges, inputs, and the two-face type scale are the exact values in Accord-DESIGN.md. Scroll to the bottom for the raw file, the exported Tailwind theme, and the lint report.

Colors

Primary
Primary
#1E40AF
Action
#2563EB
Gold — editorial only
#B8860B
Ink
#111827
Surfaces & status
Sage
#F0F4F3
Border
#E5E7EB
Muted
#6B7280
Success
Warning
Error

Narrow by design. Gold is editorial-only (milestone/premium tags) — never a UI default.

Typography

Two-face pairing. Newsreader (serif) = display headings only. Inter = everything else + both wordmarks (locked). Serif sets the tone; sans does the work.

H1 · Newsreader 600 · display
H2 · Newsreader 600 · display
H3 · Inter 600 · The quick brown fox jumps over the lazy dog
H4 · Inter 600 · The quick brown fox jumps over the lazy dog
H5 · Inter 600 · The quick brown fox jumps over the lazy dog
Body L · Inter 400 · Accord Partners delivers precision at speed. Long-form body runs here.
Body M · Inter 400 · The default body size for product UI and most documents.
Body S · Inter 400 · Secondary descriptions, tooltips, helper text.
Caption · Inter 400 · Accord Partners. v2.1 Jun 2026.

Sample implementations

Live components — what actually ships when an agent builds against these tokens.

Buttons
<button class="btn-primary">Primary</button>

.btn-primary{
  background: var(--color-action);   /* #2563EB */
  color: var(--color-on-action);     /* #fff   */
  border-radius: var(--radius-sm);   /* 6px    */
  padding: 10px 20px;
}
.btn-primary:hover{
  background: var(--color-action-hover); /* #1E40AF */
}
Metric cards
Q1 Revenue
$4.2M
▲ 18% QoQ
Acquisitions
3
closed in 2026
.card{
  background: var(--color-white);
  border: 1px solid var(--color-border); /* #E5E7EB */
  border-radius: var(--radius-md);        /* 8px */
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 16px;
}
.card .value{                 /* the metric number */
  font-family: var(--font-display); /* Newsreader */
  font-size: 32px; font-weight: 600;
  color: var(--color-primary);
}
Navigation
nav{ background: var(--color-primary); } /* navy */
nav a{ color:#fff; opacity:.85;
  border-radius: var(--radius-sm); padding:8px 14px; }
nav a.active{
  background: var(--color-action);  /* #2563EB */
  opacity: 1;
}
Status badges
Approved Pending Action needed AI-generated Info 
.badge{
  border-radius: 9999px;   /* full pill */
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
}
/* text at 100%, background at 15% opacity */
.badge.success{ color:#16A34A; background:rgba(22,163,74,.15); }
.badge.ai     { color:var(--color-gold); background:rgba(184,134,11,.15); }
Form input
input{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: var(--font-sans);
}
input:focus{ outline: 2px solid var(--color-action); }

The files

The reference artifacts. The DESIGN.md is authored by hand from v2.1; the Tailwind theme is generated by npx @google/design.md export.

Accord-DESIGN.md (source) theme.css (Tailwind v4 @theme export) tokens.json (W3C DTCG export)

Lint report

✓ 0 errors · 5 warnings · 1 info
Warnings are all "color defined but never referenced by a component" (gold, border, muted, success, warning) — expected: these live in prose/status rules, not the base button/card set. No broken token references. No WCAG contrast failures — navy/white ≈ 15:1, action-blue/white ≈ 4.6:1, both pass AA.