Finance / iOS / Android / Web

Groww

Groww keeps investing calm: slate type at gentle in-between weights on white, green for doing and gaining, orange-red only for losing.

Download
  • #04B488
  • #44475B
  • #ED5533
  • #F0F0F2
  • #5669FF
  • #060809

Color

Every color token in the file, grouped by role.

Brand

  • primary#04B488
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • surface#F8F8F8
  • dark bg#060809
  • dark bg 2#151819
  • dark surface#1E2224

Text

  • ink#44475B
  • ink muted#7C7E8C
  • ink faint#A1A3AD
  • ink black#060809

Lines

  • border#E9E9EB
  • dark border#2E2E2E

Status

  • positive wash#E9FAF3
  • negative#ED5533

More

  • band#F0F0F2
  • chip#F2F5F7
  • blue#5669FF
  • olive#A1B55C
  • dark green subtle#0F251D

Typography

Each style is set with the file's own family, size, weight and spacing.

  • SoehneSoehne is private and not available in open fonts. Shown in Inter Tight, the closest open match.
  • GrowwSansGrowwSans is private and not available in open fonts. Shown in Inter Tight, the closest open match.
  • display88px / 535 / 96.8px

    Groww

  • headline44px / 500 / 48.4px

    Groww

  • title32px / 535 / 44px

    Groww

  • price24px / 535 / 1.35

    Pack my box with five dozen liquor jugs

  • subtitle18px / 535 / 25px

    The quick brown fox jumps over the lazy dog

  • body16px / 435 / 22px

    The quick brown fox jumps over the lazy dog

  • button14px / 535 / 20px

    Continue to checkout

  • small12px / 535 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl22px
  • pill99px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • pill link
    pill-link
  • chip link
    chip-link
  • product card
    product-card
  • dark section
    dark-section
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 119 lines
version: alpha
name: Groww-design-analysis
description: "An investing app in Groww green (#04b488) on white and soft gray, with slate text (#44475b), Söhne headlines and Groww Sans for interface text at in-between weights (435, 535), 8px buttons, round pill links, 22px product cards and a full dark token set shipped with the site."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#04b488"
  on-primary: "#ffffff"
  positive-wash: "#e9faf3"
  negative: "#ed5533"
  ink: "#44475b"
  ink-muted: "#7c7e8c"
  ink-faint: "#a1a3ad"
  ink-black: "#060809"
  canvas: "#ffffff"
  band: "#f0f0f2"
  surface: "#f8f8f8"
  border: "#e9e9eb"
  chip: "#f2f5f7"
  blue: "#5669ff"
  olive: "#a1b55c"
  dark-bg: "#060809"
  dark-bg-2: "#151819"
  dark-surface: "#1e2224"
  dark-border: "#2e2e2e"
  dark-green-subtle: "#0f251d"

typography:
  # Font note: "Soehne" is a private font and is not available in open fonts. Closest open alternative: "Inter Tight".
  # Font note: "GrowwSans" is a private font and is not available in open fonts. Closest open alternative: "Inter Tight".
  display:
    fontFamily: "Soehne, GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 535
    lineHeight: 96.8px
  headline:
    fontFamily: "Soehne, GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 48.4px
  title:
    fontFamily: "Soehne, GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 535
    lineHeight: 44px
  price:
    fontFamily: "Soehne, GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 535
  subtitle:
    fontFamily: "Soehne, GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 535
    lineHeight: 25px
  body:
    fontFamily: "GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 435
    lineHeight: 22px
  button:
    fontFamily: "GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 535
    lineHeight: 20px
  small:
    fontFamily: "GrowwSans, 'Noto Sans', system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 535
    lineHeight: 18px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 22px
  pill: 99px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 12px 16px
  pill-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.pill}"
    height: 47px
    padding: 10px 24px
  chip-link:
    backgroundColor: "{colors.chip}"
    textColor: "{colors.ink-black}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 38px
    padding: 8px 24px
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  dark-section:
    backgroundColor: "{colors.dark-bg}"
    textColor: "{colors.chip}"
    typography: "{typography.title}"

Overview

Groww is an Indian app for investing in stocks, mutual funds, gold and more. Its site is white and soft gray with Groww green for the main action, slate text, Söhne for headlines and Groww Sans for interface text, both at in-between weights such as 435 and 535. Gains are green and losses orange-red. The live site ships a full set of semantic tokens for its dark surfaces. [Measured]

