Contabo cutover
Three of four apps moved. The dashboard still deploys the previous image.
[3/4] 2026-08-12
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/.
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#9FC59ADash, 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#3D6B38Dash, 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
Four cells, three filled, the fourth dashed. Cells 20, gap 6, radius 3. The dashed cell is inset 1.25 with a 2.5 stroke; a 4‑on 3‑off dash divides its 70‑unit perimeter exactly ten times so the pattern closes with no seam, and offset 2 puts a gap on each corner. Below 40px it is always this, with no cursor.
eric is building
eric is building
16 and 32 are drawn on the pixel grid, not scaled, and the SVG favicon reads the OS theme itself. The lockup is Plex Mono 600 at −0.02em with the four cells as a bar after the words; it is text plus CSS, never an image.
Dash
The fourth cell is a character. It is drawn with dashes and it can’t wait, which is the name. A block cursor lives inside the dashed cell and is the only place expression comes from: where it sits, what shape it takes, whether it blinks. Five things move and only five: cursor position, cursor shape, fill of the fourth cell, dash offset, and whether a laid block has slipped.
Never a face. Never speaks, never in copy, name never in interface text. Below 40px it is just the mark. Only one Dash on screen.
dark
light
- Blink 1.06s,
steps(1): a terminal’s 530ms, not an eyelid. - Typing moves only when the number moves, 240ms per change; the cursor rides the edge of the fill.
- Shipped fills, holds 600ms, and the cell is empty again. There is always a next block.
- Loading marches the dashes, one period per 0.6s. Never decorative.
- Broke slips once, 180ms with a small overshoot, and stays slipped.
- Reduced motion shows the 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.
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 buildingonly inside the lockup. - Never “EiB” in public. Never “Eric Is Building” with a capital I.
- Domain
ericisbuilding.com. OrgEric-Is-Building. Images underghcr.io/eric-is-building/. ericiscoding.xyzis 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
- /brand/mark.svg
- /brand/dash.svg
- /brand/favicon.svg
- /brand/favicon-32.svg
- /brand/icon.svg
- /brand/icon-dark.svg
- /brand/icon-mono.svg
- /brand/og-default.png · the default social card
social kit (avatar, banner, OG template) and the PNG builds are in the repo under brand/03-progress/v2/.