mockup index
Feel-first design pass · warm ivory & deep green · soft edges · the interface melts away and the community stands there.
Files
Mobile
| Page | File | Notes |
|---|---|---|
| Arrival | arrival-mobile.html | Welcome, groves, affinity feed, player. Comfort line melted away. |
| Onboarding — Registration | onboarding-1-registration-mobile.html | Name, email, password. No ID theater; nonprofit trust line. |
| Onboarding — Selection | onboarding-2-selection-mobile.html | Comfort ladder pick + seed tags by popularity. Strict-drop rule stated. |
| Onboarding — Confirmation | onboarding-3-confirmation-mobile.html | Taste summary + affinity preview. |
| Grove — Detail | grove-detail-mobile.html | Universal door: cover work + Join/Request/Accept-invite. Also the invite landing. |
| Grove — Member view | grove-member-mobile.html | Channel world: content, text, clearings (drop-in voice). |
| Work — Image | work-mobile.html | The reference work page. Appreciate pill + quiet download. |
| Work — LoRA | work-mobile-lora.html | Catalog title <base>/<type> - <name>, gallery, specs, triggers. |
| Work — Music | work-mobile-music.html | In-page themed player: play, scrubber, waveform. |
| Work — Video | work-mobile-video.html | 16:9 frame, millennial transport below. |
| Work — Prose | work-mobile-prose.html | Manuscript treatment: cream page, drop cap. |
Desktop
| Page | File | Notes |
|---|---|---|
| Arrival | arrival-desktop.html | Left rail + wide grid; prose card treatment debuts. |
| Onboarding — Registration | onboarding-1-registration-desktop.html | Centered column, trust card under the form. |
| Onboarding — Selection | onboarding-2-selection-desktop.html | Two-column: comfort ladder left, tag cloud right. |
| Onboarding — Confirmation | onboarding-3-confirmation-desktop.html | Summary + wide affinity preview row. |
| Grove — Detail | grove-detail-desktop.html | Cover stage + info column; universal door CTA. |
| Grove — Member view | grove-member-desktop.html | Three-column channel board: content / text / clearings. |
| Work — Image | work-desktop.html | Art stage + info column split. |
| Work — LoRA | work-desktop-lora.html | Catalog title; specs/triggers stack in the info column. |
| Work — Music | work-desktop-music.html | Player card under the cover in the stage. |
| Work — Video | work-desktop-video.html | Transport row under the 16:9 frame. |
| Work — Prose | work-desktop-prose.html | Wide manuscript in the stage column. |
Locked design rules
- Master metaphor: you can't see the forest for the trees — chrome justifies itself against the work and the people, or it goes.
- Palette: warm ivory (#F6F0E1) and deep green (#1C3B2A), gold accent. Soft edges everywhere.
- Controls: "millennial" — visible, complete transport controls. SoundCloud player shape for audio.
- Actions on work pages: interaction forward, not snatching the file — Appreciate owns the green pill.
- Comfort ladder: furniture, not signage. Strict drop — below your level doesn't exist in your forest.
- Discovery: affinity graph ("six degrees of Kevin Bacon") — taste proximity, nothing to game.
- Groves: collections around themes, interests, or friends. Seeder tends the channels. Infinite forest.