// the sketchbook

Design System

Every token and component the portfolio is built from — colors, type, buttons, tags, cards, menus and the hand-drawn patterns that tie them together. One source of truth.

01

Color palette

Paper
#FDFDFD
background
Ink
#2A2A2A
primary text
Graphite
#3A3A3A
body text
Faded ink
#7A7A70
muted / captions
Marker yellow
#FCE34B
highlight · primary fill
Cyan
#0E93A8
links · accents
Sky fill
#6FD3E0
tape · secondary fill
Magenta
#C0577F
CTA · destructive · AI
Violet
#8A6BCF
category · News
Amber
#C98A2B
category · Career
Dot grid
#DCDCD4
paper texture
Terminal
#22252B
code surface
02

Typography

Caveat
display · headings · signatures
Aa Bb Cc — 1234567890
Patrick Hand
labels · captions · UI accents
Aa Bb Cc — 1234567890
Nunito Sans
body · long-form · accessible
Aa Bb Cc — 1234567890
H1 · 56px
The big hello
H2 · 40px
Section heading
Lead · 30px
A handwritten lead line
Label · 19px
UI label / caption
Body · 17px
Readable body copy for long-form content and paragraphs.
mono / code
const ship = () => deploy(app); // JetBrains Mono
03

Buttons

— hover for the scribble fill & tilt
05

Tags & badges

category badges (solid)
AICodeNewsCareer
stack chips (subtle)
TypeScriptJavaScriptNode.jsNext.jsVue.jsPostgreSQLRedisAWSDDD
sketchy outline chips (hover)
TypeScriptJavaScriptNode.jsNext.jsVue.jsPostgreSQLRedisAWSDDD
filter pills (active / inactive)
highlighter mark
marked like a real highlighter
07

Form inputs

Text field
Select
Focused (cyan ring)
Textarea
08

Cards

pinned index card
Card title

Rough border, offset shadow, a push-pin and a slight tilt that straightens on hover.

[ photo ]
Polaroid
taped photo card
✎ callout / note

For rules, tips and asides — tinted background with a colored sketchy border.

09

Terminal / code block

~/deploy.ts
export async function deploy(app) {
  const build = await pipeline.build(app);
  await pipeline.test(build);
  return { url: app.url, ok: true };
}
10

Doodle elements

hand arrow
circled
scribble ellipse
push-pin
tape
dashed divider
11

Elevation & borders

Sticky note
5px 7px 0 rgba(42,42,42,.10)
Lifted card
7px 9px 0 rgba(42,42,42,.12)
Terminal
8px 10px 0 rgba(42,42,42,.14)