--- version: alpha name: Namma-Yatri-design-analysis description: "A ride-hailing rider app for autos, cabs and bikes that wears the colors of its vehicles: a deep slate (#2c2f3a) and an auto-rickshaw yellow (#fcc32c), full-width 50 high buttons with slate fill and yellow text, Plus Jakarta Sans in 700, 600 and 500, and a map home with a pull-up sheet and a single Where to button." status: Draft appVersion: "source snapshot of the public repository at commit b13362bf60 (2026-03-18), the last commit that still holds the app source, read 2026-10-06" platformsCovered: [Android] reviewer: "" verifiedAt: "" colors: primary: "#2c2f3a" on-primary: "#fcc32c" accent: "#fcc32c" accent-button: "#fdd836" accent-strong: "#fcb700" accent-deep: "#f09a01" accent-soft: "#fff0c9" accent-wash: "#fcf6e7" accent-faint: "#fffdf7" canvas: "#ffffff" canvas-subtle: "#f4f4f6" surface: "#f1f1f1" border: "#e5e7eb" border-light: "#e4e4e4" ink: "#2c2f3a" ink-body: "#454545" ink-muted: "#6d7280" ink-hint: "#a7a7a7" ink-faint: "#b9babe" link: "#0066ff" info: "#2194ff" info-soft: "#80b2ff" danger: "#e55454" danger-soft: "#fef8f8" success: "#53bb6f" success-deep: "#268c6e" success-soft: "#ddffeb" warning: "#ff8533" warning-soft: "#ffe7c2" splash: "#111112" field-dark: "#313440" number-plate: "#e9be4d" typography: heading-0: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 28px heading-1: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 22px fontWeight: 700 lineHeight: 28px heading-2: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 23px heading-3: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 23px sub-heading-1: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px sub-heading-2: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px body-1: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 18px body-bold: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 18px paragraph: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 18px body-small: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px tags: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 15px captions: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 13px price: fontFamily: "'Plus Jakarta Sans', sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 40px rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px sheet: 20px hero: 24px spacing: xs: 4px sm: 8px md: 12px base: 16px lg: 20px xl: 24px xxl: 32px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.sub-heading-1}" rounded: "{rounded.md}" height: 50px button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.sub-heading-1}" rounded: "{rounded.md}" height: 50px search-field: backgroundColor: "{colors.field-dark}" textColor: "{colors.canvas}" typography: "{typography.sub-heading-2}" rounded: "{rounded.lg}" padding: 12px 16px rating-chip: backgroundColor: "{colors.surface}" textColor: "{colors.ink-body}" typography: "{typography.tags}" rounded: 10px padding: 4px 8px number-plate: backgroundColor: "{colors.number-plate}" textColor: "{colors.ink}" typography: "{typography.body-bold}" rounded: "{rounded.xs}" padding: 4px 8px --- ## Overview Namma Yatri is an open ride-hailing app from India that connects riders directly to auto, cab and bike drivers. The rider app looks like the street it serves: a deep slate and a taxi yellow, big readable buttons and short lists of vehicle choices. [Observed] What defines the look: 1. **Slate and yellow.** The primary background is `#2c2f3a` and the accent is `#fcc32c`. Buttons are slate with yellow text, and yellow also marks progress, such as profile completion. [Measured] 2. **One button shape.** Full-width, 50 high, radius 8, set in 16 on 24 semibold. Secondary buttons are white with a 1 point slate outline. [Measured] 3. **Dark search, light content.** The location search sheet turns dark slate with a lighter slate field (`#313440`) and white text, while the home, vehicle list and trip details stay white and gray. [Measured] 4. **A map home with a sheet.** The home screen is a map with a bottom sheet that has a peek height and a half-expanded state, and a Where to button that starts a booking. [Measured] 5. **Plus Jakarta Sans.** One family in weights from light to bold, with Noto Sans families for Kannada and Telugu. [Measured] 6. **Signal colors with soft fills.** Red `#e55454`, green `#53bb6f`, orange `#ff8533` and blue `#0066ff`, each with a pale background for banners and chips. [Measured] Source for this file: the rider app's styles, theme configuration and screens in the public repository, read on 2026-10-06 from the last commit that still included them. No on-device capture was done. These are the default brand values. Other city brands built from the same screens override colors through configuration. [Inferred] See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Primary background and button | `#2c2f3a` | Default theme configuration | | Text on primary and yellow accent | `#fcc32c` | Default theme configuration | | Alternate button yellow | `#fdd836` | Shared color list | | Strong and deep yellows | `#fcb700`, `#f09a01` | Shared color list | | Soft yellow fills | `#fff0c9`, `#fcf6e7`, `#fffdf7` | Shared color list | | Splash background | `#111112` | Splash screen | | White and light grays | `#ffffff`, `#f4f4f6`, `#f1f1f1`, `#e5e7eb` | Shared color list | | Body, muted and hint text | `#454545`, `#6d7280`, `#a7a7a7` | Shared color list | | Search field on dark | `#313440` | Search sheet | | Link and action blue | `#0066ff`, `#2194ff` | Shared color list | | Danger | `#e55454`, soft `#fef8f8` | Default theme configuration | | Success | `#53bb6f`, deep `#268c6e`, soft `#ddffeb` | Shared color list | | Warning | `#ff8533`, soft `#ffe7c2` | Shared color list | | Number plate | `#e9be4d` | Ride screens | The shared list also holds many one-off tints (mostly the same hues at 6 to 30 percent alpha) used behind icons and banners. [Measured] Against the slate, the yellow text measures about 9 to 1. [Measured by calculation] ### Typography Plus Jakarta Sans is the default family, with weights named Regular, Medium, SemiBold, Bold, Light and ExtraLight, plus italic variants. Kannada screens use Noto Sans Kannada and Telugu screens use Noto Sans Telugu. [Measured] Sizes run from 8 to 72 in single steps, with these named styles: heading 0 is 24 on 28 bold, heading 1 is 22 on 28 bold, headings 2 and 3 are 18 on 23, sub-heading 1 is 16 on 24 semibold, sub-heading 2 is 16 on 24 medium, body 1 is 14 on 18 medium, paragraph is 14 on 18 regular, tags are 12 on 15 medium, captions are 10 on 13 and price is 40 on 40 bold. Tamil drops sub-heading 1 to 13 and body 1 to 12. [Measured] A seven-segment face is used for the digital number display. [Measured] ### Shape and spacing Corner radii seen in the home screen, search and dialogs are 4, 5, 6, 8, 10, 12, 16, 18, 20 and 24, with 8 for buttons and dialog actions, 10 for rating chips and 20 for the search results card. [Measured] Spacing values counted across the home, search and dialog views are led by 16, then 20, 12, 8, 4 and 24. [Measured] ### Iconography and motion Icons are image assets with names that start `ny_ic_`, plus Lottie animations for splash, loaders and the finding-a-ride screen. [Measured] A yellow-and-black auto-rickshaw loader is used while searching. [Measured from asset names] ### Themes No dark theme was found in the rider app. A per-city configuration can replace colors, fonts and button corner radius. [Measured for the configuration, Inferred for the cities] ## Platform: iOS The iOS client was not in the source that was read. Nothing in this file was measured on iOS. ### 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. Not measured. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. Not measured. [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 measured. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. Not measured. The screens are drawn by the app itself on both systems, so the Android description is the best guide. [Inferred] ## Platform: Android How the Android app looks and behaves. Items come from public source files. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. A header with a chevron-left image on the start edge. Screens register their own back-press handlers. [Measured] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. No tab bar. Home is the map with a settings side menu. [Measured for the side menu, Inferred for the absence of tabs] ### Main action Expected on Android: Floating action button. A full-width 50 high button: Where to on home, then confirm and book buttons on the sheets. Slate fill, yellow text, radius 8, 10 margin each side. [Measured] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. A coordinator-style bottom sheet on home with a peek height and a half-expanded ratio, and pop-up dialogs that use 8 and 12 radii. Banners use pale green, red or yellow fills. [Measured] ### Controls Expected on Android: Material switches, pickers, chips. Custom components: vehicle option cards with 6 and 12 radius, rating chips and search fields. [Measured] ### Text sizing Expected on Android: Font scale. Font sizes are fixed numbers with a multiplier of 1.0, so they do not scale with system text size in the code that was read. [Measured] ### Touch and pointer targets Expected on Android: 48dp minimum. The main button is 50 high. Other targets were not measured. [Measured for the button] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not verified. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Named image assets and Lottie files, with a back chevron image on headers. [Measured] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Account deletion and the data safety form entries were not checked. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The rider app draws its own components instead of Material ones, with only the dialog styles using Material alert themes. [Measured] ## Platform: Web No web client for riders was in the source that was read. The brand site was not measured. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Not applicable. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. Not applicable. [Observed] ### Main action Expected on Web: Page-level button. Not applicable. [Observed] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not applicable. [Observed] ### Controls Expected on Web: Native or custom. Not applicable. [Observed] ### Text sizing Expected on Web: Browser zoom. Not applicable. [Observed] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Not applicable. [Observed] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not applicable. [Observed] ### Icons Expected on Web: Any. Not applicable. [Observed] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. Not applicable. [Observed] ## Cross-platform consistency Only Android was measured, so consistency across platforms cannot be stated. [Inferred] ## Do's and Don'ts ### Do - Pair the slate fill with yellow text on primary buttons. - Keep one button shape: full width, 50 high, radius 8. - Turn the search sheet dark and keep results on white. - Use pale fills with a strong text color for success, danger and warning banners, and check the pair reaches a readable ratio. - Use yellow for progress and highlights, not for body text. ### Don't - Don't put yellow text on white. It does not reach a readable ratio. - Don't add a second accent color to buttons. - Don't scale the type with a multiplier other than 1.0 without checking layouts. ## Known Gaps - No on-device capture was done. All statements come from reading source. - The iOS client was not in the source and the Android results were not checked on a device. - The values are the default brand. Other city brands override them and were not compared. - The source that was read is from the last commit that held it. The public repository's current head no longer includes the rider app. - Home screen spacing, bottom sheet heights and the vehicle card layout were counted but not measured pixel by pixel. - Account deletion and store policy rules were not verified.