What defines the look:

  1. Groww green. #04b488 fills Log in and Continue, marks gains and underlines the active tab. [Measured]
  2. Slate, not black. Text is #44475b, secondary #7c7e8c and faint #a1a3ad. [Measured]
  3. In-between weights. Söhne and Groww Sans run at 435 for text and 535 for headings and buttons, a little lighter than the usual 500 and 600. [Measured]
  4. Mixed corners by role. Buttons are 8px, link pills full round, product cards 22, chart tiles 4 and 16. [Measured]
  5. A full dark token set. Surfaces, borders, accents and data colors are named for dark use (#060809, #151819, #1e2224, border #2e2e2e). [Measured]

Source for this file: the home page, the Reliance Industries stock page and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the semantic tokens the live site declares on its root element. Groww's design system documentation is not public. Portfolios and orders sit behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere or token name
Groww green#04b488Main buttons, gains, active tab; background and border accent secondary [Measured]
Gain wash#e9faf3Positive highlights [Measured]
Loss#ed5533Falling prices and returns [Measured]
Text#44475b, #7c7e8c, #a1a3adHeadings, body, faint labels [Measured]
Canvas and bands#ffffff, #f0f0f2, #f8f8f8Page and sections [Measured]
Border#e9e9ebCard and pill outlines [Measured]
Chip#f2f5f7Link chips; background always light [Measured]
Product accentsblue #5669ff, olive #a1b55cProduct tiles on the home page [Measured]
Dark surfaces#060809, #151819, #252525, surface #1e2224background primary, secondary, tertiary, surface primary [Measured]
Dark border#2e2e2eborder primary [Measured]
Dark accent wash#0f251daccent secondary subtle [Measured]

The token set also names surface levels (z1, z2, docked), overlays at 30 and 70 percent, and paired data colors (lilac, blue, sky blue, mint, olive, yellow, orange, red, magenta, brown, gray) each with a subtle version. [Measured]

Typography

RoleDesktopMobileFace and weight
Display88 on 96.848 on 48Söhne 535 and 500 [Measured]
Headline44 on 48.432 on 40 to 44Söhne 500 to 535 [Measured]
Log in title32 on 44sameSöhne 535 [Measured]
Price24not measuredSöhne 535 [Measured]
Stock title and section18 to 20 on 25 to 3218 on 25Söhne or Groww Sans 435 to 535 [Measured]
Body16 on 22sameGroww Sans 435 [Measured]
Button14 on 20 (16 on 22 on mobile)sameGroww Sans 535 [Measured]
Small and tags12 on 18sameGroww Sans 535 [Measured]

Shape and spacing

Buttons use 8, product cards 22 and 24, chart and table tiles 4, 6 and 16, and link pills 99 or 999. [Measured] Buttons carry 12 by 16 padding (16 by 24 on mobile), pill links 10 by 24. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

The web pages measured are light. The site ships its dark surface tokens, and dark sections use them, but the dark color scheme pass did not switch the page. [Measured]

Platform: iOS

How the Groww iOS app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for stocks, mutual funds, and other products and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Green buy and orange-red sell buttons on a stock screen. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the green, the slate text and the in-between weights with the web, with a dark theme from the shipped dark tokens. [Inferred]

Platform: Android

How the Groww Android app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for stocks, mutual funds, and other products and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Green buy and orange-red sell buttons on a stock screen. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the green, the slate text and the in-between weights with the web, with a dark theme from the shipped dark tokens. [Inferred]

Platform: Web

The home page, a stock page and the log in page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A white header with product links and a green Login/Sign up button, 40 high with an 8px corner. Stock pages add a Terminal link as a 32 high outlined button and tabs with a 3px green underline for the active one. On mobile, an "Install app" pill (32 high) sits in the header. [Measured]

Main action

Expected on Web: Page-level button.

A green #04b488 button with white 14px text at 535, 40 high with an 8px corner (48 high on mobile). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Overlays use black at 30 percent. [Measured] Toasts were not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Home page links are 47 to 50 high white pills with a 1px #e9e9eb border, and quick links are 38 high #f2f5f7 pills. The log in field is 42 high with a bottom-weighted 10px padding. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 40 to 48 high and pills 38 to 50. The mobile Install app pill and header links are 32. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The log in page starts with one field and a Continue button. Other options were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive site where buttons stay 8px while links become pills, which keeps actions and navigation visibly apart. [Measured]

Cross-platform consistency

Consistent across platforms: the green, slate text, gains and losses colors and Söhne and Groww Sans. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use Groww green for the main action and gains, and orange-red only for losses.
  • Set text in slate at 435 and headings at 535.
  • Keep buttons at 8px and use pills for links.
  • Draw dark surfaces from the named dark tokens.

Don't

  • Don't use pure black text on light pages.
  • Don't use green for decoration.
  • Don't jump to heavy 700 weights.

Known Gaps

  • Portfolios, orders and the signed-in dashboard sit behind an account and were not measured.
  • The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so every mobile topic is inferred.
  • Icons, motion and toasts were not measured.
  • White text on Groww green #04b488, and green product link text on white, measure 2.66 to 1, below the 4.5 to 1 minimum. That is the shipped pairing and was kept.
  • Söhne and Groww Sans are private. Inter Tight was chosen for both by comparing the same line side by side (within 1 percent at 16 and 24px). Outfit and Jost were close seconds.
  • Account deletion and store policy rules were not verified.