Skip to content
StrictThemes

Themes / 10

Dispatch

A loud, fast theme for news and sport. Newsprint, black rules, condensed headlines and a breaking-news red.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/dispatch.json

01 / Preview

Stock shadcn components, this theme.

Dispatch

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page a coding agent built from the prompt, shown as it came out.

  • Front page

    A city newspaper's front page, with a masthead, one lead story, a column of other stories, a live strip and three sections of three stories each.

    32.5k characters · Run 3 times in Claude Code

    Strict Check 100%

    Preview the Front page pageRead the prompt

  • Story

    One news story, with its section and time, a large headline, a standfirst, a byline, a captioned picture, the body with a pull quote and a fact box, and related stories.

    32.5k characters · Run 3 times in Claude Code

    Strict Check 100%

    Preview the Story pageRead the prompt

  • Live blog

    Live coverage of one event, with a summary of key points, timed updates of several kinds, a control for their order and a new update that arrives and is announced.

    33.3k characters · Run 3 times in Claude Code

    Strict Check 100%

    Preview the Live blog pageRead the prompt

  • Results

    A sports results page, with today's scores, a league table, fixtures to come and a filter by competition.

    34.6k characters · Run 3 times in Claude Code

    Strict Check 100%

    Preview the Results pageRead the prompt

  • Section

    One section's index page, with its lead story, a list of stories with their times, a numbered most-read list and a button that loads more stories.

    32.3k characters · Run 3 times in Claude Code

    Strict Check 100%

    Preview the Section pageRead the prompt

03 / Colors

Every color the theme allows.

  • primary

    #BF0D2A / #FF6B7D

  • on-primary

    #FFFFFF / #2A0308

  • secondary

    #111111 / #F4F1EA

  • on-secondary

    #FFFFFF / #111111

  • tertiary

    #FFE14D

  • on-tertiary

    #111111

  • neutral

    #5C5850 / #A8A39A

  • background

    #F4F1EA / #121110

  • surface

    #FFFFFF / #1C1B19

  • foreground

    #111111 / #F4F1EA

  • border

    #1C1C1C / #8F8B82

  • error

    #9E0019 / #FF8A8A

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Big Shoulders · 88px · weight 800 · line 0.95

    The quick brown fox

  • h1

    Big Shoulders · 56px · weight 800 · line 1

    The quick brown fox

  • h2

    Big Shoulders · 32px · weight 700 · line 1.1

    The quick brown fox

  • body

    Newsreader · 18px · weight 400 · line 1.6

    The quick brown fox

  • label

    Chivo Mono · 12px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • none

    0

  • sm

    1px

  • md

    2px

  • xs

    4px

  • sm

    8px

  • md

    16px

  • lg

    24px

  • xl

    48px

  • 2xl

    96px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, full rounds up to 12px
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Dispatch is for things that happen today: a news site, a sports desk, a live blog, a magazine front. It takes after a tabloid front page and a stadium scoreboard. Headlines are condensed and very large, columns are divided by black rules, and one red says that something is happening right now.

Colors

  • Primary (#BF0D2A) is breaking-news red, for the main action, links and the word "Live".
  • Secondary (#111111) is press black for secondary buttons, headlines and rules.
  • Tertiary (#FFE14D) is highlighter yellow, with black text on it, for one marked phrase or an "Exclusive" badge.
  • Neutral (#5C5850) sets bylines, timestamps and captions.
  • Background (#F4F1EA) is newsprint. Surface (#FFFFFF) is the white of a featured story or a score box.
  • Border (#1C1C1C) is nearly black on purpose: rules are part of the design, as they are in print.

Typography

Big Shoulders sets headlines: tall, condensed and heavy, at 88px for a front page lead. Set headlines in uppercase, and keep them short enough to fit two lines. Newsreader, a text serif, sets body copy at 18px with real italics. Chivo Mono sets labels, uppercase: section names, bylines, times and scores. Scores and times use tabular figures.

Layout

A 12-column grid, 1280px at its widest. Columns of stories are divided by a 1px rule with 24px on each side of it. One lead story takes eight columns; the rest stack in the other four. Spacing comes from the scale (4, 8, 16, 24, 48, 96). It is dense: a front page shows many stories, and rules keep them apart where other themes would use space.

Elevation & Depth

None. This is ink on paper. Stories are divided by black rules, a featured box is white on newsprint with a 1px black border, and nothing has a shadow. Menus and dialogs get a border and one short shadow.

Shapes

Square. Images, boxes and badges have 0 corners; buttons and inputs have 2px, just enough not to look broken. No pills, no circles except a "Live" dot.

Components

  • Buttons: red for the one main action, black for the rest. Uppercase mono labels.
  • Cards (story boxes): white, square, 24px padding, a 1px black border.
  • Badges: yellow with black text for "Exclusive"; a red dot and the word "Live" for live coverage.
  • Rules: 1px black between stories, 2px above a section name.
  • Pictures: square, with no border. Where there is no image file, a flat block in the muted color stands in for the picture, with its caption under it.
  • Icons: 1.5px stroke line icons. Never emoji.

Do's and Don'ts

  • Do make one headline much larger than everything else on the screen.
  • Do divide with rules and keep the columns tight.
  • Do keep red for what is live, new or the main action. The focus outline is red as well: it marks where the reader is, and it is the one other use.
  • Don't soften it: no rounded cards, no shadows, no pale grey borders.
  • Don't set body copy in the headline font, or headlines in sentence case.
  • Don't introduce a color, size or radius that is not a token above.