Studio Overview — re-theme mockups

Thirty ground-up visual directions for the teacher CRM, all built on the same real page content (the four metrics → Today’s Roster → linked Student Profile) with identical demo data, so they compare cleanly. The seventeen “structural” directions at the top let the metaphor reshape the whole layout — a timeline, a score, a metro map, a departures board, a star chart — not just the palette. The remaining thirteen are colour-and-type variations on one editorial card layout. Open each full-screen to judge it. Pick one — or mix elements — and I’ll build it into the real maud/Tailwind templates.

30 directions · 17 structural · 13 editorial (8 light · 5 dark)

Structural / experimental — the metaphor reshapes the layout
Structural · light

Day Planner

An open ring-bound Filofax spread on warm cream paper. Ruled hourly agenda on the left with a highlighter swipe on “now” and a pen-struck cancellation; a boxed “This Week” summary and a tabbed manila insert card with a repertoire checklist on the right. Tactile, analog.

Open →
Structural · light

Transit Map

The day as a metro line. Lessons are station stops along a single route, “now” is the current-position marker, a cancelled lesson is a closed station, and the four metrics read as a map key. Bold, Vignelli-clean wayfinding.

Open →
Structural · dark

Departures Board

An airport split-flap board. The roster is a departures table — time, student, piece, gate, status — with “Now Boarding” on the live lesson and a perforated boarding-pass stub for the profile. Kinetic, legible.

Open →
Structural · light

Kanban Board

A project board. Lessons are cards filed across Upcoming / In Session / Wrapped / Needs Review columns, and the profile opens as a card-detail drawer with a repertoire checklist. Familiar, operational.

Open →
Structural · dark

Terminal

A retro text-mode TUI. Box-drawing panels on a phosphor-amber CRT, a process-table roster with an inverse-video “now” row, block-character gauges, and an ASCII info pane. Hacker-nostalgic, dense.

Open →
Structural · dark

Blueprint

An architectural drafting sheet. Cyanotype blue with a dimension-lined schedule, leader-line callouts, a corner title block, and a “Detail A” enlargement for the profile. Precise, technical.

Open →
Structural · light

Gallery Wall

A museum exhibition wall. Each student is a framed work with a wall label, the live lesson gets a spotlight, and the profile is a featured-exhibit didactic panel. Hushed, curatorial, generous whitespace.

Open →
Structural · light

Bento Grid

A modular widget mosaic. Asymmetric rounded tiles — a big “Today” hero, metric widgets, a profile tile, a repertoire tile — packed edge to edge like a home screen. Modern, calm, product-native.

Open →
Structural · light

Corkboard

A cork pinboard of paper notes. Roster notes pinned at slight tilts with washi tape, a torn “cancelled” note, and a pinned dossier with a Polaroid for the profile. Handmade, warm, tactile.

Open →
Structural · light

Playbill

A letterpress theatre program. Centered woodtype, “This Evening’s Program” as numbered acts, “Now Performing” on the live lesson, and a featured-student bio panel. Ceremonial, characterful.

Open →
Structural · light

Storyboard

A comic-book page. Lessons are panels with caption boxes and gutters, the live lesson is the splash panel, the cancelled one wears a rubber-stamp, and the profile is a character sheet. Playful, bold.

Open →
Structural · dark

Constellation

A celestial star chart. Students are stars connected into a figure on midnight navy, “now” is the brightest, a cancelled lesson is an occulted star, and the profile is an almanac cartouche. Elegant, quiet.

Open →
Structural · dark

Piano-Roll

The day as a DAW timeline. Lessons are clips on a horizontal time-track with a playhead at “now,” a transport-bar of metric readouts, and a channel-strip inspector for the profile. Screen-native, modern.

Open →
Structural · light

Full-Score

The page built on musical staves. Roster as measures between barlines, a fermata on the “now” lesson, a rest for the cancelled one, a rehearsal-mark profile. Notation drawn as real UI — deeply music-native.

Open →
Structural · dark

Hi-Fi Console

Skeuomorphic 1970s tape deck. Walnut and brushed aluminium, VU-meter metrics, a glowing PLAY transport on the live lesson, a cassette-J-card profile. Tactile, warm, unmistakably audio gear.

Open →
Structural · light

Gazette

A broadsheet front page. Nameplate masthead, multi-column flow with column rules, a drop-cap lede, a “By The Numbers” box, and a box-score student spotlight. Characterful, editorial, unexpected.

Open →
Structural · light

Brutalist

Neo-brutalist poster. Thick black borders, hard offset shadows, clashing flat blocks, an inverted “now” row, oversized Syne type. Loud, confident, contemporary — for a studio with attitude.

Open →
Light
Editorial

Conservatoire

Fine-press recital program. Ivory, high-contrast serif (Fraunces), deep claret, five-line staff hairlines. Timeless, serious.

Open →
Editorial

Vellum Manuscript

Aged hand-inked manuscript. Parchment texture, Cormorant + EB Garamond, sepia ink, wax-seal red. Scholarly, antique.

Open →
Editorial · warm

Terracotta Boutique

Earthy neighbourhood studio. Warm clay paper, Bitter + Newsreader, terracotta + olive, soft corners. Cozy, tactile.

Open →
Playful · soft

Botanical Conservatory

Nurturing garden warmth for young students. Cream, Fraunces + Nunito Sans, sage + terracotta, leaf accents. Gentle.

Open →
Playful

Risograph Recital

Indie concert-poster. Bright cream, Bricolage Grotesque, vermilion + ink-blue overprint, halftone, offset cards. Lively.

Open →
Modern-minimal

Bauhaus Keys

Gallery poster. Off-white, Archivo, flat primary red/ochre/blue color-blocks, zero-radius geometry. Confident, rigorous.

Open →
Modern-minimal

Scandinavian Studio

Calm contemporary minimalism. Airy near-white, Inter Tight, one dusty-blue accent, hairlines, no shadows. Quiet.

Open →
Modern-minimal

Sheet-Music Ledger

Precise, data-forward. Cream, Inter Tight + mono numerals, single ink-red, staff-line grid. Engineered, exact.

Open →
Dark
Atmospheric

Nocturne

Candlelit evening salon. Warm charcoal, Cormorant, gold accent, lacquer panels, glow only on the “now” lesson. Premium.

Open →
Atmospheric

Blue Note Jazz

Mid-century record sleeve. Charcoal, condensed Oswald caps, teal + mustard, film grain, print-registration accent. Cool.

Open →
Atmospheric

Midnight Synth

Contemporary night studio. Deep indigo, Space Grotesk + mono, electric cyan + sparing magenta, fine grid. Sleek, current.

Open →
Luxury

Art Deco Marquee

1920s concert-hall glamour. Jewel teal-navy, Marcellus + Jost, gold + emerald, chevron marquee title, double gold rules. Opulent.

Open →
Playful · academic

Chalkboard Lesson

Warm schoolroom. Slate-green board, chalk-white text, coral/yellow/blue pastels, Caveat wordmark + Inter data. Friendly.

Open →

Notes. Standalone HTML — nothing is wired to the backend yet. Fonts load from Google Fonts (needs a connection). Data (Wren Callahan / Aster Lane Studio, the five students, Elena’s stats) is illustrative seed-style sample data, not invented product metrics. All thirty honour the project’s hard rules: no emoji, one icon set (Heroicons), “participation only” never a grade, curly punctuation, tabular figures, focus-visible rings, and reduced-motion fallbacks.