eric is building

brand · living style guide

How this site looks, and how it talks

Every element on this page is the real component, rendered from the same source the rest of the site uses. If something drifts, it drifts here first. The record of how it was decided is in the repo under brand/: three rounds, the last of which is Pip.

Colour

Two warm grounds, not slate. One accent, and one warning colour reserved for incidents. Every text colour is checked against its ground at build time; the numbers below are computed, not typed.

dark · ground #151412

ground#151412page
surface#1E1C19cards, code
ink#EDE6DAtext14.84:1 ✓ (≥4.5)
ink-2#A89F91secondary text7.04:1 ✓ (≥4.5)
ink-3#7A7268labels, never body3.89:1 ✓ (≥3)
rule#2C2925hairlines
accent#9FC59APip, links, [3/4]9.58:1 ✓ (≥4.5)
warn#FF7B33incidents only7.13:1 ✓ (≥4.5)

light · ground #F6F1E8

ground#F6F1E8page
surface#FFFDF9cards, code
ink#1C1A17text15.43:1 ✓ (≥4.5)
ink-2#5C564Dsecondary text6.45:1 ✓ (≥4.5)
ink-3#857D72labels, never body3.61:1 ✓ (≥3)
rule#DDD5C8hairlines
accent#3D6B38Pip, links, [3/4]5.56:1 ✓ (≥4.5)
warn#B33A00incidents only5.30:1 ✓ (≥4.5)

tokens: src/styles/tokens.css · every value is a --eib-* custom property; the site never uses a raw hex.

Type

IBM Plex Mono for chrome, headings and anything that is a label or a number. IBM Plex Serif for body, because the site is mostly reading and a serif carries the warmth the terminal chrome doesn’t. Self‑hosted, latin subset, OFL 1.1.

plex mono 600 · headings, nav, labelsThree of four apps movedeyebrows are 0.72rem, tracked 0.14em, uppercase. Numbers and states are mono, always: [3/4], shipped, 2026‑08‑12.
plex serif 400 · body, 17px / 1.6, 64chManila on paper is 1.58:1. I had been grading it on dark for a month and never noticed. Two fixes, both verified rather than eyeballed.titles in lists are serif 600, because they are the start of a sentence, not a label.

The mark

Two opposite corners of a box‑drawing frame, holding one block. The corners are a 4.5 stroke with round caps on a radius‑6 bend; the block is 12 on 48 with a radius of 2. It says room held for the thing, and the thing is there. Below 40px the character is always this: no eye, because the eye needs pixels, and the favicon never has one at any size.

eric is building
96 · pip, theatre
48 · mark
22 · nav, stirs on hover
32 · own drawing
16 · own drawing
eric is building
96 · pip, theatre
48 · mark
22 · nav, stirs on hover
32 · own drawing
16 · own drawing

16 and 32 are drawn on the pixel grid, not scaled, and the SVG favicon reads the OS theme itself. The lockup is the mark beside Plex Mono 600 at −0.02em; it is an inline SVG plus text, never an image.

Pip

The frame holds the room, the blocks are the work laid on its floor, and the dot is one eye that watches the work. A pip is the dot on a die and the seed inside the fruit: the small thing the room is being held for, which is the name. Pip has a temperament, and it is not neutral: small, busy, easily delighted. The work comes first; feelings happen while building, never instead of it. Pip never performs at the viewer, except for a third of a second on hover, when the corners perk. Then back to work.

One eye, never two. No mouth, no limbs. Never speaks, never in copy, name never in interface text. Below 40px Pip is the mark. Only one Pip on screen.

dark

buildingfront page, post headers
typing“now” items, real %
shippedthe shipped list, resting proud
startinga project with nothing laid
readingthe end of a post
loadingwaiting on the network
awayoffline; front page on blur
broke404, incidents

light

buildingfront page, post headers
typing“now” items, real %
shippedthe shipped list, resting proud
startinga project with nothing laid
readingthe end of a post
loadingwaiting on the network
awayoffline; front page on blur
broke404, incidents

Five things move, and only five

  • Where the eye looks. A few pixels, toward whatever matters now.
  • The eye’s aperture. Open dot · wide dot · hollow ring · crescent · closed line. The blink lives here: every 4.4s, 120ms, and that alone makes it alive. The crescent is how a closed eye smiles.
  • The work. How many blocks are laid, 0–4, and the fill of the one in progress. typing moves only when the number moves.
  • The body. The corners gesture as rigid pieces and never bend. Amplitude scales with size: theatre at 96px breathes 0.8px and perks 2px on hover; a gesture at 44px breathes 0.4px and perks 1px; a stir at 22px only hops its block; the favicon is still.
  • Whether something gave way. broke plays once on arrival: the top corner shakes, a block slips, the lower corner sags, the eye darts. Then stillness.

Six feelings (curious, pleased, proud, worried, startled, sleepy) are specified in brand/round-three.html as adverbs on these states. Only shipped wears one so far: it rests proud. When the rest land, they land here first. Reduced motion shows every state’s static frame; a hidden tab pauses everything.

Components

The two that carry the site: the nav and a list item. Both are the real thing; hover the mark.

eric is building

Contabo cutover

Three of four apps moved. The dashboard still deploys the previous image.

[3/4] 2026-08-12
eric is building

Contabo cutover

Three of four apps moved. The dashboard still deploys the previous image.

[3/4] 2026-08-12

Voice

  • First person, singular. I built it. There is no we.
  • Numbers over adjectives. “1.58:1” beats “low contrast”.
  • Say what broke. The failure and the reason are the interesting part.
  • Explain the why behind every rule. A rule without a reason gets ignored, including by me.
  • Short sentences, plain words. If it needs a second read, split it.
  • Commit‑message honesty. What, why, what’s still open. No victory laps.
thisThe mark was failing in light mode: manila on paper is 1.58:1. I’d been grading it on dark for a month and never noticed.
not thisWe’ve refined our visual identity to ensure a seamless, accessible experience across every theme.

No AI tells

  • No gradient blobs, glows, or purple‑to‑blue anything.
  • No hero headline + subhead + two buttons. The front page opens on what is being built.
  • No isometric illustrations, no stock people, no abstract 3D shapes.
  • No “elevate”, “seamless”, “unlock”, “journey”, “delve”, “robust”, “empower”, “excited to share”.
  • No groups of three for rhythm. Three things only when there are three things.
  • No dashes used as a tic. No rhetorical question followed by its own answer. No sign‑off that summarises the post.
  • No emoji in copy. The mark carries the warmth; the words carry the facts.
Test: if the sentence could be on any developer’s site, it isn’t on this one.

Name

  • Eric is Building in prose, capitalised like a sentence. Lower‑case eric is building only inside the lockup.
  • Never “EiB” in public. Never “Eric Is Building” with a capital I.
  • Domain ericisbuilding.com. Org Eric-Is-Building. Images under ghcr.io/eric-is-building/.
  • ericiscoding.xyz is legacy and redirects here. It never appears in copy.
  • Lystz and Diabetes in Fiction keep their own identities; this site links out and does not restyle them.

Files

sources and the social kit are in the repo under brand/02-frame/v2/; Dash’s files stay under brand/03-progress/v2/ as the record of round two.