Groww

name Groww

colors background: "#ffffff" foreground: "#2d343c" brand: "#5076ee" # Primary Blue muted: "#7c7c7c" border: "#f0f0f0" card: "#ffffff" accent: "#5076ee" success: "#63ad0e" error: "#ff003c" dark: background: "#0a0a0a" # Pure Dark foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d343c" card: "#121212" accent: "#5076ee"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "15px" lineHeight: "1.5" heading: fontWeight: "700" letterSpacing: "-0.02em"

rounded default: "6px" md: "12px" lg: "20px"

Design System: Groww

Overview

Groww's design system is built for "Functional Simplicity." It is an accessibility-first environment designed to make investing and financial growth intuitive for everyone.

Design Philosophy

• Frictionless Growth: Every interaction is optimized to reduce the "fear" of investing.

• Functional Naming: Uses semantic tokens rather than hardcoded colors to ensure long-term flexibility and accessibility.

• Clarity over Complexity: Rejects the jargon and dense charts of traditional trading for a clean, focus-driven UI.

• Trust through Data: Uses clear, vibrant charts and transparent fee structures to build user confidence.

Colors

• Groww Blue (#5076EE): A calm yet vibrant blue that represents trust and growth.

• Neutral Grays: Uses a streamlined palette of greys to create hierarchy in complex portfolios.

• Semantic Certainty: Green (#63AD0E) and Red (#FF003C) are used with absolute consistency for profit/loss and success/error states.

Typography

• Inter: The backbone of the interface, providing exceptional clarity for numbers and technical labels.

• Confidence in Scale: Uses large, bold headers for portfolio totals and stock prices to ensure they are the focal point.

Components

• Investment Cards: Clean, white units with integrated sparkline charts showing performance at a glance.

• Stock Search: A prominent, center-focused bar that serves as the gateway to the market.

• The "Dashboard" Summary: A high-impact hero area with large typography and a clear "Total Returns" visualization.

Visual Effects

• Sparklines: Minimalist, color-coded line charts integrated directly into cards and lists.

• Soft Gradients: Uses very subtle blue-to-white or green-to-white gradients for "Success" backgrounds.

• Focus Highlighting: Interactive elements use a clear blue ring or background shift to guide the user.