sdfkjh internal · brutalist study

sdfkjh · design study

The raw document

Web brutalism: the HTML left undisguised, structure showing through instead of clad in ornament. Mono, hard borders, square corners, no shadow. On a site whose whole argument is verify by inspection, the raw document is not a style choice. It is the doctrine, drawn.

Study page. Noindex; linked only from the home page. After web brutalism and the material honesty of beton brut: the unstyled document, the browser's own rendering, view-source treated as a surface.

The component

component

renderedstyled

component

spec plate

status
operational
rev
2026.07
signal
amber, one

A component with nothing to hide: labelled, bordered, and printed at right exactly as it is built.

back to sdfkjh.com

sourceread from the live DOM

loading source from the page…

Both panes are the same eleven elements. The left one is dressed by this page's stylesheet; tick raw source and that stylesheet lets go, dropping the component back to the browser's own default rendering, Times and blue links and all. The markup never changed. The right pane proves it: that source is serialized from the live node at load, not a copy kept by hand, so it cannot drift from what you see. show structure outlines every node and names it, the page wireframing itself.

A single component shown three ways at once: rendered, reducible to its raw browser default, and printed as the real HTML behind it. The reveal is the point of the style: nothing here is hidden, because on this site nothing is meant to be.

The source

Two sources, one name. Architectural brutalism left concrete raw, the structure and the material honest and on show, nothing plastered over. Web brutalism borrowed the word for the unstyled HTML document: black Times on white, blue underlined links, the browser's own margins, view-source as the whole truth of the page. The sketch is that raw document, the before every styled page starts from.

The browser's own rendering. Tick raw source above to make the live component look like this.

taken

  • material honesty: show the structure, do not clad it
  • the system-document voice, mono and labelled
  • hard edges, square corners, no shadow or gradient
  • view-source as a front surface, not a backstage
  • ornament removed; every mark reports something

invented

  • the raw material is this page's own component, surfaced live
  • amber as the one permitted signal in an ink-and-paper document
  • a raw source toggle that is the real browser default, not an imitation
  • a source pane serialized from the DOM, so it cannot lie

Six moves

  1. Material honestyShow the structure; do not clad it. The border is the border, the box is the box.
  2. The system documentMono, labels, a spec-sheet voice. The page reads like a record, because it is one.
  3. Hard edgesSquare corners, solid rules, no shadow and no gradient. Nothing soft to hide a seam.
  4. One signalInk and paper, with amber as the single permitted alarm. Colour that means something.
  5. The source is the designView-source is not backstage; it is the front. What renders and what is written are one thing.
  6. Nothing decorativeEvery element earns its place by reporting. Remove anything that only dresses.

Honesty notes: raw source uses all: revert, which hands the component back to the browser's own stylesheet, the genuine default rendering rather than a styled impression of one. What it cannot revert is the markup, which is exactly the argument: same nodes, dressed or bare. The source pane is serialized from the live DOM once at load, so it is the real structure and cannot fall out of step with the render. The structure overlay's tag labels are injected after that capture and are decorative, hidden from assistive tech.

Brutalism is a licence for hard, not for careless. Text still meets AA, focus states are kept and visible, and raw mode is a demonstration a visitor opts into, never the reading default. The style is stripped back; the accessibility is not.