Skip to content

Latest commit

 

History

History
118 lines (77 loc) · 3.17 KB

File metadata and controls

118 lines (77 loc) · 3.17 KB

FPVTrackVote Design System

Product Positioning

FPVTrackVote is not a generic utility app. It should feel like a premium creative cockpit for FPV pilots:

  • Part precision tool
  • Part creator portfolio
  • Part sponsor-ready showcase platform

The experience should communicate control, speed, and craft.

Core Product Lenses

1. Consumer Lens

The app should make browsing tracks feel inspiring, fast, and premium.

  • Strong hero previews
  • Clear difficulty and flow signals
  • Minimal noise before the user sees a compelling build

2. Creator Lens

The app should reduce anxiety while building in 3D.

  • Editing modes must be explicit
  • Recovery controls must be obvious
  • Drafts and published work must feel like owned assets

3. Sponsor Lens

The app should look credible enough for brands to imagine campaigns inside it.

  • Premium surfaces
  • Visible participation metrics
  • Campaign cards that feel like launches, not placeholders

Visual Direction

Tone

  • Dark, cinematic, and intentional
  • Industrial precision without becoming cold
  • Fast and athletic without becoming gamer-chaotic

Color System

  • Base background: deep graphite / blue-black
  • Accent: signal orange
  • Secondary accent: cool cyan
  • Success / community growth: mint
  • Avoid flat white-first layouts and random saturated colors

Surface Rules

  • Prefer layered translucent cards over plain gray blocks
  • Use rounded corners generously, but keep spacing disciplined
  • Strong contrast for key actions, quiet contrast for metadata

Typography

  • Bold rounded headlines for product warmth and identity
  • Clean system body text for speed and readability
  • Compact caption layers for stats, chips, and metadata

Interaction Principles

Navigation

  • Primary navigation should highlight Discover, Studio, Partners, and Profile
  • Each tab must feel like a distinct mode, not just another list

Discover

  • Lead with curation, not volume
  • Featured content should feel editorial
  • Filters should be immediate and lightweight

Studio

  • Every editing state should be legible at a glance
  • High-risk actions must be reversible
  • Camera and transform behaviors must never feel ambiguous

Profile

  • Treat creator work as a library, not a feed
  • Surface unfinished work clearly
  • Show performance without making the page feel like analytics software

Partners

  • Campaigns should feel sponsor-worthy
  • Emphasize activations, participation, and repeat visibility
  • Avoid hackathon aesthetics

Motion Guidance

  • Use restrained spring transitions for selection, mode changes, and card emphasis
  • Avoid decorative motion that competes with 3D editing
  • Motion should clarify hierarchy, not show off

Future UI Rules

  • New screens must start from a strong hero or strong first section
  • Always ask: is this helping the user build, discover, or trust the platform?
  • Prefer fewer, more intentional surfaces over crowded dashboards
  • Preserve dark premium styling unless a screen has a strong reason not to

Design Smells To Avoid

  • Default white cards on plain backgrounds
  • Too many equal-weight buttons in the same zone
  • Generic “dashboard SaaS” layouts
  • Neon cyberpunk overload
  • Hiding critical editing state