5 colours · light

Gazette broadsheet

Newsprint cream + soft black + broadsheet red, with one classifieds blue.

From the gazette synthesis — a newspaper palette that does both display and body. Newsprint cream as the paper, soft black for body type, a broadsheet red for nameplate and lead-story dropcap, a warm gold for classifieds and price tags, and a muted blue for the misregistered second-ink runs.

udaysinh

Swatches · click any hex to copy

bgNewsprint

inkSoft black

accentBroadsheet red

highlightClassifieds gold

secondaryMisregister blue

In use · the palette applied to three mocks

Chapter 01

A confident heading set in the ink.

Body text runs in the ink-2 role at a comfortable measure. Accent earns its keep on links and nowhere else.

Aside · in the mute

Card

Sample card with a strong call to action.

Short supporting text that explains what the action does.

PrimarySecondary →

~/notes.md

function greet(name) {
  // the lab said hi
  return `hello, ${name}`;
}

Contrast · WCAG 2 ratios for key role pairs

Pair	Sample	Ratio	Rating
bg↔ink	Sample text	15.31 : 1	AAA
bg↔accent	Sample text	5.49 : 1	AA
bg↔secondary	Sample text	5.47 : 1	AA

AAA ≥ 7 · AA ≥ 4.5 · AA Large ≥ 3 · fail < 3

Exports · copy-paste ready

CSS variables

:root {
  --bg: #F1ECE0;
  --ink: #16161A;
  --accent: #B5251C;
  --highlight: #D4A12E;
  --secondary: #3B5BA9;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#F1ECE0",
      "ink": "#16161A",
      "accent": "#B5251C",
      "highlight": "#D4A12E",
      "secondary": "#3B5BA9",
    },
  },
},

Hex array

["#F1ECE0", "#16161A", "#B5251C", "#D4A12E", "#3B5BA9"]

Links

· From the gazette design ↗