Current OmniMint section: OmniMint. Session state: Signed Out.
Design System Foundation

OmniMint UI System

Reusable tokens, product language, component patterns, and review checks for OmniMint UI work.

The UI system is presentation-only. It does not connect brokers, collect credentials, place orders, change schedules, or deploy strategies.

Visual Principles

  1. One clear decision per screen, with secondary actions visually quieter than the primary path.
  2. Trust before excitement: show evidence, risk, source quality, and safety boundaries near money-adjacent claims.
  3. Useful without overload: prefer a few strong cards and clear navigation over dense dashboards.
  4. Every responsive breakpoint should feel intentionally designed, not merely squeezed.
  5. Broker, payment, and trading authority must remain visually and structurally separate from research discovery.

Copy Voice Rules

  1. Use calm, direct language; avoid hype words like guaranteed, risk-free, can't lose, or sure thing.
  2. Say research, review, preview, connect read-only, paper review, and live permission instead of vague action labels.
  3. Never imply a strategy is suitable for a specific person; describe fit as preference-based research guidance.
  4. Warnings should explain both the risk and the boundary, not just say be careful.
  5. Empty states should tell users what can be done next without making them feel at fault.

Color Tokens

Ink#071912
Mutedrgba(7,25,18,.72)
Mint#008f63
Mint Soft#e6fff4
Gold#d99a2b
Danger#933221
Focus#005d43
Paperrgba(255,255,255,.86)
Linergba(7,25,18,.12)

Typography Tokens

Display"Avenir Next","Helvetica Neue",sans-serif
Monoui-monospace, Menlo, monospace
Hero Sizeclamp(3rem,7vw,6.5rem)
Section Sizeclamp(1.45rem,3vw,2.2rem)
Body Size1rem

Spacing Tokens

Page Widthmin(1160px, calc(100% - 32px))
Page Padding34px 0 76px
Card Radius30px
Control Radius999px
Card Padding26px
Grid Gap12px
Shadow0 24px 80px rgba(7,25,18,.09)

Component Patterns

omni-page Page Shell

Consistent page width, background atmosphere, navigation, and content spacing.

omni-hero Hero

One strong page promise, one primary action row, and a trust cue.

omni-panel omni-card Panel/Card

Reusable surfaces for strategy cards, metric cards, forms, and detail sections.

omni-button Button

Primary, secondary, muted, and disabled actions with consistent touch targets.

omni-guardrail Guardrail

Money-adjacent safety notices with a consistent visual treatment.

omni-status-region Status Region

Reusable polite announcements for route changes, saved states, and recoverable errors.

omni-loading-card omni-skeleton Skeleton Loader

Calm loading placeholders that do not imply market urgency or force motion.

Responsive Breakpoints

1200px+ Desktop

Show full context, two-column comparison layouts, and the richest chart/table treatment.

768px-1199px Tablet

Collapse dense grids to two columns and keep the primary action visible without horizontal scroll.

360px-767px Mobile

Use one-column cards, bottom navigation for primary app areas, and 44px minimum touch targets.

Tablet Layout Contracts

#189 Public landing

Hero content stacks before preview cards; account CTAs remain above the fold and readable at 834px.

/welcome
#189 Strategy search

Filter drawer drops above results, summary cards use two columns, and comparison tray stays readable without horizontal scroll.

/strategies/search
#189 News and events

Category sections stay scannable, refinement controls wrap cleanly, and article/event cards keep one primary link.

/news-events
#189 Creator profile

Creator bio, action states, strategy shelf, and trust notes stack in a clear reading order.

/creators/{creator_id}
#189 Portfolio

Portfolio preview, broker state, and research-only guardrails keep metric cards legible without exposing broker actions.

/portfolio

Accessibility App Shell Checklist

  1. Every app-shell page includes a skip link target at main content.
  2. Primary, overflow, and mobile navigation have explicit accessible labels.
  3. Current routes expose aria-current on desktop and mobile navigation links.
  4. Interactive controls meet a 44px minimum touch target on mobile.
  5. Keyboard focus is visible and does not disappear behind sticky or fixed navigation.
  6. Polite status regions announce route context, saved states, and recoverable errors.
  7. Reduced-motion users receive instant state changes without animated loaders.
  8. Status messages explain the result and what did not change.
  9. Screens do not rely on color alone to communicate risk, gain/loss, disabled state, or urgency.

Empty Loading Error Success States

Useful and non-blaming Empty

Say what is missing, why it matters, and offer one safe next action.

Markup: Use a heading, one explanatory sentence, and one safe next-action link or disabled action. Safe Copy: No records yet. Start with research setup; no broker or order action occurred. Recovery: Link to the nearest research-only creation, browse, or reset path.
Calm and bounded Loading

Use role=status, short copy, and static skeleton placeholders that do not imply market urgency.

