Basement Grotesque

Unapologetic brutalist type specimen page with heavy monochromatic contrast and raw technical utility. Massive outline-and-solid letterforms anchor pitch-black backgrounds punctuated by a singular fluorescent orange announcement strip.

raw bold quiet

Visit site

Colour

Background#000000

Text#ffffff

Accent#ff4d00

Surface#101010

Muted#878787

Typefaces

Display: Basement Grotesque
Body: Inter
Mono: —
Source: self_hosted
Scale: 14 · 16 · 18 · 19 · 24 · 29

Layout

Grid: —
Container: —
Spacing base: 10px
Radius: 0px

Capture

Category: foundry
Sections: 4
Captured: 2026-08-30
Rhythm: dark x4

Type rules

display type always rendered in massive uppercase weights with tight tracking
body text constrained to around 40 characters per line for specimen clarity
mix solid fills and wireframe outlines for massive headline lockups

Colour rules

pitch black canvas dominates at nearly 90 percent of surface area
vivid safety orange reserved exclusively for top announcement utility bars
monochrome white and muted grey used for all typographic hierarchy

Voice rules

conversational studio voice paired with strict typographic metadata
all-caps for directional cues and UI labels

Holds it together

render mega titles with paired outlined and filled uppercase treatments
use live digital timestamps and version counters in utilitarian top navigation bars
keep the layout strictly monochrome with stark black and white, reserving fluorescent orange for global alerts

Contrast

text on background21.0:1 AAA

muted text on background5.8:1 AA

text on surface19.0:1 AAA

accent on background6.3:1 AA

background on accent6.3:1 AA

Type, measured

Body: 24px / 1
Measure: 40 characters
Display: 112px / 1
Tracking: 0.04em display
Scale ratio: 1.47

Voice

Tone: confident, irreverent
Sentences: medium
Person: first
Vocabulary: technical
Calls to action: tweet, check, try

Built with

Builder: —
Framework: next
Motion: locomotive-scroll
WebGL: —
Nav: sticky_top_bar, 1 items, sticky
Length: 12 screens

Sections in page order

3 marked strong · 4

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
nav
Strong
Utilitarian, high-contrast dark navigation bar structured like a technical dashboard with metadata and an intense orange announcement strip.
Mood
raw + clinical
Layout
1 col · full bleed · dense
Open section →
01
hero
Strong
Massive, high-impact monochrome typography dominates a stark black canvas with raw brutalist confidence.
Mood
bold + raw
Layout
1 col · centered · airy
Open section →
02
showcase
Strong
Stark monochrome typography specimen pairing narrative editorial copy with a massive, wireframe-extruded letterform graphic.
Mood
bold + raw
Layout
1 col · split · balanced
Open section →
03
showcase
An austere, pitch-black space divided into subtle tonal planes designed to stage dynamic interactive content.
Mood
quiet + raw
Layout
1 col · stacked · airy
Open section →