A flat brutalist record of the body as it is actually lived in. The rigid frame is the container; the living content is the point. This document is the frame, specified.
Brutalism is the container: rigid grid, hairline rules, hard edges, zero radius. The content is alive — the organic heritage glyph, real human imagery, member voices. Keep BME's ethos: anti-corporate, community-first, an anthropological record, safety-respecting.
Two registers of one system. BME.COM / News / Wiki is the publisher: serif-led, archival gravity. IAM is the platform: mono-heavy, raw, user-generated. Every surface is BRUTAL or QUIET — never blended.
Mono glyph · on surface
Light and dark are the same tokens, inverted. Blue holds in both. Red is reserved — permitted only for the semantic --danger message token (see §09), never for decoration, structure, or emphasis. All other reds come from real imagery. Click any hex to copy.
Brand wash, headers, brutal-zone fields, gates. In quiet zones it recedes to one marker.
Safety-bar background, hover / active states, inversion depth.
Text & structure (light), superbar background, background base (dark).
Dark-mode accent / card surface, one step lifted from ink.
Metadata, captions, secondary text in light mode. In dark mode this role lifts to --ash.
Metadata, captions and secondary text in dark mode — a lifted gray that stays legible on ink where graphite goes too dim.
Light-mode accent / card surface; primary foreground (text) in dark mode.
Light-mode background; hairlines, borders and rules in dark mode.
Two surfaces never invert with light/dark: the superbar (--ink) and the safety bar (--deep-heritage-blue). They are constant chrome across every property.
Neutral status, queued actions, ambient information.
Completed actions, confirmations, recorded submissions.
Gated or restricted state; something needs attention.
Irreversible or visibility-changing action ahead. Confirm first.
The sole sanctioned red. Errors and destructive outcomes only.
Announcements, new features, low-urgency editorial notes.
The archive records the body plainly: bold for a claim that matters, italic for a term of art, and both when a name is first set down. Corrections are shown, never hidden — the old figure the corrected one. A phrase can be held up for emphasis without shouting. Reference a token inline as --heritage-blue, cite a measure of 601–72ch, and set an era in small caps, since 1994.
--dangerLinks are heritage-blue and always underlined. Read the tier policy or browse the gallery index — these two are live: hover and press them.
The first time most people saw a body leave the ground on hooks, it was through a screen — a clip, a thread, a photograph on a server that no longer exists.
View with respect and intelligence, or don't view at all.— Standing policy, since 1994
:root{
--heritage-blue:#6163BA; /* dominant brand */
--danger:#C14856; /* the one sanctioned red */
}
.gate{ border:1px solid var(--line); border-radius:0; }gap over margins between siblings.Full-width bars are theme-independent and persist across all properties. Header and navbar are margined and property-dependent.
Pills mark state — a thread pinned, hot, or locked; a member verified or the post's author. Distinct from tier badges, which mark access (OPEN / COMMUNITY / GATED). Both sit at the same 10px mono-caps floor — nothing functional goes smaller.
Tiers run OPEN → COMMUNITY → GATED. Sensitive media defaults to monochrome + blur + a typographic warning cover; the reveal is one deliberate act. No how-to, ever.
Graphic documentation. A record, not instruction. View with respect and intelligence, or don't view at all.
Mono, hairline-ruled, hard-edged. Six semantic levels, each keyed to a secondary token. The accent bar and dot carry the color; the label and body stay neutral so they clear AA on any surface in both themes. Danger is the one place red is allowed — nowhere else. No "Oops!", no "Submit". Empty states are invitations.
Nothing here yet.
The archive grows because people submit. Add yours.
The banner anchored bottom-right on every page is the self-hosted vanilla-cookieconsent plugin, themed from these same tokens — hard edges, mono type, hairline borders, brand-blue toggles, and it inverts with the site's .dark class. Necessary cookies are always on; functional, analytics, and marketing are opt-in and persist in a cc_cookie. Re-open the panel anywhere with a declarative trigger — no custom JS:
<!-- re-open the preferences panel from anywhere -->
<a href="#" data-cc="show-preferencesModal">Cookie settings</a>
// only load analytics if the visitor opted in
if (CookieConsent.acceptedCategory('analytics')) {
// load analytics here
}WCAG AA on all body and warning text in both modes. White-on-blue clears AA or uses a paper containment block.
Visible focus on every interactive element — a hard blue outline, offset 2px. Full keyboard operability.
prefers-reduced-motion respected. No ambient animation, carousels, or infinite scroll. State changes are instant and hard.
Screen-reader legible, never image-only. Warnings carry real text; reveal is an explicit, labeled action.
The system assembled into real pages. Everything above — tokens, chrome, components, safety — shown in place. Two registers share the chrome: publisher (BME.COM, Playfair masthead, serif reading) and platform (IAM, Alfa Slab masthead, mono body). The age gate is a bespoke full-bleed interstitial. Open any screen in a new tab.
The 2006 portal index, recovered — taxonomy spine, editorial well, community rail.
Long-form reading in the serif well — the masthead, navbar, and prose zone in practice.
The archive in plates: healed work shown openly, gated work covered until you choose to see it.
A media detail page — the chrome and components carried onto a video/still layout.
The tier policy on the page: OPEN → COMMUNITY → GATED, each rung stated plainly.
A quiet reading page with one inline click-to-reveal graphic-content gate.
The “WE ARE BME” member timeline — a grid of members, newest diary activity first, with sort and go-live controls.
The member diary and profile in the mono-heavy platform register — Alfa Slab masthead, mono body.
The community boards — four categories from The Commons to The Craft, each board tier-marked.
One board's thread list — pinned rules, hot and locked states, sort controls and pagination.
A single thread: author columns, quoted replies, useful-marks, and the reply composer.
The gathering calendar — a featured convention and a colour-typed, RSVP-able upcoming list.
One event in full — three-day program, location, host, and a sticky RSVP rail.
A two-pane private inbox — the conversation list and an open thread with composer.
The IAM MVP v2 data model, annotated — 19 tables in 9 clusters with crow's-foot cardinality and the visibility model.
A full-bleed blue interstitial stated plainly — real documentation, entered by deliberate choice.
One source of truth every property builds on. Foundational tokens are fixed; semantic roles — bg / surface / fg / line — invert under .dark. The superbar and safety bar never invert. Copy a block straight into your repo.
:root {
/* Foundational */
--heritage-blue: #6163BA; /* dominant brand */
--deep-heritage-blue: #3C47AC; /* safety bar, hover/active */
--ink: #0A0A0A;
--faded-ink: #1E1E1E;
--graphite: #6B6B6B;
--ash: #9A9A9A; /* readable secondary/meta text on dark */
--bone: #F1EFEC;
--gauze: #FAF9F9;
/* Secondary · message palette (theme-independent) */
--info: #6163BA;
--success: oklch(0.54 0.125 149);
--warning: #DFA837;
--caution: #D87B32;
--danger: #C14856; /* the one sanctioned red */
--note: oklch(0.54 0.125 312);
/* Semantic roles — LIGHT */
--bg: var(--gauze);
--surface: var(--bone);
--fg: var(--ink);
--meta: var(--graphite);
--line: var(--ink);
--line-soft: rgb(10 10 10 / 0.18);
}
.dark {
/* Semantic roles — DARK (clean inversion) */
--bg: var(--ink);
--surface: var(--faded-ink);
--fg: var(--bone);
--meta: var(--ash);
--line: var(--gauze);
--line-soft: rgb(250 249 249 / 0.20);
}
/* Superbar (--ink) and safety bar (--deep-heritage-blue) NEVER invert. *//* app.css — Tailwind v4, CSS-first */
@import "tailwindcss";
@import "./tokens.css"; /* :root + .dark from the block above */
@import "./fonts.css"; /* self-hosted @font-face — no Google Fonts */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* colors -> bg-*, text-*, border-* */
--color-heritage-blue: #6163BA;
--color-deep-heritage-blue: #3C47AC;
--color-ink: #0A0A0A;
--color-faded-ink: #1E1E1E;
--color-graphite: #6B6B6B;
--color-ash: #9A9A9A;
--color-bone: #F1EFEC;
--color-gauze: #FAF9F9;
--color-info: #6163BA;
--color-success: oklch(0.54 0.125 149);
--color-warning: #DFA837;
--color-caution: #D87B32;
--color-danger: #C14856;
--color-note: oklch(0.54 0.125 312);
/* semantic roles resolve from :root / .dark at runtime */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-fg: var(--fg);
--color-meta: var(--meta);
--color-line: var(--line);
/* fonts -> font-* */
--font-masthead: "Playfair Display", serif; /* publisher */
--font-slab: "Alfa Slab One", serif; /* IAM / internal */
--font-serif: "Source Serif 4", Georgia, serif; /* reading body */
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* brutalist: zero radius */
--radius-none: 0px;
}
@layer base {
*, ::before, ::after { border-radius: 0 !important; box-shadow: none !important; }
html { font-family: var(--font-serif); }
body { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--color-heritage-blue); outline-offset: 2px; }
::selection { background: #6163BA; color: #fff; }
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation: none !important; transition: none !important; }
}
}// tailwind.config.js — Tailwind v3
import defaultTheme from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
"heritage-blue": "#6163BA",
"deep-heritage-blue": "#3C47AC",
ink: "#0A0A0A",
"faded-ink": "#1E1E1E",
graphite: "#6B6B6B",
ash: "#9A9A9A",
bone: "#F1EFEC",
gauze: "#FAF9F9",
info: "#6163BA",
success: "oklch(0.54 0.125 149)",
warning: "#DFA837",
caution: "#D87B32",
danger: "#C14856",
note: "oklch(0.54 0.125 312)",
// semantic roles (define the vars in :root & .dark)
bg: "var(--bg)",
surface: "var(--surface)",
fg: "var(--fg)",
meta: "var(--meta)",
line: "var(--line)",
},
fontFamily: {
masthead: ['"Playfair Display"', "serif"],
slab: ['"Alfa Slab One"', "serif"],
serif: ['"Source Serif 4"', "Georgia", "serif"],
mono: ['"IBM Plex Mono"', ...defaultTheme.fontFamily.mono],
},
borderRadius: { none: "0px", DEFAULT: "0px" },
boxShadow: { none: "none", DEFAULT: "none" },
},
},
};<!-- brutalist utilities in practice -->
<article class="bg-bg text-fg font-serif">
<span class="font-mono uppercase tracking-wider text-meta">
2026-07-01 14:02 UTC
</span>
<!-- tier badge -->
<span class="border border-danger text-danger font-mono px-2 py-1">
GATED
</span>
<!-- link: underlined always, never color alone -->
<a class="text-heritage-blue underline underline-offset-4
hover:text-deep-heritage-blue">
view experience
</a>
<!-- flash: color in the bar, neutral label/body -->
<div class="flex border border-line dark:border-line">
<div class="w-2 bg-success"></div>
<div class="p-4">
<p class="font-mono text-xs uppercase tracking-wider">Success</p>
<p class="text-fg/90">Diary entry recorded.</p>
</div>
</div>
</article>