thisdesign.space

4 colours · light

Risograph fluo

Off-white paper, soft black, one fluorescent orange that does all the work.

A two-ink riso palette with the orange doing the misregistration work — the ink doesn't perfectly align, and the brain reads that as printed-zine warmth. The grey-muted serves as the second ink for body copy and metadata; the orange is reserved for display type and the misregistered shadow.

byudaysinhudaysinh

Swatches · click any hex to copy

bgNewsprint
inkSoft black
accentFluo orange
muteCool grey

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

PairSampleRatioRating
bg↔inkSample text15.28 : 1AAA
bg↔accentSample text2.90 : 1fail
bg↔muteSample text3.14 : 1AA Large

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #F4F0E4;
  --ink: #1A1A1A;
  --accent: #FF4D2E;
  --mute: #8A8782;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#F4F0E4",
      "ink": "#1A1A1A",
      "accent": "#FF4D2E",
      "mute": "#8A8782",
    },
  },
},

Hex array

["#F4F0E4", "#1A1A1A", "#FF4D2E", "#8A8782"]

Links