Refined
Brutalism

The Dexter Jakes monogram — “DX” — set in False Regular. Two letters, no tagline, no explanation. The mark carries the same weight as the writing: dense, architectural, unapologetic.

Two authored modes. Light and dark are not audience-facing moods — they are editorial decisions. The mode toggle in the masthead above is the real, production mode toggle: a cookie-persisted user preference that controls every page on imjustdex.com. Flip it and watch the site respond. It is the same control served to every reader, not a preview.

Policy: no color may be introduced outside this palette. No opacity values may be created ad hoc — use only the defined alpha variants. Dark mode is a complete variable inversion, not a filter or overlay. Never mix light and dark elements on the same surface. If a new token is needed, it is added to tokens.css first — not in a component stylesheet.

Red marks editorial emphasis. Never decoration. It is the only color outside the monochrome palette, and its scarcity is what gives it power. Accent is for signal, not garnish. The moment red becomes frequent, it becomes invisible.

Hard limits. Maximum 1–2 accent moments per viewport on any surface. Maximum 4 per full article page across all scroll positions. Maximum 2 per carousel slide. If you are debating whether something needs red, it does not. Red is earned by function: section structure, scripture citation, callout emphasis, focus rings, and plate hover borders. Nothing else.

Background prohibition. Red is never used as a background fill on any surface — no red panels, no red cards, no red banners. The only exception is the on-accent logo colorway (white mark on red ground), which is a brand-mark context, not a layout context. If it fills more than a 3px line or a single text span, it has gone too far.

Stacking prohibition. No more than one red-led component may appear in the same module or viewport region unless the layout is intentionally designated as a high-emphasis moment (e.g., a section head directly above a scripture block). Two accent elements side by side is a signal. Three is noise.

Cross-surface rule. #c00 is the only red permitted on any DX surface — site, carousel, deck, print, merch, motion. Never warm it, never cool it, never lighten it, never use it at reduced opacity except where the system explicitly defines an alpha variant.

One structural red, both modes. --accent holds at #c00 in light and dark — same value, zero flip. WCAG non-text contrast (borders, fills, underlines, large display text) only requires 3:1, and #c00 on #060606 clears at 3.45:1. Every structural consumer of red — section rules, callout borders, scripture cites, plate hover borders, focus rings — stays on #c00 in both modes.

The small-text exception. AA normal text requires 4.5:1, which #c00 does not clear on #060606. A second token, --accent-text, handles this: #c00 in light, #ff4d4d in dark (7.54:1, AAA). Reserved for text-tier consumers only — inline link hover, uppercase micro-labels, sub-18px metadata, callout emphasis spans, scripture citation text. If the element is a line, fill, or border, it uses --accent. If it is readable type under 18px, it uses --accent-text.

12-column CSS grid. Rows must sum to 12. Adjacent plates must never share the same background treatment — textures and plain surfaces alternate so every card contrasts its neighbor.

Policy. Plates are the homepage architecture. They are not cards, not tiles, not thumbnails. Every plate is a self-contained unit with a title, metadata, and a texture or color fill. Plates never contain body text, images of people, or calls to action. Plate borders are 3px solid — never reduced. Hover state: border shifts to var(--accent) plus a subtle scale. On mobile plates stack single-column but retain full border, texture, and typography. A plate that loses its structure on any breakpoint is a broken plate.

Plate variants. .plate-lead is the issue-opener — split body over image, latest-badge, lead-rail. Documented in full in Section 17. .plate-wide spans the row at plate-med scale. .plate-secondary is the three-up row cell. .plate-banner is a wide image-forward card. .plate-row is a modifier that drops the cell into a row layout (title + deck + meta rail on one line) for archive-density moments — see the Reckonings card at the bottom of the homepage.

Semantic rule. Every plate is a single block-level anchor — the whole card is the link. There are no nested focusable elements, no absolutely-positioned overlay links, no <article> wrappers with a separate <a> inside. The card’s semantics, its focus ring, and its hover state all live on one element. Non-negotiable for accessibility and predictable tab order.

Image plates stay dark in both modes. The grayscale filter and black-to-transparent gradient on image plates hold identically in light and dark. There is no invert(1) flip and no mirrored gradient. One visual field, both modes. Image plates never lighten.

The writing voice is Poetic Brutalism + Dry Humor. Like brutalist architecture: raw material, no ornamentation, the structure is the beauty. Every word is load-bearing. The humor creates breathing room. Neither works without the other. The brutalism without humor becomes a sermon. The humor without brutalism becomes a podcast.

Policy: this voice governs all authored text across the brand — articles, captions, carousels, deck copy, email subject lines, and any surface where DX speaks in first person. The voice does not soften for social. It does not formalize for decks. It does not simplify for wider audiences. If the reader cannot handle the register, they are not the audience. Ghostwritten or collaborative copy must pass through this filter before publishing. No exclamation points. No rhetorical questions used as engagement bait. No hashtag-driven language. No emoji in body text. Humor is dry, never self-deprecating. Vulnerability is precise, never performed.

All language — on-screen, on-slide, in print — follows one register: terse, stamped, authored. No articles or prepositions in labels. No verbs in metadata. No friendliness. The brand does not greet. It presents.

