One decisive moment
The score establishes context; the active quest owns the strongest hierarchy and only primary action.
Open Design systemFast moments.
Fast moments.
Visible truth.
CrowdQuest Signal OS is a production design language for sponsor-funded sports quests. It combines the certainty of a financial interface with the rhythm of a live operations room.
10semantic colors4truth layers44pxminimum targetAAcontrast floor
01
Product principles
The system is designed around decisions, source clarity, and guarded execution—not decorative dashboard density.
Truth before theatre
Live, API replay, and local replay are visibly different. The UI never implies verification it cannot prove.
Guard every value move
Points settle from explicit events. Money remains an approval-gated intent until policy permits execution.
Complexity stays backstage
Fans get one workspace while adapters, agents, bounty logic, and payment rails remain inspectable context.
02
Color and surfaces
The b2fms620zo OKLCH foundation creates neutral, calibrated depth. Signal lime is reserved for commitment, success, and the current point of attention.
oklch(0.148 0.004 228.8)--backgroundApplication background
oklch(0.218 0.008 223.9)--cardPrimary panels
oklch(0.275 0.011 216.9)--secondaryRaised controls
#CFFF5A--signalPrimary action
oklch(0.541 0.281 293.009)--chart-3System structure
#7CB8FF--infoReplay / information
#FFD166--warningTime / approval
#FF807A--dangerFailure / destructive
#FAF8FF--text-primaryPrimary text
#B8B1C7--text-secondarySupporting text
Typography
Geist + Geist Mono
A compact product voice with machine-readable evidence where precision matters.
Match momentDoes France convert?Enough context to decide without leaving the room.FIXTURE 18209181 · API REPLAY
Spacing + radius
4px rhythm, soft containment
Spacing grows by intent. Corners communicate nesting without turning every control into a pill.
8121824
03
Owned primitives
shadcn-style composition, Radix behavior, Tailwind tokens, and Lucide icons—kept inside the product repository and governed by this contract.
Actions
Statuses
Live sourceAPI replayLocal replayGuardedApproval requiredFailed
Progress
Iconography
sourcequestpolicyrecordreward
Every interactive primitive includes visible focus, disabled, loading, error, and reduced-motion behavior.
04
State language
Every high-consequence object declares its state in words and color. Color is reinforcement, never the only signal.
Source
Live
API replay
Local replay
Checking
Quest
Available
Selected
Submitting
Closed
Settlement
Pending
Correct
Missed
Fallback
Money
Not requested
Intent
Approval
Executed
Available
Selected
Closed
05
Responsive contract
The active decision stays first at every size. Supporting information reflows; it never steals target size or truth disclosure.
≥ 1180pxOperations room
Replay context, match decision, and competitive room remain visible in three purposeful columns.
821–1179pxFocused command view
Quest and source remain primary. Leaderboard and workflow context move into a full-width supporting row.
≤ 820pxOne-thumb quest flow
Source disclosure precedes the score, choices become a single column, and the primary action stays in a safe-area dock.
Accessibility contract
Readable under pressure.
- 44px minimum targets
- Visible 2px focus ring
- Radio-key navigation
- Polite status announcements
- AA text contrast floor
- Reduced-motion fallback
06
Inspiration, translated
The supplied finance and operations references informed hierarchy and contrast. Open Design translated those principles into an original system for CrowdQuest.
Large numeric hierarchy, contained actions, and acid signal color for the one thing users can do next.
Clear work zones, dense context at the edges, and a spacious active surface in the center.
Score first, time pressure second, and competitive context without visualizing play as wagering.