6 colours · light

Scrapbook kraft

Kraft board + a sticky-note rainbow — yellow, pink, and one marker red.

The scrapbook design's whole-room palette. Kraft brown is the board, and five accents sit on top — Post-it yellow, masking-tape pink, marker red, highlighter green, and a black for the inked annotations. Use for anything that wants to read as handmade and busy, not corporate and clean.

udaysinh

Swatches · click any hex to copy

bgKraft board

inkMarker black

accentPost-it yellow

secondaryTape pink

highlightMarker red

muteHighlighter

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	7.75 : 1	AAA
bg↔accent	Sample text	1.50 : 1	fail
bg↔mute	Sample text	1.32 : 1	fail

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

Exports · copy-paste ready

CSS variables

:root {
  --bg: #C9B68F;
  --ink: #2A2418;
  --accent: #F8E060;
  --secondary: #FFB8C8;
  --highlight: #C5331C;
  --mute: #88AA66;
}

Tailwind config

// tailwind.config
theme: {
  extend: {
    colors: {
      "bg": "#C9B68F",
      "ink": "#2A2418",
      "accent": "#F8E060",
      "secondary": "#FFB8C8",
      "highlight": "#C5331C",
      "mute": "#88AA66",
    },
  },
},

Hex array

["#C9B68F", "#2A2418", "#F8E060", "#FFB8C8", "#C5331C", "#88AA66"]

Links

· From the scrapbook design ↗