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 — both modes.
Light-mode accent / card surface; dark-mode foreground alongside gauze.
Light-mode background; primary foreground (text) 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.
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.
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 member diary and profile in the mono-heavy platform register — Alfa Slab masthead, mono body.
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;
--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(--gauze);
--meta: var(--graphite);
--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-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",
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>