Markup: Use role=status with aria-live=polite and a non-urgent loading label. Safe Copy: Loading research context. Trading, broker, and payment state are unchanged. Recovery: Show existing cached/previous content when available instead of blanking the page.
Specific and recoverable Error

Use aria-live=polite, name the failure, keep broker/trading state unchanged, and provide a retry or safer path.

Markup: Use aria-live=polite, a precise failure message, and a retry/back-to-safe-page action. Safe Copy: We could not load this research view. No broker connection, order, or subscription changed. Recovery: Offer retry, clear filters, or return to a stable app-shell route.
Confirming without hype Success

Confirm the saved UI/app change and state that no broker/order action occurred when relevant.

Markup: Use a status region or inline confirmation near the action that changed state. Safe Copy: Saved to your research workspace. This did not deploy or trade. Recovery: Offer undo, view detail, or continue browsing depending on the workflow.

State Audit Surfaces

#114 Strategy search empty results

Clear filters action plus calm explanation.

Empty | /strategies/search?q=no-match-example
#114 Saved search preview

Preview copy says it does not subscribe, alert, connect brokers, or route orders.

Success/preview | /strategies/search?market=etfs
#114 UI system loading pattern

Reusable role=status and skeleton pattern available for future async screens.

Loading | /ui-system
#114 Unauthorized personalized route

Redirect or unauthorized copy routes to login without changing account or broker state.

Error/recoverable | /home

Demo Fixture Contracts

#182 Marketplace strategy shelf

Seed data should cover multiple market shelves, creators, risk bands, and blocked evidence states.

demo_semiconductor_rsi_scout, demo_macro_event_balancer, demo_commodity_macro_rotation
#182 News and events

Headlines and calendar events should span financial markets, politics/policy, U.S. economy, and other context.

demo_news_semis_export, demo_news_energy_policy, demo_event_fomc_decision
#182 Customer personas

Demo users should show signed-out, empty, partial, and personalized dashboard states without sensitive data.

demo_customer_new, demo_customer_partial, demo_customer_onboarded
#182 Alert preferences

Alert fixtures are in-app only and must not enable provider delivery, broker permissions, or trading actions.

NVDA, macro category, SOXL strategy, first watchlist
#182 Account states

Account-state examples are masked, mock-only, and usable for disconnected/stale/healthy preview copy.

healthy_read_only, requires_reauthorization, revoked_disconnected

Responsive Screenshot Matrix

390x844 Mobile

Home, marketplace categories, strategy detail, portfolio, onboarding, and error/empty states.

/welcome, /home, /portfolio, /strategies/search, /public/strategies/{id}
834x1112 Tablet

Dashboard, strategy search filters, news/events, creator profile, and comparison-heavy pages.

/strategies/search, /news-events, /creators/{id}, /marketplace/categories
1440x1000 Desktop

All primary app-shell routes plus any page touched by the ticket.

/, /discover, /strategies/search, /creators, /news-events, /ui-system

Visual Regression Route Checks

#184 390x844

Landing promise, create-account CTA, and public preview card are visible without crowding.

/welcome
#184 834x1112

Search command center, filter drawer, and results stack in the expected tablet order.

/strategies/search?market=etfs
#184 834x1112

News categories, event filters, and related-strategy context remain sectioned and calm.

/news-events?symbol=NVDA
#184 1440x1000

Creator action states, verification notes, and strategy shelf are visible with no broker/payment controls.

/creators/omnimint-lab
#184 1440x1000

Design contracts, state patterns, QA matrix, and safety guardrail render as the canonical review page.

/ui-system

Cross Browser Smoke Tests

Browser Safari

Sticky navigation, backdrop blur fallback, forms, and iOS-style touch targets.

Routes: /welcome, /strategies/search, /portfolio Pass: No horizontal scroll, bottom-nav safe area honored, and form controls remain tappable.
Browser Chrome

Desktop layout density, keyboard navigation, and responsive screenshot baselines.

Routes: /discover, /strategies/search, /ui-system Pass: Skip link, active nav state, filters, and screenshot matrix render without console errors.
Browser Firefox

Details/summary overflow menu behavior, focus rings, and form control rendering.

Routes: /creators, /news-events, /marketplace/categories Pass: More menu opens by keyboard, visible focus remains high contrast, and selects preserve labels.

