180 Degrees Consultingdelft–rotterdam · systems online
man 180dc-v4 — design specification

V4 — The Terminal

Thesis: the AI-native branch — dark-first, monospace accents, the quality pipeline rendered as a live-feeling system, subtle scan/cursor motion. This is the one variant that leads with the AI story (the shared content spec keeps that story toggleable in prominence; every other variant carries it as a section). One of ten competing design variants; content identical across all ten (see website/variants/content.md).

design.system

Specification

paletteBackground #0B0F0D · panels #101713/#131C17 · edges #23312A · text #D7E2DB / dim #8FA39A · phosphor 180-green #3DDC97 · amber #E8B93E (pending states only) · alert #E86A5E (window chrome only). All text AA on its background.
typeJetBrains Mono 400/700 (terminal, kickers, tables, buttons) + Inter 400/600 (prose). The mono carries identity; Inter keeps the client-facing copy calm and readable.
spacing1140px measure, 4.8rem section rhythm, 8px radii, hairline edges. A static 3px scanline texture at 1.4% opacity over everything — felt, not seen.
motionCursor blink, pulsing status dots, animated dataflow dashes in the pipeline diagram, one typed command on the homepage terminal (types once; the full text is static markup for no-JS), and a 12px rise on scroll. Everything behind prefers-reduced-motion and an html.js gate.
signatureThe hero terminal window whose session output IS the proof row (180dc status); the quality pipeline as a live system diagram with flowing edges; services as callable functions (svc.impact_measurement()); the team as a process table (ps aux | grep exec-board); placeholders as ⚠ PENDING_REAL_CONTENT warnings — the honesty rule expressed in the design's own language.
imageryNone. Zero raster assets; the terminal is the picture. First load is HTML+CSS+2 font families (~156 KB of woff2).
method & extension

How it was made & how to extend it

Build: hand-written static HTML/CSS, one stylesheet, no framework, no build step. The terminal sessions are ordinary markup styled as a window — they render complete without JavaScript; JS only adds the typing effect to the first command.

Mood calibration: engineering-tool aesthetics (terminal emulators, status dashboards, man pages) — but paced like a calm product site, not a hacker toy. The tension to manage when extending: every new section must pass "would a non-profit director find this legible?" before it ships.

To extend to the full site: new pages are new sessions — Our Work becomes 180dc log --engagements (one commit-style entry per case), Impact becomes a metrics dashboard (only with real numbers), Team gets photo cards styled as user profiles after the photo session. Reuse .term for any hero, .status for fact rows, .log for tabular data, .svc for card grids. The amber warning register is reserved for pending content — never decoration.

Deploy: zip-deploy to Netlify via API (see website/variants/tools/deploy.ps1).

git log --critique

Critique & revision log

commit 0 — initial construction. Built from the shared content spec. JS-gated motion and forward-slash zip deploys from the start (lessons from V1/V2 rounds).

Lighthouse — final build (local run, 2026-07-09). Home 100 / 100 / 100 / 100 (perf / accessibility / best-practices / SEO), 165 KB. For-clients 100 / 100 / 100 / 100, 159 KB. Guide 100 / 100 / 100 / 100, 160 KB.

commit 3 — Critic round 3 (final). Verdict: "top three on concept — the inspectable-pipeline idea and the honesty markers are the strongest thinking in the room." Remaining notes, all actioned: the findings-loop caption overflowed its pill and collided with connectors — the pill now holds only "FINDINGS LOOP — QUOTE OR ABSTAIN" with the full sentence living in the phosphor subhead below, geometry tightened; two-up card grids now collapse to one column under 640px (the inline column styles were overriding the breakpoint); the form eyebrow claimed five fields over a four-field form — on a verifiability thesis that's a brand wound, fixed and all numeric eyebrows audited; the traveling packets now ride only the short inter-node segments so motion never occludes words; home-page eyebrows translated to human-first ("The team — exec board 2026"); photo slots became initial-monograms with a "photo: pending" microlabel; dim-text contrast raised a step.

commit 2 — Critic round 2. Top notes: the pipeline diagram — "the memorability engine of the whole concept" — was four grey boxes with an unlabeled dashed rect that read as a bug; the hero terminal clipped mid-word on mobile with no affordance; the headline's green em swallowed 60% of the headline; three equal hero doors; services pasted verbatim on both pages; "first" read as a typo in a numeral row; IMG slots read as broken checkboxes and the PID column spent a column on a joke; 5,300px of identical near-black; "stdin" jargon at the conversion moment. Changed: pipeline rebuilt — tinted stages (amber review, phosphor client), micro-captions per node, the findings loop labeled with the quote-or-abstain rule, packets travelling the path (reduced-motion-gated), and a vertical step-list replacing it under 640px; separate mobile transcripts authored for every terminal (short key:value lines, nothing clips); headline green cut to the payload with text-wrap: balance and the hero set as copy-left/terminal-right at desktop; one primary door with a quiet mono line for students/firms; "1st"; portrait-ratio photo slots with a frame glyph, PID deleted, emails quieted; the recruiting band phosphor-tinted as the mid-page waypoint; scanlines now live only on terminal panels; the form kicker says "contact" and labels speak sentence-case. Services on for-clients kept content-identical to home by design (shared content rule) — the duplication note is honored by the other variants via compact index lists; here the cards carry the section structure, and a full build would differentiate with real case links.

commit 1 — Critic round 1. Top notes: every CTA was written in flag syntax, locking out the non-technical director ("the variant's best idea speaks fluently to the one audience that was never going to hire it"); the terminal's dot-leader alignment collapsed on mobile wrap; the amber PENDING banners out-shouted the green CTAs; the pipeline diagram — the thesis centerpiece — was a timid strip with its differentiator in a 10px caption; hero opener generic; seven sections one wallpaper; partners section flat; team-as-processes cold; form fields near-invisible with the "not wired" note placed before the fields; macOS traffic lights a rented cliché. Changed: all CTAs now say the plain thing in the mono face ("Start a scoping call") — flag syntax lives only inside the terminal windows; shell output never wraps (scrolls inside the window, smaller mobile type); placeholders demoted to dim unboxed warning lines; the pipeline got a panel of its own on a banded section with the quote-or-abstain rule promoted to a phosphor subhead; hero now opens "Pro bono consulting — with a quality system you can inspect" and the duplicated facts moved solely into the session output; sections alternate band tones; partners are two command-labeled cards with their own CTAs; the team table gained reserved photo-frame slots per row (no invented bios — honesty rules); form borders brightened and the disclaimer moved below the submit; window chrome replaced with a 180dc session tab. Not actioned: a "why I'm here" column per board member — that would be invented personal content.