This repository is a DOM-shaped design workspace for wiseinvest.in. Instead of keeping specs only in Figma, every production UI surface has a sibling spec here:
.md) describing goals, anatomy, states, copy, and accessibility.html) that stacks Desktop Light, Desktop Dark, Mobile Light, and Mobile Dark on one page, with <aside> annotationsThe structure mirrors the real app DOM so engineers can jump from JSX/TSX files to the corresponding design spec with minimal friction.
design-system/ – global tokens and rulesCanonical home for brand and UI foundations used across all pages:
design-system/Design.md — master design spec with Emerald Ledger palette, typography (Manrope + Inter), spacing scale, radii, and layout principles. Also encodes tokens as front matter.design-system/tokens.md — consumable token table (colour, type, spacing) used by implementations.design-system/components-library.md — guidance for shadcn/ui components and variants used across the app.design-system/animations.md — motion principles and shared animation primitives.All page and component specs depend on this directory; add or update tokens here before using them in any page-level design.
shared/ – cross-page UIComponents that appear on many pages live once in shared/ and are referenced from page specs:
shared/header/header.md / header.html — global navigation and auth entry.shared/footer/footer.md / footer.html — newsletter signup, nav links, and legal footing.shared/scroll-bar/scroll-bar.md / scroll-bar.html — site-wide custom scrollbar spec.shared/scroll-bar/ticker-bar.md / ticker-bar.html — NYSE-style stock ticker bar design.These shared specs are consumed by multiple page compositions so header, footer, and ticker remain visually consistent.
pages/ – product surfacesEach top-level product experience has its own directory under pages/, with nested folders per section or component. The pattern is:
pages/<area>/<nn-section-name>/<section>.md — design spec for that sectionpages/<area>/<nn-section-name>/<section>.html — multi-theme, multi-breakpoint wireframeKey areas:
pages/home/home.md — composition for / (marketing homepage); maps section order and transitions, and links to 01-hero, 02-heatmaps, 03-features, 04-testimonials, 05-pricing, 06-faq specs.pages/wealth-dashboard/ — app dashboard views and cards.pages/home/07-wealth-dashboard/wealth-dashboard.md — homepage teaser of the wealth dashboard, sharing concepts with the main dashboard designs.pages/stock-page/Design.md — stock page design system (12 modular components such as stock header, price chart, WiseInvest score, shareholding, analyst ratings, and more).pages/stock/ — newer, more granular stock page UX specs that mirror the modular stock-page components with one folder per functional slice (valuation, trading risk, about, financials, fundamentals, revenue segments, sentiment, news, holdings, scores, earnings, shareholding, analyst ratings, dividends & splits, technical analysis, index membership).pages/payment/ and pages/payments/ — payment flows and Stripe-inspired checkout UX.pages/checkout-pro/ — enhanced checkout experience.pages/contact/ — contact/support page specs.Each page spec usually points to the production React file it maps to in the main app repo (for example, pages/home/home.md references financial-insights/src/pages/Homepage.jsx and section-level components under src/components/Homepage/).
NN-section-name prefix (e.g. 01-hero, 02-heatmaps) to lock in scroll order and make diffs easy..md spec and one .html wireframe, plus optional reference imagery.shared/ rather than being duplicated under individual pages.financial-insights/ so designers and engineers stay synchronized.The key mapping patterns are:
/): pages/home/home.md orchestrates section specs (01-hero, 02-heatmaps, 03-features, 04-testimonials, 05-pricing, 06-faq, 07-wealth-dashboard) which in turn map to Homepage-prefixed React components.pages/wealth-dashboard/wealth-dashboard.md and pages/home/07-wealth-dashboard/wealth-dashboard.md describe both the full in-app dashboard and its marketing teaser, aligned with dashboard components in the main app.pages/stock-page/Design.md defines a modular stock page system. The later pages/stock/.. subtree expands this into 16+ dedicated component specs that correspond to the stock detail screen: price chart, valuation, risk, fundamentals, financials, segments, sentiment, news, holdings, scores, earnings, shareholding, ratings, dividends/splits, technicals, index membership.pages/payment/payment.md, pages/payments/payments.md, and pages/payments/checkout/checkout.md describe subscription/payment entry points and a Stripe-style checkout experience. These map to the app’s billing and subscription flows.shared/ (header, footer, scrollbars, ticker) connect to layout and shell components consumed by multiple routes.The repository follows the working rules already documented in README.md:
design-system/ before using them in any page spec or wireframe..html wireframe stacks Desktop Light, Desktop Dark, Mobile Light, and Mobile Dark with labelled device headers.<aside> blocks in .html for intent and notes so the visual surface stays clean.design-system/Design.mddesign-system/components-library.md, design-system/tokens.mdshared/header/, shared/footer/, shared/scroll-bar/pages/home/home.md and its numbered section folderspages/wealth-dashboard/, pages/stock-page/, pages/stock/, pages/payment/, pages/payments/, pages/checkout-pro/, pages/contact/This OpenWiki quickstart should be kept in sync with new page folders, major navigational changes, or new shared primitives in the design system.