juanjuandog FinSight Product Design System
Use this system for FinSight AI product surfaces: company research, AI analysis, evidence retrieval, company events, and watchlists.
Character
- Neutral, analytical, restrained, content-first.
- Search is the primary way into the product.
- Evidence and data freshness are visible at the point of every conclusion.
- Dense information is grouped by research question, not by backend subsystem.
Non-negotiables
- Use the tokens in
tokens/colors_and_type.css. - Use IBM Plex Sans for interface and headings, and IBM Plex Mono for market data.
- Warm pearl white is the dominant surface; charcoal ink carries hierarchy.
- Champagne gold is the only product accent and should stay muted.
- Do not use green as a brand, action, navigation, focus, or decoration color.
- Red and green are reserved only for signed market movement and risk semantics.
- Restrict soft mint, blush, lavender, and gold gradients to the translucent navigation atmosphere; never place them behind dense research content.
- Use subtle translucency and blur only for navigation and sticky shell surfaces.
- Avoid oversized radii, decorative metrics, dark dashboards, and purple AI styling.
- Positive/negative movement must include a sign or label, never color alone.
- Interactive targets are at least 44px on touch layouts and have visible focus states.
- AI conclusions show evidence count, snapshot time, and confidence nearby.
Layout
- Desktop uses a two-zone shell: a 248px translucent navigation rail and one fluid research canvas. Do not add a contextual right rail.
- The five mutually exclusive workspaces are 公司研究、AI 分析、证据来源、 近期事件、关注列表.
- Company research shows identity, core quote, one close-price line, and essential metrics only. AI conclusions, events, evidence, and watchlists never duplicate inside it.
- Navigation stays quiet and persistent on desktop and becomes a drawer below 900px.
- Engineering details stay hidden from the primary user surface.
- Mobile collapses to one column without a persistent rail.
Motion
- 160–240ms for hover and state changes.
- 280ms for panel transitions.
- Animate opacity and transform only.
- Respect
prefers-reduced-motion.
Single approved direction
- White-gold pearl is the only supported product theme.
- Do not reintroduce Finance Pop, Editorial, dark mineral, classic, or theme switcher variants.
- Create richness through information hierarchy, precise spacing, hairline borders, and the low-opacity sidebar aura rather than extra decoration.