← All styles
Live preview Open site ↗
A page rendered in Pulp Transmission

Pulp Transmission

a comic broadcast from a dead planet

Deep navy and one flare of coral, inverted section by section. Ultra wide display caps fill the page edge to edge, halftone artwork sits in a radial glow, and technical marks hold the four corners.

darkcomicpostersci-fibolduppercaseentertainment v1.0.0 CC-BY-4.0

Install

npx styles-md add pulp-transmission

Palette

bg #0a1526
surface #16263f
fg #f2ecea
muted #93a1b5
accent #f2565f
accent-fg #0a1526
border #2b3d59

Type

Body Inter Tight

Aa Bb Cc 0123 The quick brown fox

"Inter Tight", "Helvetica Neue", Arial, sans-serif
Headings Anybody

Aa Bb Cc 0123 The quick brown fox

"Anybody", "Arial Black", Impact, sans-serif
Code JetBrains Mono

const total = 1 + lI0O;

"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace

16px base · 1.25 ratio · body 400 / heading 800 · heading tracking 0em. Fonts are not bundled. Install the first family in each stack, or the specimens below fall back to the next one your device has.

4xl · 48.83px

The quick brown fox jumps

3xl · 39.06px

The quick brown fox jumps

2xl · 31.25px

The quick brown fox jumps

xl · 25px

The quick brown fox jumps

lg · 20px

The quick brown fox jumps

base · 16px

The quick brown fox jumps

sm · 12.8px

The quick brown fox jumps

xs · 10.24px

The quick brown fox jumps

Licensing

No font files are redistributed here. Every family this style asks for by name is free for commercial use, and CI rejects a style that names one which is not.

Fallbacks: Helvetica Neue, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, monospace, Arial Black, Impact. These are CSS generics and fonts the reader's OS already ships, referenced by name only, so nothing is licensed or downloaded.

The spec itself, and everything generated from it, is CC-BY-4.0. Attribution is the comment at the top of each generated file; keep it and you have complied.

Shape, space & motion

stroke
1px
radius
6px · 10px · 90px
spacing unit
4px
gutter
24px
section gap
120px
max width
1440px
motion
350ms cubic-bezier(0.2, 0.8, 0.2, 1)
Download

Pulp Transmission

A comic book cover that happens to be a website. Two colours trade places between sections, the title is set as wide as the page will allow, and the artwork is halftoned so it belongs to the same print run as the type. The furniture in the corners is there to make the page feel like equipment.

Principles

  • Two grounds, and they swap. Navy sections carry coral marks; coral sections carry navy marks.
  • On coral, the ink is bg navy. Bone on coral fails contrast at 2.86:1, so it never appears there.
  • The display line is width, not size. Push the face to its expanded end and fill the measure.
  • Artwork is halftoned to two inks and sits in a radial glow, never on a flat rectangle.
  • Every screen keeps technical marks in its corners: a barcode, a crossed circle, a frame count.
  • Shadows are layered and soft. This is the one style here where depth is allowed to be lit.

Typography

The display face is variable in width, and that axis carries the whole voice: at the expanded end, weight 800 and line height 0.8, a three word title fills 1440px with no tracking applied. Sizes jump rather than step, from 24px straight to 88px and 140px, because a poster has a title and a caption and nothing between them. Body is the narrow sans at 16 to 24px, and mono holds anything that reads as instrumentation: counts, coordinates, issue numbers.

Colour

Navy #0a1526 is the default ground and bone #f2ecea the text on it, at 15.64:1. Coral is the flare: as text on navy it clears AA at 5.46:1, and as a full bleed ground it takes navy ink at the same ratio. muted is a cool grey for captions at 6.97:1. surface is one step up from the ground for a panel, and border is a hairline that reads as a rule on a page rather than as a UI frame.

Components

  • Display line: display face at expanded width, weight 800, uppercase, line height 0.8, tracking 0.
  • Button (primary): accent fill, accentFg label, radius-lg, 14px/32px, uppercase mono label.
  • Button (ghost): 1px border, fg label, radius-lg, same metrics.
  • Icon button: a circle at radius-full, surface fill, 44px, in a row of five or more.
  • Panel: surface, radius-md, 1px border, 24px padding, shadow-md.
  • Card (art): the halftone bleeds to the edges, radius-sm, caption in mono underneath.
  • Corner mark: mono at 10px, or a drawn barcode or crossed circle, pinned to a section corner.
  • Glow: a radial gradient of accent at 25 percent, behind the subject and nothing else.
  • Divider: 1px border, full bleed, with a mono label sitting on top of it.
  • Focus ring: 2px accent at 3px offset.

Do / Don’t

  • Do invert the ground between sections. A page of one colour loses the whole device.
  • Do set the title as wide as the container allows before you make it taller.
  • Do halftone the artwork to two inks so it prints with the type.
  • Do keep the corner marks on every full bleed section, at 10px, in mono.
  • Do let the glow sit behind the subject, at one intensity, once per section.
  • Don’t put bone text on coral. Navy is the ink on that ground.
  • Don’t track the display line. Width is the axis you reach for.
  • Don’t fill a mid sized rectangle with coral. It is either a full ground, a control, or a mark.
  • Don’t put a photograph on the page untreated. It has to be halftoned or it does not belong.
  • Don’t add a third hue. The palette is two inks and a grey for captions.

When to use

Comics, games, drops and launches, music and events: anything sold on a cover. A poor fit for dashboards, documentation and long reading, where an inverting ground and a 140px title are noise around the content rather than the content itself.