Design System Gallery
This gallery showcases all design tokens, components, and their various states used throughout the application.
Design Tokens
Colors
Background Primary
#ffffff
Background Secondary
#f8fafc
Background Tertiary
#f1f5f9
Sky Accent
#0ea5e9
Purple Accent
#7c3aed
Text Primary
#0f172a
Typography
Heading 1
text-6xl font-extrabold tracking-tighter
Heading 2
text-4xl font-bold tracking-tighter
Heading 3
text-2xl font-bold
Body text large - This is how large body text appears
text-lg text-slate-600
Body text regular - This is how regular body text appears
text-slate-600
gradient-text
Button Components
Primary Button
Secondary Button
Header Button
Card Components
Feature Card
This is how feature cards appear with hover effects
CTA Card
Cards used for call-to-action sections
Content Card
Semi-transparent cards for content sections
Form Components
Layout Components
Header
Footer
© 2025 stockoMJ.ai. All rights reserved.
Status Indicators
Interactive Components
Impact Map
Number Strip
Post-News Move
+12%
Relative Strength
+2.5
Above 20-DMA
✓
Above 50-DMA
✗
Liquidity
OK
Plan Compare
Entry
Buy at market open
Size/Stop
10% of portfolio, 15% stop loss
Targets
$150, $175
Catalysts
Earnings beat, new product launch
Why it fits you
High risk tolerance, long term horizon
Final Check
Choice Card
You are in control of your financial future.
Let us help you achieve your financial goals.