Bold Typography (Poster)

Also called: Poster Typography, Type-led Layout, Broadsheet Bold

Every screen is a printed poster: one enormous condensed word, black ink on newsprint, a yellow highlight and almost no imagery.

“Big-word poster”Editorial & TypographicEra: Letterpress & gig posters → 2020s type-led webBoldEdgySeriousPlayful

Open full screen ↗

bold-typography-poster / landingEN

bold-typography-poster / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

one huge word per screenultra-condensed displayuppercase stacked headlinesblack on newsprinthighlighter yellowtape labelsheavy black rulesno imagery

Bold Typography treats the page like a wall of letterpress posters. Headlines are set in an ultra-condensed black display face at 10–12vw, uppercase and stacked tight so one or two words fill the screen. Contrast is broadsheet-stark — black ink on grey newsprint, whole sections flipped to black, and one highlighter yellow for tape labels and the call to action. Imagery is nearly absent: numbers, rules and words do the work. Components are blunt rectangles with heavy rules rather than outlined cards.

Best for

Campaign, launch and event pages
Music, festival and sports promotions
Bold personal sites and portfolios
Manifestos and brand statements

Avoid for

Data-heavy products that need dense hierarchy
Calm healthcare, finance or luxury contexts
Long reading where giant type becomes noise

✓ Do

Let the headline fill 80–100% of the width; break lines by meaning, 1–3 words per line
Use line-height 0.84–0.9 for Latin display and set it uppercase; Thai display (Kanit 900) 1.15, Thai h2/h3 1.3, never uppercase
Separate sections with 6–10px black rules or by flipping the whole section to black
Keep one highlight colour (yellow) for labels and the primary action only

✕ Don't

Don’t add photos, illustrations or icon grids — type is the image (except a ruled type-only grid and halftone dot fields)
Don’t use rounded corners or soft shadows
Don’t set more than one giant headline per screen

Not to be confused with

Exaggerated Minimalism →Exaggerated Minimalism floats a big word in vast calm whitespace; Poster crams the frame with condensed black type, heavy rules and a yellow highlight.Swiss Modernism 2.0 →Swiss 2.0 uses a wide grotesque over multi-colour fields and an off-axis grid; Poster is condensed, uppercase, black-and-yellow and fills the width.Kinetic Typography →Kinetic type moves and lives on a dark stage; Poster type is static, printed-looking ink on newsprint.

On mobile

One giant word per screen still works on phones: titles at 3–4rem uppercase condensed, the featured card becomes a black poster with yellow type, and the tab bar is a black strip with a yellow active block.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBig Shoulders Display · 800/900

The quick brown fox

