Boom Design System

Get DESIGN.md Download View template Works with

Boom is a classic online newspaper. It feels like the front page of a well-kept magazine site: a white page, black serif headlines in Redaction, small coloured category labels in Inter, and dense grids of photo-led stories separated by pale hairlines. There is almost no decoration. Photos, headlines and the rhythm of the columns do all the work.

Four signatures make it recognisable:

Two-tier masthead. A B BOOM logo (a black rounded square with a serif B, then spaced capitals) with a row of five black social icons on the right; under it a sticky bar of thirteen-pixel Inter section links, a ⚡ Featured link and a Search... pill, framed by 1px hairlines above and below.
Colour-coded categories. Every story carries an Inter 13px / 600 label in its section's colour (Science green #17974E, Health teal #41A1B9, Politic coral #F6584D, Business navy #2E4285, World sage #88B49B); most also show a grey date (Feb 2020), except the top story strip, which has the label only.
Serif headlines, sans meta. All headlines and the dek are Redaction serif; all labels, dates, nav and buttons are Inter. Section names (Latest News, Trending, Health) are small 16px serif bold, not large titles.
Hairline-divided bands. Each section starts 40px below a 1px #EEEEEE rule and runs its stories in a 2- to 5-column grid.

Boom is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page, nav bar, footer

surface-1#FAFAFA

Advertise with Boom panels (--white)

field#F0F0F0

Newsletter input fill

field-ink#2F3330

Typed text in inputs (--dark-slate-grey)

Ink

on-primary#FFFFFF

Text on primary

ink#000000

Headlines, section names, nav links, icons

ink-muted#4D4D4D

Body copy and story deks (the p and li default, --dim-grey)

ink-subtle#6B6B6B

Dates beside category labels, current nav item (--dim-grey-2)

on-media#FFFFFF

Icons on the black featured badge over photos

Action

primary#000000

The newsletter submit button, the logo square and the ⚡ featured badge

Lines & effects

line#EEEEEE · 93%

Hairlines around the nav bar and between sections

line-strong#CCCCCC

Stronger divider (--light-grey), used once

cat-science#17974E

Science label

cat-health#41A1B9

Health label

cat-politic#F6584D

Politic label

cat-business#2E4285

Business label

cat-world#88B49B

World label

Typography

Redaction · headline-xl

The quick brown fox jumps

Article and page titles (h1). 38px · 700 · 1.16

Redaction · quote

The quick brown fox jumps

Blockquotes, with a 2px black left bar and 25px padding. 36px · 400 · 1.0

Redaction · title-sm

The quick brown fox jumps

Every story card title (.blog-title-small, 36 on the page). 17px · 700 · 1.2

Redaction · body

The quick brown fox jumps

Paragraphs and deks: My visual universe is surrealistic, colorful and dark at the same time. 17px · 400 · 1.41

Redaction · caption

The quick brown fox jumps

Small serif notes (3 on the page). 13px · 500 · 1.38

Inter · label

The quick brown fox jumps

Category labels and dates (58 on the page). 13px · 600 · 1.2

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	each .section has 40px top padding and no bottom padding; sections are divided by 1px line rules, so the page reads as stacked bands
Breakpoints	991px, 767px and 479px (94 rules, the most)

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	16px
`md`	25px
`lg`	30px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`footer-bottom`	30px
`column-gap`	30px
`section`	40px
`footer-top`	60px

Border radius

xs3px

field-sm4px

sm5px

md8px

pill100px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3field

Motion

Nav link hover	Opacity 1 → 0.6, transition: opacity .2s
Button hover	transition: all .2s
Page load	Content fades in, opacity 0 → 1 over 1000ms outQuart
Search / menu overlay	Opens with a 400ms outCubic size change

Do’s and don’ts

Set every headline in Redaction 700 black #000000 and every label, date and nav item in Inter 13px / 600.
Give each story a meta row: the category in its own colour, then the date in #6B6B6B.
Split the page into bands with 1px #EEEEEE rules and 40px top padding.
Use multi-column grids (3, 4 or 5 columns, 30–50px gaps) with one larger lead story per band.
Keep images almost square-cornered (3px) and let them carry the colour.
Keep paragraphs in Redaction 17px / 1.41 in #4D4D4D.
Use category colours for headlines, buttons or fills; Health #41A1B9, Politic #F6584D and World #88B49B fail body contrast and work only as 13px bold labels.
Add shadows, gradients, card backgrounds or borders around stories.
Make section names large; they stay 16px Redaction bold.
Add filled buttons to story cards; the card itself is the link.
Round images beyond 3px or use pill shapes except for the search field.
Animate stories on scroll.

Example prompt

Any page in the Boom style

Prompt

Build your page in the Boom style. White #FFFFFF page, max width 1200px with 2% side padding. Two-tier header: logo and black social icons, then a sticky 68px nav bar with 1px #EEEEEE rules above and below and Inter 13px / 600 black links (hover to 60% opacity in 200ms) plus a pill search field. Stories in 3–5 column grids with 30–50px gaps; each story is an image with a 3px radius, then a meta row (category in its colour, such as Science #17974E, Politic #F6584D, Business #2E4285, then the date in #6B6B6B, Inter 13px / 600), then a Redaction 17px / 700 black headline with line height 1.2. Lead stories use Redaction 30px / 700 and a 17px Redaction dek in #4D4D4D. Section names in Redaction 16px / 700. Separate sections with 1px #EEEEEE rules and 40px top padding. No shadows, no gradients, no card backgrounds.

