Zerodha Universe

name Zerodha Universe

version 1.0.0

colors primary: "#387ed1" # Action Blue (Buttons/Links) text-main: "#444444" # Deep Grey (Headings/Body) text-muted: "#9b9b9b" # Light Grey (Subtext/Captions) background: "#ffffff" # Pure White border: "#eeeeee" # Subtle Dividers success: "#4caf50" # Positive Growth danger: "#df5148" # Negative/Sell Actions

typography fontFamily: "Inter, sans-serif" baseSize: "16px" headings: weight: 500 color: "#444444"

rounded sm: "4px" md: "6px"

Design System: Zerodha Minimalist

Overview

A clean, professional, and "customer-first" interface designed for clarity and trust. The aesthetic avoids "gamification" and focus-heavy visuals in favor of a high-utility, airy layout with generous whitespace.

Colors

• Primary Blue (#387ed1): Used for primary Call-to-Actions (CTAs) like "Sign up for free" and key navigation links.

• Neutral Greys: A scale of greys is used to create a clear visual hierarchy. Darker grey for primary headlines, mid-grey for body text, and light grey for secondary information.

• Functional Colors: Use standard green and red only for market indicators (profit/loss) or Buy/Sell actions to maintain a professional "utility" feel.

Typography

• Typeface: Primarily Inter. It provides excellent readability for dense financial data.

• Hierarchy:

• Hero Headings: Large (approx 44px), centered, with tight letter spacing.

• Section Sub-headings: 32px, medium weight.

• Body Text: 16px to 18px with a line-height of 1.6 for long-form readability.

Components

• Buttons:

• Primary: Solid blue fill, white text, 6px border radius. Padding should be generous (e.g., 12px 30px).

• Secondary/Links: Text-only with a trailing chevron (e.g., Explore our products ->).

• Icons: Minimalist line icons. Specifically, use the "Kite" and "Console" product logos which are geometric and flat.

• Cards & Sections:

• Use a "row-between" layout for features.

• Illustrations should be flat, professional SVGs (e.g., the education and ecosystem graphics).

Layout & Spacing

• Container: Max-width of 1100px.

• Whitespace: Highly emphasized. There should be significant vertical padding (80px - 100px) between major sections to prevent a "cluttered" feel.

• Alignment: Center-aligned for hero/onboarding sections; left-aligned for feature deep-dives.

Do's and Don'ts

• DO: Use "Nudges"—subtle UI elements that guide users rather than distracting them.

• DO: Keep charts and data visualizations clean with minimal grid lines.

• DON'T: Use bright "neon" colors or aggressive gradients.

• DON'T: Use rounded corners exceeding 8px; maintain a professional, slightly "sharp" modern edge.