"Form follows function - that has been misunderstood. Form and function should be one."
v1.0 | SYSTEM FONTS ONLY | NO DEPENDENCIESBRUTALIST WEB DESIGN is a philosophy, not just an aesthetic. It demands that every element serve a purpose. It exposes structure rather than hiding it. It uses system resources (fonts, colors, borders) without shame. It loads fast. It works everywhere. It doesn't pretend to be something it's not.
Black. White. Web-safe accent colors. No gradients. No subtle shades. Each color is used with intention, never for decoration. The palette is deliberately limited and harsh.
System fonts only. Times New Roman for body text (the most read font in human history). Arial for headings (universal, unremarkable). Courier for code (honest about its purpose). No font loading. No FOUT. No dependencies.
Aa Bb Cc
The quick brown fox jumps over the lazy dog. Typography exists to honor content. The first obligation of typography is legibility; the second is that it should honor, not degrade, the content.
Aa Bb Cc
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. Headings and UI elements use sans-serif for their functional clarity. No character, just pure utility.
Aa Bb Cc
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. 0123456789. Code, data, technical content. Every character gets equal width. Honest. Predictable. Machine-like.
Body text in Times New Roman. The default. The classic.
Small text for captions and metadata.
Tiny text for fine print and legal. Still readable.
UPPERCASE
For labels, badges, and emphasis. Use letter-spacing: 0.1em
Underlined Text
Reserved for links. Classic web convention.
Strikethrough
For deleted or outdated content.
Bold Italic
For extreme emphasis. Use rarely.
"Good design is honest. It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept."
- Dieter Rams
A simple 4px base unit. Dense but not cramped. Spacing is exposed, not hidden. You can see where things are, how they relate. No magic numbers, just multiplication.
Rectangular. No rounded corners - those hide the true shape. Thick borders. Obvious hover states. You know exactly what you're clicking. Buttons look like buttons.
STATES: Hover inverts colors. Active adds red flash. Focus uses browser default. No custom focus rings - accessibility defaults work.
Forms collect data. Labels are visible. Inputs have thick borders. Focus states are obvious (blue outline). Monospace fonts for data entry - every character aligned.
Content containers. Visible borders. Headers, bodies, footers - all clearly separated. No shadows (shadows lie about depth). No rounded corners (that's decoration).
This is a standard card with a black header bar. Content goes here. Keep it dense.
A softer card variant using dotted borders. Still visible, still honest.
Dashed border with subtle diagonal pattern background. For secondary content.
Black background, white text. For high-impact content that needs attention. Use sparingly.
CODE: #000000 background
Red border and header. For warnings, important notices, or featured content.
IMPORTANTExpose the grid. Show the bones.
Every element serves a purpose.
No decoration. No pretense.
Tables are for data. Dense rows, clear headers, visible borders on every cell. Monospace font for numbers. Yellow highlight on hover. No CSS tricks - just HTML tables.
| ID | COMPONENT | STATUS | VERSION | SIZE (KB) | DOWNLOADS |
|---|---|---|---|---|---|
| 001 | Button | ACTIVE | 1.0.0 | 2.4 | 14,523 |
| 002 | Input Field | ACTIVE | 1.0.0 | 1.8 | 12,891 |
| 003 | Card | BETA | 0.9.2 | 3.1 | 8,234 |
| 004 | Modal | DEPRECATED | 0.5.0 | 4.7 | 3,102 |
| 005 | Data Table | NEW | 1.0.0 | 5.2 | 567 |
| TOTAL | 17.2 | 39,317 | |||
| DATE | EVENT | LOCATION | ATTENDEES | STATUS |
|---|---|---|---|---|
| 2024-01-15 | System Maintenance | Server Room A | 3 | COMPLETED |
| 2024-01-16 | Code Review | Conference Room B | 5 | SCHEDULED |
| 2024-01-17 | Deploy v2.0 | Remote | 2 | PENDING |
| 2024-01-18 | Client Meeting | Office HQ | 8 | CONFIRMED |
| 2024-01-19 | Training Session | Training Room | 12 | SCHEDULED |
| 2024-01-20 | Weekend Backup | Automated | 0 | RECURRING |
Status indicators. Small, uppercase, high contrast. Each color has meaning: green = good, red = bad, yellow = warning, blue = info, black = neutral. No ambiguity.
System Status: OPERATIONAL v2.4.1 3 WARNINGS
Tags: electronics audio professional
These are not guidelines. They are convictions. Brutalist web design is a reaction against the sameness of modern web design - the rounded corners, the subtle shadows, the whitespace-as-luxury. This is different.
Raw Honesty
Show the structure. Don't hide borders, grids, or edges. Let users see how the page is built. HTML is not something to be ashamed of - it's the foundation of the web.
Function First
Every element must serve a purpose. If something is decorative, remove it. Buttons should look like buttons. Links should look like links. Forms should work.
System Defaults
Use system fonts. Use web-safe colors. Don't fight the browser - work with it. Every dependency is a liability. The less you load, the faster it runs.
Dense Content
Whitespace is not always a virtue. Information density can be a feature. Craigslist works. Wikipedia works. Content-first, not canvas-first.
High Contrast
Black on white. White on black. No subtle grays for body text. Accessibility is built-in when contrast is maximized. Harsh colors demand attention.
Intentional Ugliness
Beauty is not the goal. Effectiveness is. Sometimes the most effective design is one that looks "wrong" by conventional standards. Question every aesthetic assumption.
____ ____ _ _ _____ _ _ ___ ____ _____
| __ )| _ \| | | |_ _|/ \ | | |_ _/ ___|_ _|
| _ \| |_) | | | | | | / _ \ | | | |\___ \ | |
| |_) | _ <| |_| | | |/ ___ \| |___ | | ___) || |
|____/|_| \_\\___/ |_/_/ \_\_____|___|____/ |_|
__ _______ ____
\ \ / / ____| __ )
\ \ /\ / /| _| | _ \
\ V V / | |___| |_) |
\_/\_/ |_____|____/