# Boom Design System

> Measured from the Boom template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Boom is a classic online newspaper. It feels like the
front page of a well-kept magazine site: a white page,
black serif headlines in Redaction, small coloured
category labels in Inter, and dense grids of photo-led
stories separated by pale hairlines. There is almost no

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page, nav bar, footer    |
| surface-1    | #FAFAFA     | Advertise with Boom pan… |
| field        | #F0F0F0     | Newsletter input fill    |
| field-ink    | #2F3330     | Typed text in inputs (-… |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #000000     | Headlines, section name… |
| ink-muted    | #4D4D4D     | Body copy and story dek… |
| ink-subtle   | #6B6B6B     | Dates beside category l… |
| on-media     | #FFFFFF     | Icons on the black feat… |
| primary      | #000000     | The newsletter submit b… |
| line         | #EEEEEE 93% | Hairlines around the na… |
| line-strong  | #CCCCCC     | Stronger divider (--lig… |
| cat-science  | #17974E     | Science label            |
| cat-health   | #41A1B9     | Health label             |

## Typography

- headline-xl: Redaction 38px / 700
- quote: Redaction 36px / 400
- headline-lg: Redaction 32px / 700
- headline-md: Redaction 30px / 700

{
  "$description": "Boom design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The newsletter submit button, the logo square and the ⚡ featured badge"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page, nav bar, footer"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FAFAFA",
      "$description": "Advertise with Boom panels (--white)"
    },
    "field": {
      "$type": "color",
      "$value": "#F0F0F0",
      "$description": "Newsletter input fill"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, section names, nav links, icons"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#4D4D4D",
      "$description": "Body copy and story deks (the p and li default, --dim-grey)"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#6B6B6B",
      "$description": "Dates beside category labels, current nav item (--dim-grey-2)"
    },
    "field-ink": {
      "$type": "color",
      "$value": "#2F3330",

/* Boom theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FAFAFA;
  --color-field: #F0F0F0;
  --color-ink: #000000;
  --color-ink-muted: #4D4D4D;
  --color-ink-subtle: #6B6B6B;
  --color-field-ink: #2F3330;
  --color-line: #EEEEEEED;
  --color-line-strong: #CCCCCC;
  --color-cat-science: #17974E;
  --color-cat-health: #41A1B9;
  --color-cat-politic: #F6584D;
  --color-cat-business: #2E4285;
  --color-cat-world: #88B49B;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Redaction", serif;
  --font-redaction: "Redaction", serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-headline-xl: 38px;
  --text-headline-xl--line-height: 1.16;
  --text-headline-xl--letter-spacing: 0px;
  --text-headline-xl--font-weight: 700;
  --text-quote: 36px;
  --text-quote--line-height: 1.0;
  --text-quote--letter-spacing: 0px;
  --text-quote--font-weight: 400;
  --text-headline-lg: 32px;
  --text-headline-lg--line-height: 1.13;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 700;
  --text-headline-md: 30px;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;

/* Boom design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #000000; /* The newsletter submit button, the logo square and the ⚡ featured badge */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page, nav bar, footer */
  --color-surface-1: #FAFAFA; /* Advertise with Boom panels (--white) */
  --color-field: #F0F0F0; /* Newsletter input fill */
  --color-ink: #000000; /* Headlines, section names, nav links, icons */
  --color-ink-muted: #4D4D4D; /* Body copy and story deks (the p and li default, --dim-grey) */
  --color-ink-subtle: #6B6B6B; /* Dates beside category labels, current nav item (--dim-grey-2) */
  --color-field-ink: #2F3330; /* Typed text in inputs (--dark-slate-grey) */
  --color-line: #EEEEEEED; /* Hairlines around the nav bar and between sections */
  --color-line-strong: #CCCCCC; /* Stronger divider (--light-grey), used once */
  --color-cat-science: #17974E; /* Science label */
  --color-cat-health: #41A1B9; /* Health label */
  --color-cat-politic: #F6584D; /* Politic label */
  --color-cat-business: #2E4285; /* Business label */
  --color-cat-world: #88B49B; /* World label */
  --color-on-media: #FFFFFF; /* Icons on the black featured badge over photos */

  /* Fonts */
  --font-redaction: "Redaction", serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-headline-xl: 38px;
  --text-headline-xl-font: var(--font-redaction);
  --text-headline-xl-weight: 700;
  --text-headline-xl-line-height: 1.16;
  --text-headline-xl-tracking: 0px;
  --text-quote: 36px;
  --text-quote-font: var(--font-redaction);
  --text-quote-weight: 400;
  --text-quote-line-height: 1.0;
  --text-quote-tracking: 0px;
  --text-headline-lg: 32px;
  --text-headline-lg-font: var(--font-redaction);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.13;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 30px;
  --text-headline-md-font: var(--font-redaction);
  --text-headline-md-weight: 700;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Blog design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Redaction · headline-xl

Redaction · quote

Redaction · title-sm

Redaction · body

Redaction · caption

Inter · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Boom style

More design systems like this

Mag

Osaka

SmartMag

Stories

Bring any of them to your AI tool