Heading · ThaiKanit · 800/900

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinArchivo · 400/600/800

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 400/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Kanit’s heavy, narrow-shouldered weights are the closest Thai answer to a condensed poster face; Bai Jamjuree’s squarish loopless forms echo Archivo’s engineered grotesque in body text.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`3px`
Shadow	`none`
Display	`clamp(4rem, 10.5vw, 9.5rem)`
Motion	`120ms steps(2, end)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Bold Typography (Poster) (bold-typography-poster) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&family=Archivo:wght@400;600;800&family=Kanit:wght@800;900&family=Bai+Jamjuree:wght@400;600;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #ECE8DE;
  --foreground: #0B0B0B;
  --card: #F6F3EC;
  --card-foreground: #0B0B0B;
  --popover: #F6F3EC;
  --popover-foreground: #0B0B0B;
  --primary: #0B0B0B;
  --primary-foreground: #FFE500;
  --secondary: #FFE500;
  --secondary-foreground: #0B0B0B;
  --muted: #DFDACD;
  --muted-foreground: #4F4B44;
  --accent: #DFDACD;
  --accent-foreground: #0B0B0B;
  --destructive: #C8231A;
  --border: #0B0B0B;
  --input: #0B0B0B;
  --ring: #0B0B0B;
  --chart-1: #0B0B0B;
  --chart-2: #E6C800;
  --chart-3: #7A766C;
  --chart-4: #C8231A;
  --chart-5: #B8B2A3;
  --sidebar: #F6F3EC;
  --sidebar-foreground: #0B0B0B;
  --sidebar-primary: #0B0B0B;
  --sidebar-primary-foreground: #FFE500;
  --sidebar-accent: #DFDACD;
  --sidebar-accent-foreground: #0B0B0B;
  --sidebar-border: #0B0B0B;
  --sidebar-ring: #0B0B0B;
}

.dark {
  --background: #0B0B0B;
  --foreground: #ECE8DE;
  --card: #161616;
  --card-foreground: #ECE8DE;
  --popover: #161616;
  --popover-foreground: #ECE8DE;
  --primary: #FFE500;
  --primary-foreground: #0B0B0B;
  --secondary: #FFE500;
  --secondary-foreground: #0B0B0B;
  --muted: #222222;
  --muted-foreground: #A9A498;
  --accent: #222222;
  --accent-foreground: #ECE8DE;
  --destructive: #FF5A4E;
  --border: #ECE8DE;
  --input: #ECE8DE;
  --ring: #FFE500;
  --chart-1: #ECE8DE;
  --chart-2: #FFE500;
  --chart-3: #7A766C;
  --chart-4: #FF5A4E;
  --chart-5: #4A4A4A;
  --sidebar: #161616;
  --sidebar-foreground: #ECE8DE;
  --sidebar-primary: #FFE500;
  --sidebar-primary-foreground: #0B0B0B;
  --sidebar-accent: #222222;
  --sidebar-accent-foreground: #ECE8DE;
  --sidebar-border: #ECE8DE;
  --sidebar-ring: #FFE500;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Bold Typography (Poster) (bold-typography-poster) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&family=Archivo:wght@400;600;800&family=Kanit:wght@800;900&family=Bai+Jamjuree:wght@400;600;700&display=swap
 */
@theme {
  --color-bg: #ECE8DE;
  --color-surface: #F6F3EC;
  --color-surface-2: #DFDACD;
  --color-text: #0B0B0B;
  --color-text-muted: #4F4B44;
  --color-primary: #0B0B0B;
  --color-on-primary: #FFE500;
  --color-secondary: #FFE500;
  --color-on-secondary: #0B0B0B;
  --color-accent: #FFE500;
  --color-border: #0B0B0B;
  --color-success: #1B7A3A;
  --color-warning: #8F6400;
  --color-danger: #C8231A;
  --color-chart-1: #0B0B0B;
  --color-chart-2: #E6C800;
  --color-chart-3: #7A766C;
  --color-chart-4: #C8231A;
  --color-chart-5: #B8B2A3;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Big Shoulders Display", "Kanit", system-ui, sans-serif;
  --font-body: "Archivo", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

.dark {
  --color-bg: #0B0B0B;
  --color-surface: #161616;
  --color-surface-2: #222222;
  --color-text: #ECE8DE;
  --color-text-muted: #A9A498;
  --color-primary: #FFE500;
  --color-on-primary: #0B0B0B;
  --color-secondary: #FFE500;
  --color-on-secondary: #0B0B0B;
  --color-accent: #FFE500;
  --color-border: #ECE8DE;
  --color-success: #4CC774;
  --color-warning: #FFB83D;
  --color-danger: #FF5A4E;
  --color-chart-1: #ECE8DE;
  --color-chart-2: #FFE500;
  --color-chart-3: #7A766C;
  --color-chart-4: #FF5A4E;
  --color-chart-5: #4A4A4A;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Bold Typography (Poster) (bold-typography-poster). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&family=Archivo:wght@400;600;800&family=Kanit:wght@800;900&family=Bai+Jamjuree:wght@400;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9098,
            0.8706
          ],
          "hex": "#ece8de"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9529,
            0.9255
          ],
          "hex": "#f6f3ec"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8745,
            0.8549,
            0.8039
          ],
          "hex": "#dfdacd"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.2941,
            0.2667
          ],
          "hex": "#4f4b44"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.4784,
            0.2275
          ],
          "hex": "#1b7a3a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.3922,
            0
          ],
          "hex": "#8f6400"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1373,
            0.102
          ],
          "hex": "#c8231a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.7843,
            0
          ],
          "hex": "#e6c800"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.4627,
            0.4235
          ],
          "hex": "#7a766c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1373,
            0.102
          ],
          "hex": "#c8231a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.698,
            0.6392
          ],
          "hex": "#b8b2a3"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0863,
            0.0863
          ],
          "hex": "#161616"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.1333,
            0.1333
          ],
          "hex": "#222222"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9098,
            0.8706
          ],
          "hex": "#ece8de"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.6431,
            0.5961
          ],
          "hex": "#a9a498"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0431,
            0.0431
          ],
          "hex": "#0b0b0b"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9098,
            0.8706
          ],
          "hex": "#ece8de"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7804,
            0.4549
          ],
          "hex": "#4cc774"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7216,
            0.2392
          ],
          "hex": "#ffb83d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3059
          ],
          "hex": "#ff5a4e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9098,
            0.8706
          ],
          "hex": "#ece8de"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.898,
            0
          ],
          "hex": "#ffe500"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.4627,
            0.4235
          ],
          "hex": "#7a766c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3059
          ],
          "hex": "#ff5a4e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2902,
            0.2902
          ],
          "hex": "#4a4a4a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 3,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Big Shoulders Display",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Archivo",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 900
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 120,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!