Jekyll2026-05-12T20:27:40+00:00https://csswitch.github.io/jekyll-brutalist-theme/feed.xmlThe BrutalistA newspaper-grid Jekyll site with raw bold typographyYour Nameyou@example.comWhy Brutalist Web Design Works2024-01-22T00:00:00+00:002024-01-22T00:00:00+00:00https://csswitch.github.io/jekyll-brutalist-theme/2024/01/22/why-brutalist-design-worksBrutalist web design gets dismissed as ugly. It’s usually the opposite — it’s the most honest form of web design there is.

What Brutalism Actually Means

Brutalism in architecture means exposing structural materials — raw concrete, visible steel, unfinished surfaces. There’s no cladding. What you see is what holds the building up.

In web design, brutalism means the same thing:

The structure IS the design.

Links are underlined because they’re links. Borders are thick because they separate content. Typography is large because it’s important. Nothing pretends to be something it isn’t.

Why Heavy Rules Work

A 6px border isn’t aggressive — it’s communicative. Thick rules between sections say: this section ends here. You don’t need white space, drop shadows, or card borders to communicate containment when you have a rule.

h2 {
  border-top: 6px solid #0a0a0a;
  padding-top: 0.5rem;
}

That’s structural typography. The rule IS the heading marker.

The Newspaper Invented This

Newspapers solved content hierarchy before the web existed. Lead story. Secondary stories. Pull quotes. Datelines. Every typographic convention a developer blog needs was already solved in 1920.

The Brutalist theme borrows all of it:

  • Bebas Neue: condensed display — the tabloid headline font
  • Heavy lead card: dominant story with excerpt columns
  • Dateline meta: BYLINE — DATE in small-caps mono
  • Double rule: the classic thick-thin newspaper section separator

The Honest Hover

The Brutalist hover state is an inversion — black background, white text. No color transition, no box-shadow, no transform. Just a reversal of contrast.

a:hover {
  color: white;
  background: black;
  text-decoration: none;
}

It reads instantly. It costs nothing. It’s the most legible hover state on the web.

]]>Your Nameyou@example.comWelcome to The Brutalist — A Raw Jekyll Theme2024-01-15T00:00:00+00:002024-01-15T00:00:00+00:00https://csswitch.github.io/jekyll-brutalist-theme/2024/01/15/welcome-to-the-brutalistThe Brutalist is a Jekyll theme built on three principles: stark contrast, heavy rules, and raw type.

The Newspaper Grid

The home page layout is modeled on a newspaper front page — not a blog feed. There’s a dominant lead story with a two-column excerpt and a secondary sidebar of latest headlines. Below, a CSS grid fills in the rest.

This forces you to write a strong headline and a proper lead paragraph. The theme does the layout work.

Typography

All headlines use Bebas Neue — a condensed, all-caps display font designed for high visual impact at any size. It’s the font tabloids and punk posters use. There’s no weight variation — it IS the bold weight.

Body copy uses Space Grotesk — a geometric grotesque with a technical personality. Combined, they create a tension: newspaper bluntness meets editorial clarity.

The One-Color Rule

There is exactly one accent color: tabloid red (#e8001a).

It appears in:

  • The reading progress bar at the top
  • The LATEST and tag kicker stamps
  • Code block left borders and CODE labels
  • The “Read Full Story” button hover

Everything else is black, off-white, or gray. The red earns its impact through restraint.

Configuring Your Site

brutalist:
  invert: false        # flip to white-on-black
  rule_weight: "heavy" # border thickness: light | medium | heavy
  uppercase: true      # uppercase heading transform

Start by changing title in _config.yml — it’s used as the masthead typographic headline.

]]>Your Nameyou@example.com