CSS is Awesome

The sketchbook, documented.

Warm paper, sumi ink, and an indigo accent. Chunky serif display + handwritten script where it adds character. One stylesheet — one theme file — zero build step.

Install

Drop the stylesheets into your page. Theme first, then base — so the base can read the tokens.

<!-- in your <head> -->
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="styles.css">

Design tokens

Every visual decision lives in theme.css. Replace that file and the entire system reskins. The base stylesheet never hard-codes a color.

/* theme.css */
:root {
  --paper:         #F7F3EA;
  --ink:           #2A241E;
  --ai:            #1F3A5F;   /* indigo accent */
  --shu:           #C1272D;   /* vermilion seal */
  --font-display: 'DM Serif Display';
  --font-script:  'Caveat';       /* hand-written accents */
}

Grid

The logo is the reference implementation — a three-row grid in a fixed square. Visible pencil construction lines frame the process.

.logo {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--ink);
  overflow: visible;  /* the whole point */
}

On purpose

Most design hides imperfection. This one frames it — the "draft 01" caption is a feature, not an afterthought.

One
Two
Three

Buttons

Three variants: primary, outline, ghost. Warm paper base, ink on hover.

PrimaryOutlineGhostApproved

Cards

Soft-bordered paper slips. The display serif handles their titles.

Hand-drawn

Script accents on connector words add life.

Warm

Paper texture under every surface.

Honest

Overflow stays visible. So do the construction lines.

A brush-underline active state — drawn, not boxed.

Theme