--- 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 | Role | Value | Where or token name | |------|-------|---------------------| | Groww green | `#04b488` | Main buttons, gains, active tab; background and border accent secondary [Measured] | | Gain wash | `#e9faf3` | Positive highlights [Measured] | | Loss | `#ed5533` | Falling prices and returns [Measured] | | Text | `#44475b`, `#7c7e8c`, `#a1a3ad` | Headings, body, faint labels [Measured] | | Canvas and bands | `#ffffff`, `#f0f0f2`, `#f8f8f8` | Page and sections [Measured] | | Border | `#e9e9eb` | Card and pill outlines [Measured] | | Chip | `#f2f5f7` | Link chips; background always light [Measured] | | Product accents | blue `#5669ff`, olive `#a1b55c` | Product tiles on the home page [Measured] | | Dark surfaces | `#060809`, `#151819`, `#252525`, surface `#1e2224` | background primary, secondary, tertiary, surface primary [Measured] | | Dark border | `#2e2e2e` | border primary [Measured] | | Dark accent wash | `#0f251d` | accent 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 | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 88 on 96.8 | 48 on 48 | Söhne 535 and 500 [Measured] | | Headline | 44 on 48.4 | 32 on 40 to 44 | Söhne 500 to 535 [Measured] | | Log in title | 32 on 44 | same | Söhne 535 [Measured] | | Price | 24 | not measured | Söhne 535 [Measured] | | Stock title and section | 18 to 20 on 25 to 32 | 18 on 25 | Söhne or Groww Sans 435 to 535 [Measured] | | Body | 16 on 22 | same | Groww Sans 435 [Measured] | | Button | 14 on 20 (16 on 22 on mobile) | same | Groww Sans 535 [Measured] | | Small and tags | 12 on 18 | same | Groww 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.