“8 min” — not “Takes 8 minutes to read.”
“Mode: Light” — not “Switch to dark mode.”
“Est. 1994” — not “Established in 1994.”
“Publishing Apr 19” — not “Coming soon on April 19th!”

Tags are classification, not decoration. Single-word categorical labels. Never cute. Never clever. Permitted vocabulary: Faith, Identity, Work, Grief, Inheritance, Language, Calling, Strategy.

Policy: The border system is the skeleton of the brand. It is not decorative. Borders define hierarchy, separate modules, and signal structural intent. If a surface has no border, it is either background or it is wrong. Border weights are never improvised — use only the two approved weights below. These rules apply identically across site, carousels, decks, and print.

3px solid var(--border) — primary structural borders. Plate outlines, article header, article body, share bar, pull quote top/bottom, section head rule, callout left border, carousel slide-inner frame.

2px solid var(--border) — secondary borders. Tags, meta rail edges, scripture blocks, brand block, mode toggle, footer items, back button, logo card labels, eyebrow rules on carousels (1px exception for eyebrow accent rule).

46px repeating grid lines at var(--rule) opacity on every background surface — pages, slides, print layouts, deck backgrounds. Non-negotiable. Never scaled, never recolored, never removed for “cleaner” layouts.

Rulers: Fixed-position decorative rulers (.ruler-top, .ruler-left) on all web pages. Hidden on mobile. Not present on social or print — the grid lines carry that function instead.

Article frame: max-width 680px. All articles self-contained HTML with shared production CSS. No inline styles in body copy. This constraint extends to any long-form reading surface — Substack, email newsletters, or any future publishing channel.

The masthead of the editorial issue. Sits directly under the site chrome on the homepage. Carries the issue number, the week stamp, and a “latest” standfirst that deep-links to the current essay. Modeled on newspaper front-matter — the reader knows which edition they landed on before they read a word.

Rules. Issue number increments only with a new lead essay. Week stamp is always the publication week, not the current week. The standfirst block is the only place an essay link coexists with editorial metadata above the archive — everything else lives on the plates.

The author block. Split main/side layout — the name on one side at display scale, a short bio + two actions on the other. Never more than two actions. Primary action links to the full about page; secondary anchors the subscribe manifesto.

Hard rules. One identity hero per site. Never on article pages. Never duplicated on social. The name is always “Dexter Jakes” — no first-name-only, no handle-as-name. The corner eyebrow is the edition marker (“The Writer → 01”) and maps to issue numbering.

A three-cell classification rail. Each cell is a filter trigger — click “Faith” and the archive hides every plate not on that lane. The third cell is the queued state: a lane with no essays yet, rendered dashed and non-interactive. The cell stays visible so the taxonomy is always legible, even when a lane is empty.

Rules. Three lanes max: Faith, Identity, Art. No sub-lanes. No badges. Click toggles aria-pressed on the button and adds a filter class to the archive root. One lane active at a time; clicking the active lane resets to “all.” Queued cells carry aria-disabled="true" and a descriptive aria-label.

The issue opener. A two-column plate that splits a textured image (with latest-badge overlay) against an editorial body panel (eyebrow, title, deck, rail). This is the only plate variant that carries a deck — every other plate is title + meta. Used exactly once per issue.

.plate-row is an archive-density modifier. Drops a .plate-secondary card into a single-row layout so the title, deck, and meta sit inline. Use at the bottom of the archive for older entries where scale-parity with newer plates would be visual noise.

The subscribe block. A two-column split — ink-saturated title wall on the left (4-line stack, one word in the accent ink slot), receipt-style checklist and email capture on the right. Anti-pattern for every other subscribe block on the web: no hero image, no urgency copy, no social proof, no testimonials. The promise is the design.

Rules. One per site. Always at the bottom of the homepage. The title is fixed at four lines — rewording is allowed, restructuring is not. The form action on production points at /api/subscribe (Netlify function, Mailchimp REST v3). The demo below is inert — no submission endpoint, no form action. Previewing markup only.

The teaser strip. A single-line announcement for the next essay in the queue — title, lane, estimated drop date, read time, and a “notify me” affordance that anchors back to the subscribe manifesto. Sits between the archive and the subscribe block. Disappears the moment the next essay publishes and is replaced by the next-next.

Rules. One per homepage. Dated in absolute format (“Apr 23”) — never “Next week” or relative. Never includes a deck. If a drop date is uncertain, the strip is hidden — do not publish “TBD.”

Collapsible footnotes surfacing translation, historical, or cross-reference context beneath a scripture block. Native <details>/<summary> — no JavaScript, no ARIA polyfill, keyboard-accessible by default. Closed at first paint. The trigger carries the reference and a mono label; the body carries the actual note, sources, and cross-references.

Rules. Only on scripture-backed essays (currently all nine). Always appears directly under the scripture block it annotates. Never used for author commentary on the main argument — that belongs in the body. Include at least one source citation per note. Use sparingly: if every scripture block has a note, the reader is being trained to ignore them.

Markup. <details class="study-note"> → <summary class="study-note-trigger"> with .study-note-label, .study-note-ref, and .study-note-toggle → .study-note-body containing the note plus optional .study-note-sources and .study-note-cross rails. Full CSS lives in article.css.