Creative North Star: “Notes from Production”
The site is a senior engineer’s terminal logbook. The chrome is a live terminal session — the logo is the ~/ prompt, every section is a / path label, tags wear [#brackets], list bullets are [+], links read [ github ], and the metrics render as honest ASCII bar charts (██████░░ 500K+). Under that machine voice sits a quiet reading journal: Piazzolla serif headlines, a real prose measure, italic standfirsts. Mono operates and draws; serif narrates. The two voices never swap jobs.
The hero stage is an ASCII skyline of Dubai — and it is not a picture. Press p and you defend prod from bugs dropping onto it; press : and it becomes a vim playground with counts, motions, and a working :colorscheme. The keyboard is a first-class citizen everywhere: t/⇧T flips through eighteen full editor themes with a toast announcement, j/k scroll at browser-arrow distance (with vim counts: 5j), and a floating keys panel teaches the vocabulary on every essay. ASCII is the site’s imagery — art, charts, game sprites — and it is always load-bearing, never decoration.
Color is one ink. Vermilion marks everything that acts: the cursor block after the hero headline, CTA fills, hover states, [+] markers, ## prose markers, selection, scroll progress. Structure is drawn with 1px hairlines on warm paper; surfaces step from paper to raised and nothing floats. The whole site is a token machine: eighteen themes (paper, tokyo, gruvbox, nord, catppuccin, latte, rosepine, kanagawa, everforest, dracula, onedark, ayu, vesper, flexoki, flexoki-light, solarized, solarized-light, desert) re-ink the same ten tokens by the same names, so the world survives any palette without changing its bones.
Key Characteristics:
~/, / labels, [#tags], [+], ▶, [ links ], ASCII charts) over a Piazzolla serif reading voicehtml[data-theme] re-inks the same 10 tokens; .dark rides along for Tailwind variants; toast confirms every flipt/⇧T themes, j/k scroll with counts, p and : launch games, :q quitspaper is light; the other eight carry their own groundsmt-[54px]), sticky 52px topbar with a 3px backdrop blurWarm stock and warm ink with one loud lead: ten tokens define everything, and every theme re-maps the same ten.
~/ prompt’s “mohd”, submit-button fill, ASCII player sprite. Its dark twin under .dark (#f0e8d8) becomes the text — the duality is the engine’s, not the designer’s.▶ play buttons, [+] and ## prose markers, ASCII bugs and thumbnails, text selection, both progress bars (2px reading, 3px Turbolinks), game borders. Dark twin: #ff6b47./ section labels, dates, read times, [#tags], bylines, chart shading (░), captions. Dark twin: #a2977f.The One Ink Rule. Vermilion is the only accent. It marks action, state, and machine punctuation — never a large field except the CTA fill and the hero cursor block. If a second hue appears in markup, the design has failed.
The Token Contract Rule. Every theme re-inks exactly the same ten tokens by the same names. A theme may not introduce an eleventh color; html[data-theme] always outranks .dark in the cascade; light themes (paper, latte, flexoki-light, solarized-light) drop the .dark class. This is what lets one stylesheet serve eighteen palettes.
The Warm Stock Rule. In the house palettes (paper and its night twin) there is no pure white, pure black, or pure gray — every neutral is tinted from the stock. Editor themes carry their own palettes and are exempt.
Display/Body Font: Piazzolla (weights 400/500/600/700 + 400 italic) — with “IBM Plex Mixed” as Arabic-covering fallback: a unicode-range composite serving IBM Plex Serif (Latin, local) and IBM Plex Sans Arabic (Arabic, woff2) under one family name.
Machine Font: The system monospace stack (ui-monospace, SFMono-Regular, Menlo, …) via Tailwind’s font-mono — never webfont-loaded; it must feel like the terminal you already own.
Retired: Archivo is still declared in the @theme sans stack but renders nowhere; don’t assign it new work.
Character: One serif carries everything a human reads — hero headline, essay titles, prose, the italic standfirst — while every byte the machine touches (nav, labels, charts, games, art, toasts) is monospace. The pairing says: a person wrote this, a terminal is showing it.
#ruby, text-2xl, tracking-tight) and the keys panel’s KEYS header (11px, uppercase, vermilion-ink). Mono block headings are rare and administrative./ section labels, dates, read times, [#tags], nav, buttons, form labels (600 + vermilion asterisk), pagination, toasts, ASCII data rows (13px, 1.8 leading). Tabular numerals (.nums) on dates and counts.The Two Voices Rule. Monospace operates and draws; Piazzolla narrates. No heading or prose in mono — with one sanctioned exception: the categories index sets its row titles in mono because a directory listing is machine output, not an essay. No UI chrome ever appears in serif.
The Signage Rule. All metadata wears Label voice: mono, uppercase, tracked, ink-soft. If it’s a date, a read time, or a category, it’s signage — sentence-case metadata does not exist.
The No Kicker Rule. A / label is a section heading, not an eyebrow above a bigger heading. Never stack a small-caps line on top of a display headline.
One centered column, max-w-[880px], gutters at 1.25rem (px-5). The article column narrows to 764px; the contact form to 46rem. Homepage sections stack at mt-[54px] under a hero that is: the ~/mohd.dev · notes from production label, the ASCII skyline stage (font-size min(19.3px, calc((100vw − 40px) / 43.5)) so 43.5 columns never wrap), game-launch buttons overlaid top-left, then the thesis headline with its blinking cursor, standfirst, and the ▶ read the latest / browse the archive CTA row.
The homepage reads like a session transcript: / latest (featured essay, 1.25fr/1fr grid with thumbnail right), / also worth reading (three-up cards), / receipts (ASCII bar chart of real metrics), / output (ASCII histogram of posts per year, Liquid-computed), / about (role block with 2px vermilion left border, [+] bullets, mono-labeled dl skills grid), / say hi ([ github ]-style links).
The blog index is a featured row plus [90px date | title | 144px thumb] grid rows, each ruled below with a hairline; pagination is a plain ← prev · page n of m · next → mono row. Posts open with ← cd ../blog, a hairline-ruled meta row (author ↗ · date · read time), an italic 22px standfirst, the bordered thumbnail figure, the prose column, then an ← older / newer → grid above the footer. The categories page is a mono tag cloud with counts, then per-category mono sections. The sticky topbar is 52px, paper at 92% with a 3px backdrop blur, hairline below — content dissolves under it.
Mobile: nav links beyond blog hide below sm (no hamburger); featured grids stack with the thumbnail first; game HUD grows touch buttons (hidden on pointer-fine); the keys panel only exists at lg+ on pointer-fine devices.
The system is flat. Depth is carried by 1px hairlines, the paper→raised background step, and the topbar’s blur-and-dissolve. Exactly one shadow exists: the keys panel’s hard stamp — 4px 4px 0 0 ink at 12% via color-mix — a pressed-paper mark that says “this panel sits on top of your reading.” Nothing else casts anything; no blurs, no halos, no lift-on-hover. Two progress bars (2px reading progress, 3px Turbolinks) add the only moving ink.
4px 4px 0 0 color-mix(in srgb, var(--color-ink) 12%, transparent)): The floating keys panel only.The Flat Screen Rule. Surfaces do not float. If a component seems to need a shadow, it needs a border or a background step instead. The keys-panel stamp is the sanctioned exception because the panel genuinely overlays content.
Radius is 0 everywhere — buttons, inputs, thumbnail boxes, the toast, the email slip, banner. Structure is drawn with hairlines: 1px for almost everything; 2px for the role block’s left border and the reading progress bar; 3px for the Turbolinks bar. The scrollbar thumb’s 5px radius and focus outline’s 1px are browser chrome, not design. Form is otherwise rectilinear and text-born: the only “shapes” on the site are ASCII — the skyline, sprite glyphs, chart blocks — and the drawn SVGs (signature, success check) use square caps and 2px strokes.
The Square Rule. Corners are square (0 radius) on every element. No sanctioned escape hatch exists; treat any forced radius (native controls) as chrome, ≤2px.
Components are terminal furniture: mono labels, hairline boxes, color-only state changes (150–200ms), and glyphs doing the work icons usually do.
~/ mohd — the ~/ in vermilion, name in bold mono 16px. Nav is mono 13px lowercase with 18px gaps.turbolinks:load with trailing-slash normalization). No underlines — color is the state.[T] paper — bordered mono 12px, current theme name live inside; hover hardens the border to vermilion. Click cycles forward.about/contact hide below sm; the bar wraps nothing, no hamburger.▶ read the latest): Solid vermilion fill, paper text, mono 13px, px-3.5 py-1.5, 1px vermilion border. Hover: opacity 0.9 — the one opacity move in the system.browse the archive, game controls): Transparent, 1px rule-strong border, ink text. Hover: border and text shift to vermilion/vermilion-ink.→ Send Message): Solid ink fill, paper text, mono 12px 600 uppercase tracked 0.2em, px-6 py-3. Hover: fill shifts to vermilion-ink (dark: vermilion). Focus-visible everywhere: 2px vermilion-ink outline, 2px offset.[#category] in mono 11px ink-soft, no border, no fill — brackets are the chip. ★ featured renders the same size in vermilion./ latest pattern — vermilion slash, ink-soft text, mono 11px uppercase 0.14em, usually riding a 1px rule.overflow-hidden. Featured 220px tall; homepage cards 108px; archive rows 144×92px.object-cover) when one exists; otherwise an ASCII art block from _data/ascii.yml (8 works) in vermilion mono at 8–12px.brightness(0.75) contrast(1.2) (.dark-images).px-4 py-3, placeholder at ink-soft/70. Labels: mono 11px 600 uppercase 0.2em with a vermilion asterisk for required.[hidden] beats Tailwind’s flex via a guarded !important.Two playable pieces launched from the skyline stage: defend prod (p) — bugs fall, you move and fire; vim motions (:) — a cursor workout with counts, f/t finds, %, and a live statusline. Both render entirely as token-colored mono glyphs inside the .art stage: ink for the player and structure, vermilion for bugs, targets, cursor, and fire, rule/ink-soft for terrain and shadows. The HUD reuses ghost buttons; instructions set in Label voice; esc/:q quits, R restarts, touch gets ↑/↓/FIRE buttons (pointer-coarse only). :colorscheme <name> inside the vim game drives the real theme engine.
lg+ pointer-fine only; raised box, 1px rule border, kb-stamp shadow; KEYS header in vermilion-ink, rows of bordered key caps (t, ⇧T, j / k, 5j) with plain-language partners. Slides in after 5s (700ms), click to dismiss.theme: <name>; 180ms fade in, 1.3s hold. The system’s only notification surface.Essay footer: two-column grid over a 1px rule — ← older / newer → as mono 11px labels above serif titles; hover moves title text to vermilion-ink. Archive pagination is a bare mono row with disabled neighbors left as plain text.
The one fixed dark island: prose pre-blocks render on warm near-black (#241e17) with cream text (#e8ddc8) in every theme — dark themes drop the block to black at 45%. Syntax from lolight’s palette (terminal blue, deep blues, orange regex, red bold keywords, gray punctuation, italic comments). Inline code loses its backtick decoration.
~/ for identity, / for sections, [#tag], [+], ▶, [ link ], ←/→, ↗..dark riding for all non-paper themes.turbolinks:load; keep transitions to color/border/opacity at 150–200ms.font-sans) new work — it is declared but retired; mono is the machine voice.