A clean, professional, and customer-first interface designed for clarity and trust, focusing on high utility and generous whitespace.
Real data. Real impact.
Emerging
Developers
Source: https://github.com/Zerodha/universe?ref=explainxPer week
Excellent
Skills give you superpowers. Install in 30 seconds.
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"
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.
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.
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.
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).
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: 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.
proprietary
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.