Course · 06
Frames
Containers that say what a thing is before you read it: a Mac window says “app”, a terminal says “command”, a viewfinder says “footage”, a book says “something you can finish”.
A window is a frame with a job.
Screenshots of the site go here, and they stop looking like screenshots.
01-color.css
02-typography.css
1
2
3
4
2
3
4
/* aliases only */
--accent: var(--signal-500);
--radius-card: 16px;
--dur-2: 200ms;
npm run build:css
✓ built in 412ms
Rec
.vf · .vf-thirds · .vf__rec — corners and the bug, nothing in the middle
Budapest · take 03
Guide
The 120px test
Swarnıl
The book
A spine gradient down the left edge and a striped page edge on the right — that's the entire trick that makes a flat rectangle read as a thing you can finish. Courses, guides, the resume.
.book · .book__cover · .book-shelf — hover tilts it off the shelf