Grid & Layout · Creator Design System

Composition

A 12-column fluid grid, a golden-ratio split for hero and article pages, and real media canvases with the platform safe area baked in.

col-12

col-8

col-4

col-6

col-3

.grid-12 · collapses to 6-wide at 62rem, full-width at 40rem — no breakpoint classes in templates

main · 1.618fr

rail · 1fr

.split-phi — the sidebar never competes with the main column

ep.07 · 14:22 Rebuilding my Ghost theme from tokens

.canvas-thumb 16:9 · content lives in .canvas__safe

One query,
6 hours saved Shorts

.canvas-short 9:16

Swarnıl

The build is the story

.frame-4 over .pattern-blueprint — the end-card lockup

07b

The frame as an interaction

.frame-hover holds the brackets back until you point at the thing, then closes them in on it — the camera finding focus. It composes onto .frame and .frame-4 with no extra markup, and onto anything that can take a frame at all.

Foundation

Point at this card

Four corners ease in from the outside. Tab to it and they do the same.

.frame-4.frame-hover.frame-signal — the record light, on approach

.frame-sm.frame-hover on .btn — brackets sized down so they bracket the label instead of swallowing it

.frame-lg.frame-hover — two corners, media scale. Default colour is the craft amber. Note: not composable with .pattern — both paint on ::before