← All UI styles
Broadside Ink
Heavy black wood type on ecru — a printed notice, not an interface.
PrinteditorialAnnouncementsEvent and ticketingBold marketing screens
Construction · Print
Ink on stock: a grain over the whole page, edges that are drawn lines, fills that are screens or solids, and no depth anywhere.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Broadside Ink style. Wood-type weight headings in black on ecru stock, set tight and shouted in uppercase. Weight carries hierarchy; color does almost nothing. Build every surface the Print
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- wood type weight
- ecru stock
- uppercase shouting
- black carries hierarchy
What this style refuses
- thin weights
- cool grey neutrals
- rounded corners
- soft shadows
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#f0ebdf#100e0bSurface
#f7f3e9#171410Border
#1a1712#efe9dcText
#161310#f4efe3Muted text
#5b5346#a2988aAccent
#8c2f10#e07a4eOn accent
#f7f3e9#180801Shape and type
Radius0 / 0 / 0 px
Border2px solid
Shadownone
DisplayImpact
BodyRockwell
MonoCourier New
Type scale10 · 12 · 14 · 17 · 25 · 40 px
Weights500 / 800 / 900
Line height1.3
Tracking0em
Spacing4px grid · regular
Surfaceflat
Accentblock
Separatorrule
Labelsuppercase
Blurnone
Measured contrast — body 15.56:1 light, 16.8:1 dark; secondary text 6.37:1 and 6.79:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Broadside Ink
*
* Heavy black wood type on ecru — a printed notice, not an interface.
*
* One complete product screen, rendered from the token object below —