Wiki← Back to app
Wiki / UI Style Guide

UI Style Guide

Design principles for the BARS Engine interface. Applies to dashboard, modals, lists, and user-generated content surfaces.

Core Principle: Uncluttered by Default

Keep the UI uncluttered, even when user-generated content is abundant.

  • User-generated content (quests, journeys, BARs, threads) can grow quickly and overwhelm the dashboard.
  • The interface should remain calm and scannable regardless of content volume.
  • Prefer progressive disclosure: show summaries and counts; let users expand to see detail.
  • Collapsible sections, accordions, and “show more” patterns are preferred over always-visible long lists.

Vault (/hand)

Lobby

  • Summary strip shows counts (charges, unplaced quests, drafts) and long-idle hints.
  • Major sections use count badges and are collapsible when a section has more than five items.
  • Dense lists use Load more (five at a time) instead of infinite scroll.
  • The lobby stays shallow — it orients and links inward, but does not duplicate full room lists.

Rooms (nested routes)

The Vault is a place with rooms, not a single scroll. Nested routes exist for each engagement type:

  • /vault/charges — felt signal → quest
  • /vault/quests — placement & throughput
  • /vault/drafts — shaping & publishing
  • /vault/invitations — relational delivery
  • /vault/compost — release & salvage

Each room has a ← Vault breadcrumb back to the lobby via VaultRoomHeader.

Four Moves on every room page

Every room renders a VaultFourMovesStrip with room-specific actions for each throughput move:

Wake Up

See what's here — inventory, filters, staleness.

Clean Up

Unblock — compost stale items, run 321, EFA.

Grow Up

Deepen — edit, unpack, attach, level up.

Show Up

Ship — place quest, publish BAR, send invite.

Implementation: src/components/hand/VaultFourMovesStrip.tsx. Each room passes a VaultRoomMovesConfig with room-specific hrefs and labels.

Dashboard

  • Active Quests and Journeys sections should be collapsible. Default state: collapsed when the player has many items; expanded when few.
  • Section headers show a count badge (e.g., “Active Quests (5)”) so users know what's inside without expanding.
  • Collapsed state preserves a one-line summary or teaser when helpful.
  • Graveyard and other secondary sections follow the same pattern when they grow large.

Lists and Feeds

  • Long lists use virtualization or pagination when appropriate.
  • Avoid infinite scroll for dense, action-oriented content; prefer “Load more” or collapsible groups.
  • User-generated titles and descriptions should truncate with expand-on-hover or expand-on-click when they exceed a reasonable length.

Modals and Overlays

  • Modals should not cascade; one modal at a time.
  • Dense content inside modals should use tabs, accordions, or step wizards rather than a single long scroll.

Scene Atlas (`/creator-scene-deck`)

The 52-cell creator grid follows the same principles: progressive disclosure (suit rows collapsed with filled/total summaries), one modal per cell with a path chooser (attach / guided / full vault), and no long single-scroll vault in Scene Atlas mode (tabbed Core / Layers / Advanced).

Cultivation Card Art Surfaces (CASI)

Visual test harness for the 5 Wuxing elements and 3 axis of state logic.

The 5 Elements (growing / neutral)

fire / neutral

growing stage

water / neutral

growing stage

wood / neutral

growing stage

metal / neutral

growing stage

earth / neutral

growing stage

Altitude Strip (fire element / growing)

Dissatisfied

growing stage

Neutral

growing stage

Satisfied

growing stage

Stage Strip (fire element / satisfied)

Seed

seed stage

Growing

growing stage

Composted

composted stage

Quarantine Gate (Watermarks missing safely)

Argyra Truth Seer

growing stage

Pyrakanth Connector

growing stage

Related

← Back to index