Skip to content

Design Direction Statement

Local AI agent-wiki — human-facing landing page. Companion to docs/design-references.md; this is the one-page brief PHASE 2 implements. Everything here is PROPOSED (our decision), built on the measured findings in that document.

The mood

An instrument panel for a research library. The page should feel like a piece of well-made measurement equipment that happens to be a website: precise, quiet, slightly retro-digital, and completely unbothered about impressing you. It should read as built, not designed — the way a Teenage Engineering device looks machined rather than styled.

The one moment of warmth is the dot grid itself: a texture that says this is a machine talking in discrete units, which is also literally what an agent-facing wiki is.

In one sentence: a flip-dot display in a Swedish lab notebook.

What we are translating from the references is not their look but their restraint. nothing.tech derives its cohesion from a near-monochrome ramp, one dot motif used three ways, and images that always outrank the words. Teenage Engineering derives its cohesion from a single hairline weight, lowercase-everything, dead-flat surfaces, and colour rationed to a fixed code. Both are strong because of what they refuse. So is ours.

The stack

  • Display: Doto, variable, ROND 100, weights 400–700. OFL-1.1, self-hosted, latin + latin-ext. The only free dot-matrix face with both a full 100–900 weight axis and a roundness axis — which is what lets it read as an LED readout rather than an arcade game. Used for the wordmark, hero, section heads, CTA. Never below 24px.
  • UI + body: Inter, variable 100–900. OFL-1.1, self-hosted. Chosen over Geist for its opsz optical-size axis and larger default x-height — our pages are dense human prose. (If PHASE 2 wants a matched sans+mono pair, swap to Geist + Geist Mono; it is a one-line change and the reference site itself uses Geist.)
  • Mono: Geist Mono or ui-monospace. Quiet, for paths and byte counts only.
  • Three families. No more.

The palette

Grounds alternate, never gradient:

#FFFFFF   default ground
#F4F4F4   alternate section ground, card wash, the dot-grid field
#040404   dark blocks — NOT pure black; this is measurably Nothing's own black
#181818   dark raised surface

Ink:

#040404   headings / primary
#595A5A   secondary
#9B9D9D   muted metadata only — not for body text (contrast ~2.8:1)
#FFFFFF   text on dark
#D8D9D9   secondary text on dark

Rules: #D8D9D9 hairlines, 1px — the only line weight in normal use.

Accent — exactly one:

#002F6C   links, interactive states, the single CTA block

That is Nothing's measured --accent-blue: a deep navy that reads as ink rather than as a hyperlink. #C8102E red and #FFC700 yellow are reserved for genuine alerts only. Teenage Engineering's five-colour hardware code is rejected: it works because it maps to physical product categories on a hardware site, and we have neither.

The scale

Doto, ROND 100: hero clamp(2.75rem, 7vw, 5.5rem)/1.05 @700 · section head clamp(1.75rem, 3.5vw, 2.75rem)/1.1 @700 · subhead 1.375rem/1.2 · CTA 1.5rem/1.1 @700 · eyebrow 0.8125rem uppercase letter-spacing .08em.

Inter: lead 1.25rem/1.55 · body 1rem/1.65 @400 · small/meta 0.875rem/1.5 with tabular-nums · nav 0.9375rem lowercase · footer 0.875rem in --ink-3.

Doto is the only heavy element on the page. Inter never goes above 500 for UI.

The rules

We will

  • Use one dot family, one sans, one mono. Three total.
  • Alternate three grounds and let the colour change be the section separator. No rules between sections, no bordered cards.
  • Stay achromatic except one accent, used for links and the one CTA block.
  • Set UI text lowercase; uppercase only for short eyebrows at 0.08em.
  • Keep the image (or dot grid) larger than the words. Type captions, never type posters.
  • Self-host and subset fonts to latin + latin-ext, font-display: swap.
  • Hold a generous uniform vertical rhythm; full-bleed blocks, no gutters between them.
  • Alternate light/dark grounds so the page has a gear-change, not a monotone scroll.

We will not

  • No gradients. Ever. Both references are dead flat.
  • No box-shadows, no glassmorphism, no blur, no parallax.
  • No border-radius above 2px.
  • No second accent, and no accent as a border, hover tint, or text colour on light ground.
  • No dot-matrix type below 24px, never for body or nav.
  • No emoji as iconography. If icons are needed: simple 1.5px-stroke line icons, drawn or sourced — the way Teenage Engineering pairs pictographic icons with lowercase labels.
  • No carousels, autoplay, scroll-jacking.
  • No pure #000000.
  • No card grid as the primary structure. The page is an editorial stack; the only grid is the six-category block.

How the sections should feel

  • Nav — almost invisible. White, hairline underline, lowercase items, a Doto wordmark as the only decorative element above the fold. Like a label silkscreened on a panel.
  • Hero — the one loud moment. A dot-grid field on #F4F4F4, one large Doto line, one Inter subhead. Like a machine booting and printing its own name. Nothing competes.
  • Stat strip — quiet and factual, tabular-nums. Like a spec-sheet row.
  • "What this is" — on #040404, dot grid inverts to dark, type drops to white. The page's first gear-change, and it should feel deliberate.
  • Category grid — back to light, three columns, borderless, image-free or with a small dot-grid glyph per category. Reads like an index, not a shop.
  • Agent layer — dark again. Three rows with monospace paths (llms.txt, llms-full.txt, /raw/<slug>.md) and one Inter line each. This is the section that makes the project distinct; it should feel like a technical appendix — precise, unglamorous, confident.
  • Latest entries — light, single column, hairline-separated rows. Reads like a log.
  • CTA — the only saturated field on the page: #002F6C edge to edge, Doto headline in white, one button. Because it is unique it will not need to shout to be found.
  • Footer — quiet, three link columns, legal row in --ink-3. Like the back of a manual.

Open question for Paulo

Should the hero carry a real photograph the way nothing.tech does, or should the dot grid alone be the visual? Recommendation: grid-only — cheaper, ages better, no asset pipeline, and the dot motif is stronger as texture than as photography. But nothing.tech's actual hero is photographic, so this is a deliberate divergence from the primary reference and the call is Paulo's. It does not block PHASE 2.