Deep moss
Primary page background and dark panel edge.
Global visual system
A moss-lit guild hall for visual creators.
Photognome pages now share one reusable layout: persistent top navigation, contextual left navigation, high-contrast woodland panels, responsive 800px content regions, clear access rules, and gnome-themed art that stays out of the text.
Look and feel
Earthy, readable, fantasy-creator UI
Use these tokens across pages so Photognome feels like one product instead of unrelated screens.
Fern leaf
Positive states, links, and active navigation.
Bark brown
Warm borders, footers, and grounded surfaces.
Gem glow
Small bright accents for CTAs and focus rings.
Shared layout
Reusable page shell
All non-landing pages should use the same structure: topbar, contextual sidebar, centered main content, footer, and an edge-only background art layer. Content panels default to min(800px, 100%) to preserve comfortable reading.
- Topbar stays stable between sections.
- Sidebar contents change by top-level section and user type.
- Panels use the same rounded corners, leaf/stick borders, and spacing.
- Locked features are hidden or labeled before interaction.
Top nav
Left nav
800px panel
Footer
Components
Core components future pages can reuse
Search and browse
Search controls use clear labels, visible filters, and permission-aware empty states.
Search patternUpload states
Drag/drop panels show validation, queue state, quota, and visibility before publish.
Upload patternWallet badges
Gems, Ore, and Rank use consistent colored badges and never imply cash value.
Tier rulesSafety controls
Report, block, verification, and warning controls remain easy to find on every flow.
Safety centerGlobal permissions
MVP access matrix
Normal pages must resolve visibility before rendering controls. Staff tools are never exposed in normal user navigation.
| User type | Can access | Cannot access / gating |
|---|---|---|
| Visitor | Home, Join, Login, public profiles, public browse/search, public casting, public market, safety, help, legal. | Dashboard, settings, editor, media manager, wallet, messages, applications, admin, private content. |
| Unpaid User | Dashboard, own settings, profile editor, limited upload, basic search/browse, basic casting, limited messaging, wallet, contributions. | Paid filters, expanded storage, high-volume casting, advanced analytics, business tools. |
| Verified Unpaid | All unpaid features with fewer trust limits, normal messaging/casting where policy allows, broader contribution eligibility. | Paid-only tools, business tools, admin tools. |
| Paid User | Expanded storage, advanced search, saved searches, boosts, more casting tools, analytics, paid support/billing, wallet spending. | Business team tools unless also business; admin tools. |
| Business User | Organization profile, business dashboard, team tools, business casting/listings, higher marketplace volume, invoices, business verification. | Admin tools unless staff. |
| Moderator/Admin | Audited staff dashboard and moderation tools based on staff role permissions. | Normal user pages must not substitute for audited staff tools. |
Art direction
Background art rules
Edges only
Gnomes, cameras, gems, ore, leaves, and studio lights sit near page edges or behind hero art, never beneath dense text.
Readable first
Panels use strong contrast and semi-opaque surfaces only when body text remains easy to read.
Page-specific poses
Casting can show clipboard gnomes, market can show ore carts, school can show lantern classrooms, safety can show signposts.
Implementation notes
Future page starter pattern
<header class="topbar">...</header>
<div class="shell" data-section="casting">
<aside class="sidebar">section links filtered by viewer</aside>
<main class="content">
<section class="panel">800px readable content</section>
</main>
</div>
<footer class="footer">legal, safety, help, contact</footer>