What is Naija Brutalism?

Naija Brutalism is a neobrutalist design style built from Nigerian street life: commercial buses, market signage, hazard stripes, adire cloth, harmattan light and Pidgin humour. It is the style Cruise UI ships, as themes, CSS and React components.

Neobrutalism, with a Naija accent

Neobrutalism is a web style with flat colour, thick dark borders, hard offset shadows (no blur) and big, confident type. Naija Brutalism keeps those rules and takes its colours, patterns and words from Nigerian cities, so an app can feel like a Lagos bus stop or an Ibadan taxi rank.

The rules

  • Thick ink borders and hard shadows on every interactive element. Buttons drop into their shadow when pressed.
  • Two fonts: Baloo 2 for headings, Bricolage Grotesque for text.
  • Tokens only: every colour comes from a CSS variable (--primary, --ink, --paper …), so dark mode and city themes swap cleanly.
  • Corners: Square, Soft or Round, from one --radius value.
  • No emoji, no soft shadows, no blur and no gradients (except the signature bands).
  • Plain English by default. Pidgin lines are an opt-in mode and come from a fixed copy bank.

City themes

Each city is a theme: a palette, a signature band and a few extra lines of copy.

  • Lagos · Danfo (the default): Danfo Yellow (#FFC400) from the yellow danfo bus, with a black double-stripe band.
  • Ibadan · Micra: Micra Gold (#E8A317) from Ibadan's yellow-and-brown taxis, with a rust-roof band, a retro grid and stamp badges.

Dark mode

Dark mode (called "NEPA mode" in Pidgin mode) is the nepa-mode class on <html>. Every component and both city themes have dark values; shadows take the theme colour.

A game-like feel

The style is meant to skin a browser game as easily as a landing page, so Cruise UI includes game pieces: an XP bar, a score counter, a leaderboard, a countdown, achievement toasts and a dialogue box.

How to use it

  • With an AI assistant: pick a theme in the Studio and copy one prompt + spec into ChatGPT, Claude, Gemini or Meta AI.
  • In HTML: add one stylesheet and use the classes. See Installation.
  • In React / Next.js: install components with npx shadcn@latest add @cruiseui/button. See Installation.