Binu Pradeep

Design system

Warm editorial, hard shadows.

One theme for the homepage, résumé, docs and blog. Every value below is rendered from the real tokens in tokens.css, so this page can never drift from the site. Flip the theme toggle to check dark.

01 Principles

Minimal

Few colours, one idea per section. If it doesn't help the reader, remove it.

Warm & tactile

Cream paper, dotted grain, ink borders and hard offset shadows instead of blur.

A little playful

The chrome has personality (the face, the glasses). The content stays direct.

Influences: Radix and Tailwind (colour scales), Material and Primer (token tiers), Carbon (type scale), Polaris (spacing and docs), neo-brutalism (hard shadows).

02 Colour

Brand

Lens--lensTeal from the logo. Tags, timeline dots, progress bar.
Orange--orangeOrange from the logo. Link underlines, highlights, hover blobs.
Accent--accentRust. Primary hover, emphasis, blockquote rules.
Teal--tealEyebrows, kickers, secondary labels (text-safe).

Surface & text

Background--bgPage. Cream in light, warm near-black in dark.
Card--cardRaised surfaces: cards, chips, buttons.
Foreground--fgText and all strong borders and rules.
Muted--mutedSecondary text, metadata, captions.
Line--lineHairlines and dividers.
Highlight--hiMarker-pen underlay behind key words.

Status

Success--ok
Warning--warn
Danger--danger
Info--info

Scales (primitives)

Each hue has 12 steps, generated in OKLCH by scripts/gen-scales.mjs. Step roles follow Radix: 1–2 backgrounds, 3–5 components, 6–8 borders, 9–10 solid fills, 11–12 text. Steps 11 and 12 are searched until they pass contrast (APCA Lc 60 / 90 and WCAG 4.5 / 7) on the page background, in each theme.

sandNeutral. Cream paper and warm ink: backgrounds, borders, text.
1
2
3
4
5
6
7
8
9
10
11
12
rustAccent. Emphasis, hover states, links in dark.
1
2
3
4
5
6
7
8
9
10
11
12
tealLogo lens. Tags, dots, labels (step 11 for text).
1
2
3
4
5
6
7
8
9
10
11
12
orangeLogo frame. Underlines, highlights (step 5 is the marker pen).
1
2
3
4
5
6
7
8
9
10
11
12

Rule: use roles (var(--accent)), never raw hex. Roles remap per theme; hex doesn't. Teal and orange #00ADB5 / #FF7F11 come from the logo.

03 Typography

Fraunces for headings, Inter for body, JetBrains Mono for code. Scale is roughly ×1.25.

Display--text-4xlHero H1 only
Minimalism wins
Title--text-3xlDocs and blog H1
Page title
Heading--text-xlH2
Section heading
Subheading--text-lgH3
Card or job title
Body--text-baseParagraphs
Direct and actionable. Avoid filler.
Small--text-smSecondary info
Metadata, dates, captions
Caps label--text-xsUppercase, +0.14em tracking
EYEBROW · TAG
Code--text-smInline and blocks
docker compose up -d

04 Space, radius, borders

Space (4px base)

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
--space-16

Radius

xs6px
sm8px
md10px
lg12px
xl14px
pill∞px

Border widths

thin1px · dividers
base1.5px · cards, tags
thick2px · rules, buttons

05 Elevation & motion

No blur. Light theme: depth is a hard offset shadow in warm ink (--shadow = sand-12, never pure black). Dark theme: black vanishes on near-black, so the offset becomes a low-contrast rust (rust-6) and raised cards also get a lighter surface (--card-raised), the way Material lifts surfaces in dark mode. Interactive cards lift by --lift; buttons lift 1px and press back flat on click.

--shadow-1Small controls
--shadow-2Cards on hover
--shadow-3Hero imagery
--dur-fast .15s hover, press
--dur-base .3s badges, fades
--dur-slow .5s decorative

Everything that moves must stop under prefers-reduced-motion.

06 Components

Buttons

PrimarySecondary With icon

Cards

Interactive card

Hover me: lifts up-left and gains a hard shadow.

Static card

Same border, radius and padding, no hover effect.

Tags & chips

Quote

Minimalism and simplicity are the best tools to communicate ideas.

Binu Pradeep

Links, highlight, code

Body text with a link (orange underline in docs), a highlighted phrase, and inline code.

services:
  caddy:
    image: caddy:latest
    restart: unless-stopped

07 Using it