Case 00 · the framework, turned on ourselves
Brentwell Digital, Design System 1.0.
Before we sold a design system we built our own, by the same method, and measured it against the same 18 parameters we measure clients against.
Context
A disciplined homage.
The reference system is Brickell Digital's: a work-forward professional-services site with an accent spent in three places, figure/ground inversion as the section hierarchy, five-item navigation and a published flat-price sprint. We read that system and its 22 client sites parameter by parameter (414 readings, re-verified 1 September 2026).
The plan was to keep the discipline, repair the documented failures, and break in exactly two places. The failures were specific: three parallel button classes, six radii with no token, five font families loaded and never rendered, 69 of 70 images on the work page with empty alt text, zero reduced-motion queries against a heavy motion stack, and one impact snapshot rendered on all 22 case studies.
The three inputs, resolved
Positioning, convention, and the break.
1
Positioning
The competence + sophistication studio in web design for VC-backed startups. Competence is carried by restraint and specificity: legible work, named clients, real numbers. Sophistication is carried by the monochrome discipline and the type system, never by decoration.
Because
Hue shifts personality impressions; black maps to sophistication and red to excitement (Labrecque & Milne 2012, Grade B). So the ground is monochrome and the red is rationed.
2
Category convention
Professional services, design studio. The site is the portfolio proof: credential-led, work-forward, restrained palette, editorial pacing, five-item navigation, a published engagement model.
Because
Broad-and-shallow navigation beats narrow-and-deep (Landauer & Nachbar, Grade A); five items is the modal count across the 23 reference sites.
3
Distinctiveness
The interlocked B·D monogram is the one ownable asset. Red is shared with the category, so it never attributes alone; it appears in the mark's company, in three places only.
Because
Logos out-attribute colour and type (Fiocchi & Seyed Esfahani 2024, Grade B). An unfamiliar brand banks attribution in the mark, not the palette.
Decisions, with their because
Kept, fixed, broken.
| Decision | Because | Stance |
|---|---|---|
| Radius 0, 45° chamfer | The mark is built from 45° cuts; a brand that rounds what its logo cuts looks unsure of itself. Angular reads durable and precise (Jiang 2016, Grade B). | Break |
| No Inter | Inter Display ships on 10 of the 23 reference sites. Archivo's engineered grotesque matches the mark's construction; Source Sans 3 carries no portfolio associations; Plex Mono is the spec-sheet voice. | Break |
| Red in three places | Logo mark, primary CTA hover, active-nav marker. Everything else is ink, ground, panel and inversion. On dark grounds red retires and the mark turns cream. | Kept, tightened |
| One button system | Primary ink, secondary outline, tertiary underline, 48 px targets. The reference ran three parallel classes. | Fixed |
| Inversion as hierarchy | Light and dark sections alternate; hierarchy never comes from accent colour, so a near-monochrome site reads as designed rather than unfinished. | Kept |
| Metrics bound per project | The case-study template has no global snapshot field. A number without its project does not ship. | Fixed |
| Five files, subset, self-hosted | A family that renders on no page ships on no page. The reference loads SF Pro ×9, Pragmatica and Approach Mono unused. | Fixed |
| Complete reduced-motion path | One signature motion (the nav marker slide, 200 ms); every transition collapses to 0.01 ms under prefers-reduced-motion. SC 2.3.3, Grade N. | Fixed |
Starting point
No system of our own, a reference system read in detail, and a mark already drawn from 45° cuts. The first decision was to measure before designing: 23 sites, 18 parameters each, before a single token was set.
Outcome
One token file, one button system, one radius token, three faces, eleven pages, and this case study. Every value in the system carries a source and a grade, and the two breaks (shape, typography) are recorded as breaks.
Stack
Static HTML generated from a small Python build; CSS custom properties from the token file, imported unchanged; no framework, no runtime library; fonts subset with fontTools to woff2; forms validate on blur in twelve lines of script. The production stack (Next.js on the studio's Payload CMS) transcribes this anatomy without changing it.
The system, live
Real components, not screenshots.
Buttons · the one system
Primary: ink fill, cream label, hover fills red (spend 2 of 3). Secondary: 1.5 px inset ring. Tertiary: underline, 6 px offset. Targets 48 px.
Shape · chamfer 8 · 12 · 4
Field · error state, shown
Enter a valid email address.
Type · ratio 1.250 · nine steps + statement
Colour · the complete list
Metrics · this project only
Measured on this build, 7 September 2026.
| Measure | Value | Budget or rule |
|---|---|---|
| Latin font payload | 52 KB across five woff2 files (Archivo 500/600, Source Sans 3 400/500, IBM Plex Mono 500) | ≤ 160 KB, zero unused families |
| Red spends on the page | 3 (mark, primary hover, nav marker) | Exactly 3 |
| Radius tokens | 1 (0 px) · chamfers 8 / 12 / 4 | One radius token |
| Ink on ground | 17.6:1 | ≥ 4.5:1 text |
| Cream on dark | 16.5:1 | ≥ 4.5:1 text |
| Muted on ground | 6.54:1 | The lightest text allowed on light |
| Border-strong on ground | 3.42:1 | ≥ 3:1 non-text |
| Reduced-motion coverage | Every animation and transition collapses to 0.01 ms | Complete, SC 2.3.3 |
| LCP · INP · CLS at p75 | Not yet measured; field data begins at launch | ≤ 2.0 s · ≤ 200 ms · ≤ 0.05 |
Core Web Vitals are recorded here after 28 days of field data, not before. A budget is not a result.
Credits