Travel / Android

Namma Yatri

Namma Yatri uses slate and taxi yellow the way a road sign does: one button shape in slate with yellow text, a dark search sheet and pale-filled banners for status, all in Plus Jakarta Sans.

Download
  • #FCC32C
  • #2C2F3A
  • #FDD836
  • #F1F1F1
  • #0066FF
  • #E55454

Color

Every color token in the file, grouped by role.

Brand

  • 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

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F4F4F6
  • surface#F1F1F1

Text

  • ink#2C2F3A
  • ink body#454545
  • ink muted#6D7280
  • ink hint#A7A7A7
  • ink faint#B9BABE
  • link#0066FF

Lines

  • border#E5E7EB
  • border light#E4E4E4

Status

  • info#2194FF
  • info soft#80B2FF
  • danger#E55454
  • danger soft#FEF8F8
  • success#53BB6F
  • success deep#268C6E
  • success soft#DDFFEB
  • warning#FF8533
  • warning soft#FFE7C2

More

  • splash#111112
  • field dark#313440
  • number plate#E9BE4D

Typography

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

  • Plus Jakarta SansOpen font, shown as published.
  • heading 024px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • heading 122px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • heading 218px / 700 / 23px

    The quick brown fox jumps over the lazy dog

  • heading 318px / 600 / 23px

    The quick brown fox jumps over the lazy dog

  • sub heading 116px / 600 / 24px

    The quick brown fox jumps over the lazy dog

  • sub heading 216px / 500 / 24px

    The quick brown fox jumps over the lazy dog

  • body 114px / 500 / 18px

    The quick brown fox jumps over the lazy dog

  • body bold14px / 700 / 18px

    The quick brown fox jumps over the lazy dog

  • paragraph14px / 400 / 18px

    The quick brown fox jumps over the lazy dog

  • body small12px / 400 / 16px

    The quick brown fox jumps over the lazy dog

  • tags12px / 500 / 15px

    The quick brown fox jumps over the lazy dog

  • captions10px / 400 / 13px

    Continue to checkout

  • price40px / 700 / 40px

    Namma Yatri

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • sheet20px
  • hero24px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl24px
  • xxl32px

Components

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

  • button primary
    button-primary
  • button secondary
    button-secondary
  • search field
    search-field
  • rating chip
    rating-chip
  • number plate
    number-plate
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 159 lines
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

RoleValueWhere
Primary background and button#2c2f3aDefault theme configuration
Text on primary and yellow accent#fcc32cDefault theme configuration
Alternate button yellow#fdd836Shared color list
Strong and deep yellows#fcb700, #f09a01Shared color list
Soft yellow fills#fff0c9, #fcf6e7, #fffdf7Shared color list
Splash background#111112Splash screen
White and light grays#ffffff, #f4f4f6, #f1f1f1, #e5e7ebShared color list
Body, muted and hint text#454545, #6d7280, #a7a7a7Shared color list
Search field on dark#313440Search sheet
Link and action blue#0066ff, #2194ffShared color list
Danger#e55454, soft #fef8f8Default theme configuration
Success#53bb6f, deep #268c6e, soft #ddffebShared color list
Warning#ff8533, soft #ffe7c2Shared color list
Number plate#e9be4dRide 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.