The hand

The site is drawn, not ruled. There are four treatments; choose by what the element is.

Treatment	What it looks like	Use it on
Pen frame	A wandering, slightly broken pen line around a box with 8px corners, gold on hover	Outline cards on `bg` (essay, case study, path, series, most popular, course module rows), the executive summary, charts and figures, outline buttons
Torn paper	A filled `panel` card whose four edges are torn, with an ink blot at each corner and no border	Cards that are "a note" rather than a link: About topics, work capabilities, course portfolio cards, the course notepad, beta and draft notes, the "Before the next step" box, report and try-it promos
Torn band	Full-width `band` charcoal with torn top and bottom edges	The newsletter band and From the channel
Printed sheet	Square light paper, a soft shadow, lifted at one corner	The newsletter's sample issue stack

Cards come in two tiers. Small titles are 21px (essays, Most popular, course portfolio cards), large are 25px (case studies, paths, series, capabilities, About topics). Every card has 26 / 24 / 24 padding.

The pen frame draws only on rounded boxes. Plain hairlines (line) remain for rules between rows, the header and the footer. Pills (radius-pill) are for the BETA, NEW and DRAFT tags, toggles and the theme switch. Circles (radius-round) are for icon controls, module numbers and the play button.

Outline card

Pen frame

A wandering, broken pen line drawn around the box; gold on hover. Essay, case-study, path and series cards.

Pen frame

A prediction ledgerBets you wrote down before you knew the answer, and how many came true.
A working prototypeOf one idea, that a real person has tried.
An evalThat says what “good” means for it, and a score you can rerun.

Torn paper

From the channel

Torn band

Charcoal in both themes, torn at the top and the bottom.

Torn band

from: Bets & Shipsto: youTue 09:00

The latest essay

Printed sheet: the newsletter’s sample issue

Check your work

At least 15 items, from real weeks.
Each decision names the options you did not choose.

Keep this. Your decisions column is the first draft of your case study.

Notepad: torn paper with the binding holes along the top

Shadows

Shadows mean "this floats or is lifted":

overlays and menus (shadow-overlay);
a card while hovered, as it grows to 1.05 (shadow-lift);
printed paper (shadow-paper);
the video (shadow-video).

A card or button at rest has no shadow.

Token	Value	Use
`shadow-overlay`	0 26px 60px rgba(26,24,21,0.16)	Menus, the share menu, dialogs.
`shadow-lift`	0 14px 32px rgba(0,0,0,0.18)	A card on hover, while it grows to 1.05.
`shadow-paper`	0 1px 1px rgba(26,24,21,0.08), 0 12px 24px -10px rgba(26,24,21,0.22), 18px 26px 26px -18px rgba(26,24,21,0.28)	A printed sheet (the newsletter sample issue), lifted at one corner.
`shadow-video`	0 18px 44px rgba(0,0,0,0.35)	The video player in the channel band.

Pen frame

Torn band

Check your work

Shadows

Get the next one by email