Customer Journey QA Script

  1. Public browsing: A signed-out user can read the landing page, open news/events, browse strategies, and find login/register. /welcome -> /news-events -> /strategies/search -> /register User can browse useful content before authentication and sees gentle account prompts.
  2. Account start: A user can reach account creation, understand that broker connection is not required, and resume onboarding. /register -> /onboarding/workspace No broker credential, payment, or trading field appears in account creation or onboarding.
  3. Personalized home: An onboarded user sees portfolio preview, news preferences, strategy suggestions, and creator follow paths. /home -> /dashboard/preferences -> /portfolio Dashboard modules match preferences and portfolio stays research-only.
  4. Discovery loop: A user can move between dashboard, search, strategy detail, creator profile, watchlist, and recommendations. /discover -> /strategies/search -> /strategies/{id} -> /creators/{id} Every page has a clear next step and a path back to the app shell.
  5. Safety boundary: Money-adjacent screens continue to show research-only, broker-permission, and no-order-routing guardrails. /broker-connections -> /broker-connections/consent -> /public/strategies/{id} Risk copy explains what did not happen: no connection, no credential collection, no orders.

QA Execution Order

  1. #189 Tablet breakpoint layouts: Core tablet contracts are documented, rendered, and covered by tests.
  2. #184 Visual regression screenshot matrix: Route and viewport assertions are present for mobile, tablet, and desktop.
  3. #183 Cross-browser responsive smoke checklist: Safari, Chrome, and Firefox checks include routes and pass signals.
  4. #181 End-to-end customer journey QA script: Public, account, personalized, discovery, and safety journeys include pass signals.
  5. #114 Standard empty/loading/error/success states: State contracts define markup, safe copy, and recovery action requirements.

Batch 2 Ticket Coverage

  1. #131 Global app shell and navigation framework.
  2. #113 Responsive mobile navigation and layout pass.
  3. #190 Mobile bottom navigation and touch target pass.
  4. #189 Tablet breakpoint layout expectations.
  5. #188 Keyboard navigation pass for core workflows.
  6. #187 Screen reader landmarks, labels, and announcements.
  7. #186 Color contrast and readable state guidance.
  8. #185 Reduced motion and calm loading states.
  9. #184 Visual regression screenshot matrix.
  10. #183 Cross-browser responsive smoke checklist.
  11. #181 End-to-end customer journey QA script.
  12. #114 Standard empty, loading, error, and success states.

Batch 3 Ticket Coverage

  1. #182 Realistic, clearly fake demo seed data for customer review surfaces.

Batch 4 Ticket Coverage

  1. #180 Broker connection education screen before any permission request.
  2. #179 Broker permission review matrix and elevated confirmation copy.
  3. #177 Research, paper, and live trading mode selector states.
  4. #178 Paper/live deployment readiness checklist with blocked states.
  5. #176 Reusable risk confirmation modal patterns for sensitive actions.

Batch 5 Ticket Coverage

  1. #175 Notification center visual shell for market, creator, billing, and broker-health previews.
  2. #173 Community feed composer, reaction states, creator suggestions, and moderation boundaries.
  3. #172 Account billing, subscription, notification, privacy, and support settings shell.
  4. #171 Help center and safe support entry points that tell users what never to share.
  5. #161 Subscription pricing and locked-content preview states for premium research.

Batch 6 Ticket Coverage

  1. #147 Polished login/register split-screen account start with clear public preview paths.
  2. #146 Account creation success and verification-state screen without provider email or identity checks.
  3. #145 Onboarding progress tracker and stepper across account, questionnaire, watchlist, subscription, connection, and paper-review steps.
  4. #144 Onboarding review summary before completion with blockers, optional states, and safety boundaries.
  5. #143 First-run welcome and next-action page that orients users into setup, browsing, and watchlists.

Batch 7 Ticket Coverage

  1. #149 Public trust center and landing trust cues before account creation.
  2. #148 Public education links for pricing, help, creator verification, and broker safety.
  3. #141 Friendly recovery pages for signed-out, expired-session, forbidden, and missing-route states.
  4. #151 Search no-results recovery with clear filters, market shelves, creator paths, and calm copy.
  5. #142 Account preference settings review surface with save, cancel, reset, and validation-state contracts.

Design Review Checklist

  1. Does the page have one obvious primary action and a clear way back to the main app shell?
  2. Are desktop, tablet, and mobile layouts usable without hidden primary actions?
  3. Can keyboard users see focus and complete the core flow?
  4. Do form fields have labels, helper text, success/error states, and safe validation copy?
  5. Are empty, loading, error, and success states useful and calm?
  6. Are risk, broker, payment, and trading boundaries explicit before money-adjacent actions?
  7. Are colors readable and not the only signal for gain/loss, warning, disabled, or risk states?
  8. Is screenshot evidence attached for at least one desktop and one mobile viewport?

Reusable QA Checklist Links

Checklist Link Accessibility and usability QA checklist

Copy-ready checklist for GitLab issues, merge requests, and customer-facing UI reviews.

docs/ui_accessibility_usability_checklist.md
Checklist Link UI system foundation

Canonical visual direction, state patterns, responsive contracts, and design language.

docs/omnimint_ui_system.md