Grab

Overview

Grab is Southeast Asia's superapp ecosystem built on a foundation of **Pragmatic Accessibility**—a design philosophy that prioritizes clarity, speed, and inclusive interaction across diverse user contexts (urban commuters, delivery partners, merchants, financial service users). The visual language combines a vibrant, energetic green primary (#00B14F) with a neutral, professional gray secondary (#54595F), creating a confident yet approachable interface. The brand personality is solution-oriented and action-focused: Grab doesn't explain problems, it solves them. Voice is direct, conversational, and locally aware—never corporate-speak. Example sentence in brand voice: 'Your ride's 4 minutes away. Driver's name is Ravi.'

Colors

The color system is built around **Functional Vibrancy**: primary green (#00B14F) signals action, trust, and growth—it appears on all CTAs, confirmations, and success states. This is the color users click. Secondary gray (#54595F) grounds the interface, used for headers, navigation, and secondary text. Tertiary blue (#3860BE) supports data visualization and secondary actions. The surface stack (white #FFFFFF through #D8D8D8) provides clear visual hierarchy without relying on darkness. Usage rules: Primary (#00B14F) is reserved exclusively for interactive elements and confirmations—never use it for passive text or backgrounds. On-primary is always white (#FFFFFF) for maximum contrast (WCAG AAA). The primary-container (#CCEFDC) and on-primary-container (#006A2F) pair is used for success mess

Typography

The type system uses **Inter exclusively** across all scales, chosen for its exceptional legibility on small screens and its neutral, modern character. Display (80px, 800 weight) is reserved for hero headlines and brand moments—it commands attention without decoration. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content and descriptions, with 28px and 24px line-heights respectively to ensure comfortable reading on mobile (line-height: 1.4–1.5). Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for buttons, badges, and UI labels. Letter-spacing is tightened on display (-0.04em) to create visual impact, neutral (0em) on body text for readab

Layout

The layout system operates on a **12-column fluid grid** with a fixed container max-width of 1140px, scaling down to 1024px on tablets and 767px on mobile. Spacing follows a semantic scale: unit (8px) is the base; gutter (24px) separates major sections; lg (40px) creates breathing room between hero and content; xl (64px) is reserved for page-level separation. Margins and padding use multiples of the 8px unit (12px, 24px, 40px, 64px) to maintain rhythm. The page rhythm emphasizes white space: hero sections use 80px top/bottom padding, content sections use 40px, and cards use 24px internal padding. Container max-width ensures text lines stay within 65–75 characters for optimal readability. Mobile-first approach: base styles assume 375px viewport, then expand with media queries at 768px (tabl

Elevation & Depth

Elevation is achieved through **subtle layering and shadow depth**, not color darkening. Level 1 (Base): flat surfaces at surface (#FFFFFF) with no shadow, used for primary content areas and cards in neutral states. Level 2 (Raised): cards and containers use elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to create minimal separation from the background—this is the default card state. Level 3 (Elevated): interactive elements on hover or focus use elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)), creating a subtle lift. Level 4 (Modal/Overlay): modals and dropdowns use elevation.lg (2px 8px 23px 3px

Shapes

The shape system follows **Pragmatic Softness**: corners are kept minimal and functional, never decorative. Buttons and inputs use sm (2px) radius for a clean, modern appearance that feels professional without coldness. Cards and larger containers use DEFAULT (4px) radius for subtle definition. Modals and elevated surfaces use lg (12px) radius to signal importance and create visual separation. Search inputs and pill-shaped elements use full (9999px) radius to signal accessibility and ease of use. The reasoning: 2–4px radii maintain the interface's efficiency and clarity, while 9999px is reserv

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary green (#00B14F) background with white text, 44px height, 12px vertical / 24px horizontal padding, 2px radius, and label-md typography (14px, 600 weight). On hover, background shifts to #008E3F (darker green) with a 200ms transition. On active/pressed, background becomes #006A2F. Button-secondary uses surface-container-highest (#D8D8D8) background with primary text, 1px outline-variant border, and the same dimensions. Hover state shifts to surface-container-high (#E8E8E8). Both buttons disable to surface-container-highest with on-surface-variant text (50% opacity) and cursor: not-allowed.

Containers & Surfaces Cards are the primary content container. Default card uses surface (#FFFFFF) backgr

Do's and Don'ts

**Do**

• Do use primary green (#00B14F) exclusively on CTAs and confirmations—it's the signal for 'click here' and 'success.'
• Do maintain 24px gutters between major sections and 40px between hero and content to create visual breathing room.
• Do apply 2px border-radius to buttons and inputs for a clean, modern appearance that feels efficient.
• Do use Inter at 16px body-md with 24px line-height for comfortable reading on mobile devices.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to guide attention.
• Do use elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) as the default card shadow—it's subtle but present.

**Don't**

• Don't use primary green on passive text, backgrounds, or non-interactive elements—reserve it for actions only.
• Don't apply hard corners (0px radius) to buttons, inputs, or cards; use 2–4px for consistency.
• Don't exceed 1140px container max-width on desktop; content becomes hard to scan.
• Don't use shadows heavier than elevation.lg (2px 8px 23px 3px rgba(0, 0, 0, 0.2)) except for full-screen modals.
• Don't mix typefaces; Inter is the only font family used across the system.
• Don't disable buttons by reducing opacity; use surface-container-highest background with on-surface-variant text and cursor: not-allowed.