3 · Pages (every screen, every button)
Home / Landing
public#lens-landing/ (home)
Marketing front door — a long vertical scroll, top→bottom. Most design-dense page.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Hero
Kicker · H1 · lede · CTA row · trust line · guitar SVG art.
Mission band
"The guitar’s story is scattered — we’re bringing it home."
"One dataset, many ways in" feature tiles
Explore graph / Browse / Tree / Map / Add — circular line-icon + label (row of tiles).
Mission / Vision / Values
Mission + Vision cards + 6 value cards.
"What you can do"
"Open to everyone" tiles + gold "Become a member — free" callout + "Members also get" tiles.
Pick-a-Lens band (dark)
Rotating aperture icon + lens picker grid + "skip".
About Us
4 founder cards (photo/monogram + role + bio): Jamie, Roberta, Mark, Rudi.
Closing CTA + footer
Create account / Start exploring / Add CTAs, then global footer.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Create your free account (signed-out only) | opens Auth modal (signup) |
| Start exploring → | → Browse (All lens) |
| ＋ Add to the tree | → Add/Submit |
| Lens card | applies that lens and → Browse |
| Become a member — free | opens Auth modal (signup) |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Hero | Kicker · H1 · lede · CTA row · trust line · guitar SVG art. | Sec 4.1, Sec 1.6 illustration, Sec 5 hero/CTA band |
| Mission band | "The guitar’s story is scattered — we’re bringing it home." | Sec 5 content blocks |
| "One dataset, many ways in" feature tiles | Explore graph / Browse / Tree / Map / Add — circular line-icon + label (row of tiles). | Sec 5 feature tile (.feat), Sec 1.4 icons |
| Mission / Vision / Values | Mission + Vision cards + 6 value cards. | Sec 5 mvv block (.mvv-*), value card (.val) |
| "What you can do" | "Open to everyone" tiles + gold "Become a member — free" callout + "Members also get" tiles. | Sec 5 cards, Sec 8 gated state |
| Pick-a-Lens band (dark) | Rotating aperture icon + lens picker grid + "skip". | Sec 7 lenses, Sec 2 dark accents, Sec 1.4 icon |
| About Us | 4 founder cards (photo/monogram + role + bio): Jamie, Roberta, Mark, Rudi. | Sec 5 team card (.team-card), Sec 1.6 headshot treatment |
| Closing CTA + footer | Create account / Start exploring / Add CTAs, then global footer. | Sec 5 CTA band |
Browse
public#view-browse/ · /#browse
Search & scan all publicly-visible entities (tiles).
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
stickySTICKY header (frozen)
[admin layer bar] · lens pills · search input · Free-Facts banner + "What do the labels mean?". Stays pinned while the grid scrolls.
Lens spotlight / entry blocks
Per-lens explainer + curated starter content (glossary, picks).
Card grid
Entity tiles (.ecard): hero image · type tag · name · summary · credibility badge · "brand page" chip. Infinite scroll. (Empty → "Nothing found … Add it to the family tree".)
inlineDetail panel (opens in place of the grid)
Full Entity Profile renders inline when a tile is tapped (see the Entity Profile screen).
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Lens pill | re-filters/emphasises results for that lens |
| Search field | server-side search (debounced) → refresh grid |
| What do the labels mean? | opens the credibility-labels legend |
| Tile (card) | expands the full Entity Profile below the row |
| ＋ Add it to the family tree (empty state) | → Add/Submit |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| STICKY header (frozen) | [admin layer bar] · lens pills · search input · Free-Facts banner + "What do the labels mean?". Stays pinned while the grid scrolls. | Sec 4.2, Sec 5 buttons/chips, Sec 6 layer bar |
| Lens spotlight / entry blocks | Per-lens explainer + curated starter content (glossary, picks). | Sec 5 content blocks, Sec 7 lenses |
| Card grid | Entity tiles (.ecard): hero image · type tag · name · summary · credibility badge · "brand page" chip. Infinite scroll. (Empty → "Nothing found … Add it to the family tree".) | Sec 5 tile (.ecard) + Sec 1.5 kind tag/icon · Sec 8 empty state |
| Detail panel (opens in place of the grid) | Full Entity Profile renders inline when a tile is tapped (see the Entity Profile screen). | Sec 4.4 profile template |
Entity Profile (detail card)
public(dynamic)reused on Browse/Graph/Map/Tree/History + /m/<slug>
The one comprehensive profile template, reused everywhere a maker/brand/entity opens. Header on top, then a two-column body.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Header
Hero image (if any) · name + ✓verified · kind chip.
Credibility + ranking
Credibility badge · tier badge + star/score line.
Summary
1–2 sentence bio + inline ✎ fix button.
Action row
Open brand page · Claim · 🔗 Copy link · ☆ Watch · 🖼 Media · ✎ Correction (see buttons).
inlineUnder-review markers
Neutral dispute/status markers (only if any).
"Also appears on"
Links to Graph / Map / Timeline for this entity.
Specifications
Attribute chips (per-lens, per-tier gated) + per-field ✎ fix.
Tags & skills · Verifications
Endorsed tags (verified highlighted); verification chips.
Media gallery + Connections table
Image gallery (→lightbox); typed relationship rows.
adminEditor controls (editors only)
credibility + profile-status dropdowns + Save.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Open brand page → (orgs) | → Brand micro-site for this org |
| ＋ Claim this profile | submits an ownership claim (editor reviews) |
| 🔗 Copy link | copies the distinct URL guitarfamilytree.com/m/<slug> |
| ☆ Watch | adds/removes from the member Watchlist |
| 🖼 Manage media (owner/editor) | opens the Media manager drawer |
| ✎ Suggest a correction / dispute | opens the Correction/Dispute modal |
| ✎ (per field/summary) | opens the correction modal pre-targeted to that field |
| ★ rating | records a star rating (feeds ranking) |
| Also on Graph/Map/Timeline | switches to that view focused on this entity |
| Editor: Save status | sets credibility label + profile status |
| gallery image | opens the lightbox |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Header | Hero image (if any) · name + ✓verified · kind chip. | Sec 4.4, Sec 1.5 kind, Sec 1.6 imagery |
| Credibility + ranking | Credibility badge · tier badge + star/score line. | Sec 5 badges (.tierbadge), Sec 7 verification/tier |
| Summary | 1–2 sentence bio + inline ✎ fix button. | Sec 5 content |
| Action row | Open brand page · Claim · 🔗 Copy link · ☆ Watch · 🖼 Media · ✎ Correction (see buttons). | Sec 5 buttons matrix |
| Under-review markers | Neutral dispute/status markers (only if any). | Sec 5 badges, Sec 8 states |
| "Also appears on" | Links to Graph / Map / Timeline for this entity. | Sec 5 nav links |
| Specifications | Attribute chips (per-lens, per-tier gated) + per-field ✎ fix. | Sec 5 chips, Sec 7 attribute groups |
| Tags & skills · Verifications | Endorsed tags (verified highlighted); verification chips. | Sec 5 badges |
| Media gallery + Connections table | Image gallery (→lightbox); typed relationship rows. | Sec 5 media/lightbox, Sec 6 (edge nomenclature) |
| Editor controls (editors only) | credibility + profile-status dropdowns + Save. | Sec 5 form controls |
Explore graph
member#view-explore/#explore
Interactive connection graph (Cytoscape). Left filter rail · big centre canvas · right selection panel.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Toolbar
Fit view · Re-arrange · "Always show edge labels" toggle · hover/tap hint.
admin[admin] Layer bar
Super-admin only — which visibility layers to show.
Kind filter checkboxes
Left rail — show/hide each entity kind.
Graph canvas
Centre — nodes (per-kind color/label) + typed edges. Centres on the configured hub.
Selection panel (#selPanel)
Right — opens the Entity Profile for the tapped node.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Fit view | zooms to fit the whole graph |
| Re-arrange | re-runs the layout on the visible nodes |
| Always show edge labels | toggles relationship labels on all edges |
| Kind checkbox | shows/hides that entity kind (+re-flows) |
| [admin] Layer toggle / Public view / Show all | reloads the graph for the selected layers |
| Node tap | opens its profile + pulls in its direct connections |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Toolbar | Fit view · Re-arrange · "Always show edge labels" toggle · hover/tap hint. | Sec 5 buttons, Sec 6 graph |
| [admin] Layer bar | Super-admin only — which visibility layers to show. | Sec 6 layer overlay/toggle bar |
| Kind filter checkboxes | Left rail — show/hide each entity kind. | Sec 5 checkboxes, Sec 1.5 kind colors |
| Graph canvas | Centre — nodes (per-kind color/label) + typed edges. Centres on the configured hub. | Sec 6 graph (nodes/edges/labels/states) |
| Selection panel (#selPanel) | Right — opens the Entity Profile for the tapped node. | Sec 4.4 profile |
Family Tree (Timeline)
member#view-timeline/#timeline
Radial "Guitar Family Tree": 4 origin traditions → branches (lifespans) → leaves (makers). Controls on top, big tree, detail below.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Hint
Explains trunk/rings/branches/leaves.
admin[admin] Layer bar
Super-admin layer control.
Tradition toggles
Spain · Italy · Germany/Austria/Swiss · Portugal (with counts).
Filters
Name search · From / To year · Grow · Reset · count.
Radial tree (SVG)
Trunk+roots; 25-yr rings; branch=lifetime; leaf=maker (filled=deceased, open=living, dashed=undated).
inlineDetail card
Opens the Entity Profile below the tree.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Tradition chip | shows/hides that tradition’s branch |
| Search / From / To | filters which leaves show |
| ▶ Grow | animates the tree filling in through history |
| Reset | clears filters |
| Leaf | opens that maker’s profile below |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Hint | Explains trunk/rings/branches/leaves. | Sec 5 hint |
| [admin] Layer bar | Super-admin layer control. | Sec 6 |
| Tradition toggles | Spain · Italy · Germany/Austria/Swiss · Portugal (with counts). | Sec 5 chips (.tl-chip) |
| Filters | Name search · From / To year · Grow · Reset · count. | Sec 5 form controls + buttons |
| Radial tree (SVG) | Trunk+roots; 25-yr rings; branch=lifetime; leaf=maker (filled=deceased, open=living, dashed=undated). | Sec 6 timeline (re-spec as radial tree), Sec 1.5 colors |
| Detail card | Opens the Entity Profile below the tree. | Sec 4.4 |
Geographic view (Leaflet). Full-bleed map, detail opens below.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Hint
Explains the map + tiles.
admin[admin] Layer bar
Super-admin layer control.
Map canvas
Colored markers per kind; pan/zoom; popups.
inlineDetail card
Opens the Entity Profile below the map.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Marker | pans to it + opens its profile below |
| [admin] Layer toggle | reloads markers for the selected layers |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Hint | Explains the map + tiles. | Sec 5 hint |
| [admin] Layer bar | Super-admin layer control. | Sec 6 |
| Map canvas | Colored markers per kind; pan/zoom; popups. | Sec 6 map (markers/cluster/popup/tiles) |
| Detail card | Opens the Entity Profile below the map. | Sec 4.4 |
History of the Guitar
public#view-history/#history
Public, story-driven narrative of the guitar; freemium SEO/GEO page. Reads as a long article.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Story sections
Deep roots → Spain/Italy/Germanic/Portugal → "A living tree". Inline links + a per-tradition CTA.
"Explore as data" CTAs
Open tree / Browse / Graph / Map.
inlineDetail card
Inline links open the Entity Profile here.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Inline name link | resolves the maker/brand and opens its profile below |
| 🌳 / Browse / Graph / Map CTA | → that visualization |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Hero | Kicker · H1 · lede. | Sec 5 hero |
| Story sections | Deep roots → Spain/Italy/Germanic/Portugal → "A living tree". Inline links + a per-tradition CTA. | Sec 5 content blocks, Sec 1.8 voice |
| "Explore as data" CTAs | Open tree / Browse / Graph / Map. | Sec 5 CTA band |
| Detail card | Inline links open the Entity Profile here. | Sec 4.4 |
＋ Add to the tree (Submit)
member#view-submit/#submit
Guided submission of a maker/brand — a top-to-bottom form with dedupe + tier-grouped fields.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Step 1 — method
Segmented control: guided form / paste document / bulk.
Step 2 — kind
Choice cards: A brand/company · A person.
Core fields
Name (+"already on file" dedupe panel) · Country · Founded year · Website · Description.
"I represent this" + builder criteria
Self-listing checklist (must qualify without admin).
More details (collapsibles)
City · artists · associations · film/music credits · publications · social.
Enhanced profile (tier-grouped)
Paid-tier fields, stored now, displayed once owner is on the plan.
References · Sources · Consent/terms gate
Repeatable reference rows; sources; required "I accept terms".
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Method / kind selector | switches the form’s mode / kind |
| Name typing | looks up existing record → "already on file" panel |
| I represent this | reveals the builder-criteria checklist |
| ＋ Add reference | adds a reference row |
| Submit | validates + stages a PENDING submission (editor reviews) |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Step 1 — method | Segmented control: guided form / paste document / bulk. | Sec 5 segmented toggle (.sf-mode) |
| Step 2 — kind | Choice cards: A brand/company · A person. | Sec 5 choice cards |
| Core fields | Name (+"already on file" dedupe panel) · Country · Founded year · Website · Description. | Sec 5 form controls, Sec 8 states |
| "I represent this" + builder criteria | Self-listing checklist (must qualify without admin). | Sec 5 checkboxes |
| More details (collapsibles) | City · artists · associations · film/music credits · publications · social. | Sec 5 accordions |
| Enhanced profile (tier-grouped) | Paid-tier fields, stored now, displayed once owner is on the plan. | Sec 5 group label (.grp-lab), Sec 7 tiers |
| References · Sources · Consent/terms gate | Repeatable reference rows; sources; required "I accept terms". | Sec 5 inline rows, Sec 8 gated/required |
Add data (bulk / document)
member#view-add/#add
Bulk spreadsheet + document-intake paths into the holding container.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Tabs
Manual · Bulk spreadsheet · Document intake.
Dropzone
Drag-drop file (.dz) → parsed preview.
Preview grid
Editable cells · column-mapping dropdowns · relationship-guess chips.
Document intake
Paste/upload doc → ✨ Parse with AI → editable draft → Review & stage.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Upload / drop file | parses → preview grid |
| ✨ Parse with AI | extracts entities/relationships into an editable draft |
| Review & stage | stages records as PENDING |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Tabs | Manual · Bulk spreadsheet · Document intake. | Sec 5 tabs (.add-tab) |
| Dropzone | Drag-drop file (.dz) → parsed preview. | Sec 5 dropzone |
| Preview grid | Editable cells · column-mapping dropdowns · relationship-guess chips. | Sec 5 tables/chips (.guess-chip) |
| Document intake | Paste/upload doc → ✨ Parse with AI → editable draft → Review & stage. | Sec 5 buttons, Sec 4.11 review |
Plans & policies
member#view-upgrade(account menu)
The 6-tier maker-pays ladder + trust rules + custom-quote.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Tier cards
Row of cards: Listing(free) · Curated · Full Story · Community(soon) · Corporate · Institutional + Support tip-jar.
Trust rules
"Paid never affects the facts" — can/can’t-buy list.
Correction-vs-dispute terms
Policy text.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Choose plan (coming soon) | registers interest (payment not live yet) |
| Corporate/Institutional — request a quote | opens a mailto |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Tier cards | Row of cards: Listing(free) · Curated · Full Story · Community(soon) · Corporate · Institutional + Support tip-jar. | Sec 5 cards, Sec 7 tiers |
| Trust rules | "Paid never affects the facts" — can/can’t-buy list. | Sec 5 content |
| Correction-vs-dispute terms | Policy text. | Sec 5 content |
Brand / maker micro-site
public#view-brand(from an org profile)
Dedicated branded page — the DARK "blueprint" theme.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Hero
Logo lockup (or fallback) + name.
Spec rows · pull-quotes · motto · footer
Editorial brand content.
overlayEditor drawer (owner/editor)
WYSIWYG + Import-HTML editor — slides in from the side.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Claim this brand | submits an ownership claim |
| Open brand page editor (owner/editor) | opens the editor drawer |
| Save / Publish (editor) | persists the brand page + revision |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Back bar | ← back link. | Sec 5 breadcrumb (bp-bar) |
| Hero | Logo lockup (or fallback) + name. | Sec 9.5 logo fallback, dark theme |
| Spec rows · pull-quotes · motto · footer | Editorial brand content. | Sec 4.5, Sec 5 quote card (.bp-q) |
| Editor drawer (owner/editor) | WYSIWYG + Import-HTML editor — slides in from the side. | Sec 5 drawer (#editor) |
Review queue
editor/admin#view-review(account menu → Admin)
Where editors approve community contributions — stacked sections of tables.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Holding-container records
Staged records → approve/reject/merge.
Ownership claims
Approve → set owner (unlocks brand editing).
Community submissions
Approve → publish entity + connections + badge.
Corrections / Disputes
Approve correction (then edit) / set neutral dispute status + note + severity.
Source referrals · Document intake · Verifications
Referral invites; ✨ Parse/stage; one-click verify.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Approve / Reject / Merge | publishes / rejects / merges the staged item |
| Set dispute status | records a neutral public status + note + severity |
| Verify / Reject (verification) | resolves a verification request |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Holding-container records | Staged records → approve/reject/merge. | Sec 5 tables, Sec 8 status cells |
| Ownership claims | Approve → set owner (unlocks brand editing). | Sec 5 tables |
| Community submissions | Approve → publish entity + connections + badge. | Sec 5 tables |
| Corrections / Disputes | Approve correction (then edit) / set neutral dispute status + note + severity. | Sec 5 tables/badges |
| Source referrals · Document intake · Verifications | Referral invites; ✨ Parse/stage; one-click verify. | Sec 4.11 |
Visibility layers
super-admin#view-visibility(account menu → Admin)
Control what is public (core) vs staged, per layer. Ring editor on the left, assignment on the right.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
Per-layer summary cards
Each layer: PUBLIC/internal · entity count · sample names.
Concentric-ring editor
Draggable layer rows (.vlrow) + grip; data-point mini-dots (.vlmini).
Assignment
Drag lenses/kinds/fields/edges into a layer.
Tier + paid toggles
Per-tier visibility toggles; per-layer "paid" toggle.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Drag a chip onto a ring | assigns that lens/kind/field/edge to the layer |
| Reorder layer rows | changes the ring order |
| Per-tier toggle / paid toggle / ＋ Add layer | expose/hide tier · mark layer paid · create a layer |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| Per-layer summary cards | Each layer: PUBLIC/internal · entity count · sample names. | Sec 5 cards, Sec 6 visibility |
| Concentric-ring editor | Draggable layer rows (.vlrow) + grip; data-point mini-dots (.vlmini). | Sec 6 visibility (ring editor) |
| Assignment | Drag lenses/kinds/fields/edges into a layer. | Sec 6 |
| Tier + paid toggles | Per-tier visibility toggles; per-layer "paid" toggle. | Sec 5 toggles |
Users & privileges
admin#view-users(account menu → Admin)
Manage accounts & roles.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
User table
Email · roles · approve? · last sign-in · joined · manage privileges.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Grant / revoke (editor/admin/super) | changes a user’s roles (super-admin only) |
| Approve | marks the account approved |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| User table | Email · roles · approve? · last sign-in · joined · manage privileges. | Sec 5 tables (dense, action cells) |
Super-Admin Dashboard
super-admin#view-dashboard(account menu → Admin)
KPIs, Google Analytics, graph-centre control.
Screen layout — boxes sit where they appear on-screen
▸ Global header / top bar — logo · nav · 🔭 lens · auth (see §2)
KPI cards
Row of stat cards — counts (entities, pending, etc.).
Google Analytics card
Users/Sessions/Pageviews · daily sparkline · top pages/channels/countries.
Explore-graph centre picker
Pin/clear the graph’s centre entity.
Buttons & outcomes
| Button / control | Outcome when used |
|---|
| Pin centre / Reset to automatic | sets/clears the graph centre point |
| Refresh | reloads dashboard data |
Regions → design elements
| Region / box | Field / content | Design element to create |
|---|
| KPI cards | Row of stat cards — counts (entities, pending, etc.). | Sec 5 dashboard card (.dash-card/.dash-val/.dash-lbl) |
| Google Analytics card | Users/Sessions/Pageviews · daily sparkline · top pages/channels/countries. | Sec 6 sparkline, Sec 5 cards |
| Explore-graph centre picker | Pin/clear the graph’s centre entity. | Sec 5 form controls |