Vibe Life — Frame Showcase

01 · Palette Cream paper, ink, one accent. grounds + rationed accent

Tokens carry verbatim from design.md. At frame scale they behave as full-bleed grounds with a single accent pill — never as small swatches scattered across a card.

od-bg / cream #f3ecd9 Default frame ground.

od-bg-deep #ece2c9 Embedded stage / quiet alt ground.

od-surface / paper #faf6ec Cards, pills, lifted surfaces.

od-fg / ink #161513 Outlines, shadow, inverse ground.

od-accent / peach #f0a87a Editorial voltage — highlight pill.

od-agent-voice / butter #f0c860 Selection, voice agent, active.

od-agent-text / moss #5b7a4a Text agent, calm-ready.

od-agent-video / sky #b8c8d8 Avatar agent, cool counterweight.

od-agent-edit / plum #6b4a7a HyperFrames edit, twilight review.

od-accent-strong #e88c5a Urgent editorial punctuation.

od-muted #2a2622 Secondary copy, dense labels.

od-line #1b1a18 Heavy outline, dark-surface border.

02 · Typography Two ramps, one italic word. reading + display · floor 1.4cqw

Space Grotesk for display and body, Instrument Serif italic for exactly one word per frame, JetBrains Mono uppercase for state and metadata. Live specimens below render at showcase-scale; the spec values are frame-relative (cqw).

wordmark-mega Space Grotesk · 500
30cqw · lh 0.84
identity cover only

Vibe

display-hero Space Grotesk · 500
14cqw · lh 0.92
≤ 3-word claims

Brand memory loaded.

serif-accent-hero Instrument Serif italic
14cqw · lh 0.92
one word per frame

life

section-head Space Grotesk · 500
4.2cqw · lh 1.0
ledger / catalog

Agent Ledger

body Space Grotesk · 400
1.45cqw · lh 1.5
at the floor

A warm editorial studio with a friendly little operating system inside it — cream paper, ink outline, one accent pill at a time.

mono-label-readable JetBrains Mono · 500
1.4cqw · tracking 0.16em
load-bearing mono

Ready · Drafting · Reviewing

03 · Components Atoms, composed. frontmatter tokens · rendered

Every components token in FRAME.md is a CSS class below. Frame Treatments compose these — they never re-state construction.

Pills · chrome · CTA Studio Brand Memory Agents Library Publish Draft-04 Review pass Active Ready Ship package

Highlight pill · the italic word in a frame life brand — inline-baseline against display sans; one per frame —

Cards · sticker shadow · ink outline

Draft Package

— title —

Three-line draft summary, body voice, hand-placed.

Brand Memory

— context —

Embedded well: persistent voice, tone, prior posts.

Agent state · dot inside chip Text · Ready Voice · Drafting Avatar · Rendering Edit · Reviewing

04 · Frame Treatments Seven plates, composed. 16:9 · 1920 × 1080

Each frame renders at a reviewable contact-sheet size with container-type:size so internal cqw values resolve against the frame, not the viewport. Numerals, titles, and copy are placeholders — never invented.

— Tagline —

Vibe life

FRAME.md · v1 16 : 9

1 · Identity Cover identitydensity · sparse

Make the brand memorable.

2 · Oversized Claim editorialdensity · sparse

— Draft Package · Ready —

— Draft title —

— Three lines of body copy, body voice. Hand-placed on a cream stage with one peach action chip below. Sparse, intentional, breathes. —

Review pass · 02 Open pass

3 · Focal Artifact focal-artifactdensity · standard

Agent ledger — 14:02 —

Text

— · —

Voice

— · —

Avatar

— · —

Edit

— · —

Draft 04

— · —

Take 02

— · —

Scene 01

— · —

Cut 03

— · —

Memory

— · —

Queue

— · —

Preview

— · —

Handoff

— · —

4 · Agent Ledger data / ledgerdensity · dense-exception

— Brand Memory —

— Ribbon Phrase · Studio · Brand Memory · Agents —

Publish queue · 03

5 · Ribbon Break chrome / catalogdensity · sparse

— Live —

Voice take · pass 02

— Selected · Butter row —

— Variant · Calm —

— Variant · Bright —

— Variant · Quiet —

6 · Live Console brand-signaturedensity · standard

— Brand memory · posts —

— figure —

loaded

7 · Stat Closer closerdensity · sparse

05 · Principles Squint, silence, restraint. do / don't · at frame scale

Do

Center the wordmark, the claim, the focal artifact, the closer.
Fire one italic serif word per frame, inside one accent pill.
Keep the ink line and the flat hard shadow on every lifted surface.
Let cream paper breathe — sparse frames read 55–75% empty.
Vary the anchor; use the ledger or the ribbon to break a run.
Express gravity through ink outline + flat shadow.

Don't

Don't italicize the display sans — italic comes from Instrument Serif.
Don't fire two accent pills at full strength on the same frame.
Don't park a kicker chip in the top-left of every frame.
Don't render a treatment as nav + hero + features — the frame is a plate.
Don't use soft blur on chrome. Blur is for dimensional artifacts only.
Don't fabricate metrics — hold numerals as — figure — until the script.