---
name: "inDrive Services in Pakistan"
description: "High-energy, modern transportation and delivery platform design system characterized by vibrant chartreuse green accents, warm cream backgrounds, dark high-contrast typography, crisp rounded cards, and pill controls."
version: "1.0"
colors:
  primary: "#c1f11d"
  primary-strong: "#9dd90d"
  on-primary: "#141414"
  ink: "#000000"
  ink-strong: "#141414"
  body: "#3f3f3f"
  canvas: "#fffee9"
  surface-soft: "#ffffff"
  surface-muted: "#f4f3d8"
  surface-neutral: "#dcdbc7"
  hairline: "#e4e5e6"
  hairline-soft: "#ededed"
  overlay: "rgba(20, 20, 20, 0.5)"
  success: "#02952b"
  warning: "#ffc13c"
  destructive: "#d13d35"
  accent-blue: "#4087e1"
  accent-violet: "#7151ff"
  accent-orange: "#ff5827"
  accent-light-green: "#e4ff88"
typography:
  heading-xl:
    fontFamily: "\"PP Agrandir\", \"Suisse Intl\", sans-serif"
    fontSize: "64px"
    fontWeight: "700"
    lineHeight: "1.20"
    letterSpacing: "-0.02em"
  heading-lg:
    fontFamily: "\"PP Agrandir\", \"Suisse Intl\", sans-serif"
    fontSize: "40px"
    fontWeight: "700"
    lineHeight: "1.00"
    letterSpacing: "-0.02em"
  heading-md:
    fontFamily: "\"PP Agrandir\", \"Suisse Intl\", sans-serif"
    fontSize: "28px"
    fontWeight: "700"
    lineHeight: "1.14"
    letterSpacing: "normal"
  body-lg:
    fontFamily: "\"Suisse Intl\", \"Noto Sans\", sans-serif"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "1.35"
    letterSpacing: "normal"
  body-md:
    fontFamily: "\"Suisse Intl\", \"Noto Sans\", sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.50"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "\"Suisse Intl\", \"Noto Sans\", sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.36"
    letterSpacing: "normal"
rounded:
  card: "16px"
  button: "16px"
  pill: "40px"
  sm: "12px"
spacing:
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  container: "1256px"
  section: "90px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "20px 32px"
    fontWeight: "600"
    fontSize: "20px"
  secondary-button:
    background: "{colors.ink-strong}"
    color: "{colors.surface-soft}"
    borderRadius: "{rounded.button}"
    padding: "16px 24px"
    fontWeight: "600"
    fontSize: "16px"
  pill-toggle:
    background: "{colors.surface-soft}"
    color: "{colors.ink-strong}"
    borderRadius: "{rounded.pill}"
    padding: "8px 12px"
    fontSize: "16px"
    fontWeight: "600"
  hero-card:
    background: "transparent"
    borderRadius: "0px"
    padding: "0px 12px"
    gap: "20px"
  service-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "24px"
    boxShadow: "0px 5px 20px 0px rgba(38, 38, 38, 0.08)"
  feature-banner:
    background: "{colors.primary}"
    color: "{colors.ink-strong}"
    borderRadius: "{rounded.card}"
    padding: "40px"
  news-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "16px"
    gap: "12px"
  footer-section:
    background: "{colors.surface-neutral}"
    color: "{colors.body}"
    padding: "56px 0px 40px"
source: "https://indrive.com/en-pk"
captured: "2026-10-16T07:27:56.258Z"
---

# DESIGN.md: inDrive Services in Pakistan

## Source

- URL: https://indrive.com/en-pk
- Captured: 2026-10-16T07:27:56.258Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of inDrive Services in Pakistan](./screenshot.png)

## Design Summary

inDrive Services in Pakistan employs an expressive, high-energy design identity anchored by high-visibility chartreuse green (#c1f11d) against a warm cream (#fffee9) or white background. Modern typography mixes PP Agrandir for bold impactful headings with Suisse Intl for clear, highly readable body copy. UI elements feature rounded corners (16px cards/buttons, 40px pills) and distinct multi-column grid structures.

## Visual Language

- Vibrant chartreuse lime green (#c1f11d) serves as the primary brand trigger on hero backgrounds and primary action CTAs.
- Warm cream canvas (#fffee9) paired with pure white cards (#ffffff) creates layered visual depth.
- Bold typographic contrast using PP Agrandir for punchy display headers alongside Suisse Intl for UI text.
- Pill-shaped interactive elements (40px radius) for language pickers, nav controls, and circular social icons.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Max-width container centered at 1256px with 12px side gutters.
- Fixed persistent top navigation header with transparent or solid background depending on scroll position.
- Multi-column responsive grid structures for services (3–4 columns), news stories, and footer navigation (5 columns).
- Full-bleed hero banner slider sections with left-aligned typographic callouts.

## Components

- Primary CTA buttons use 16px radius, chartreuse background (#c1f11d), and dark text (#141414); hover state darkens to #9dd90d.
- Secondary CTA buttons use dark neutral background (#141414) with white text (#ffffff).
- Category cards feature subtle soft shadow '0px 5px 20px 0px rgba(38, 38, 38, 0.08)' on clean white background.
- Navigation pills feature dark grey stroke or white fill with embedded icon and inline text.

## Content Style

- Direct, empowering language focused on fairness, choice, and transparency ('Fair rides for the price you both agree on').
- Clear separation between service audiences ('For Passengers', 'For Drivers', 'For Couriers', 'For Business') with chevron link indicators.
- Timestamped news cards with estimated read times and tag categories.

## Agent Build Instructions

- Import display font 'PP Agrandir' for headings (weights 700) and 'Suisse Intl' for body and interface text.
- Configure CSS variables for color scheme: --main-green: #c1f11d, --main-dark: #141414, --main-light-bg: #fffee9, --neutral-beige: #dcdbc7.
- Set layout containers with a default maximum width of 1256px and inline padding of 12px.
- Enforce border-radius scale: 16px for buttons and cards, 40px for pill tags and circular control buttons.

## Evidence And Confidence

- Observed: CSS custom properties specify --main-green (#c1f11d), --main-dark (#141414), --main-light-bg (#fffee9), and --neutral-beige (#dcdbc7).
- Observed: Typography relies on PP Agrandir for major display headings (64px, 40px, 28px bold) and Suisse Intl for body copy (16px, 14px, 20px).
- Observed: Buttons and cards consistently measure 16px border-radius, while header controls measure 40px border-radius.
- Observed: Page layout uses container width 1256px with section padding of 90px.
- Inferred: Primary green hover color #9dd90d is derived from --main-green-hover and --statement-background-brandpressed.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://indrive.com/en-pk

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.