inDrive

Overview

inDrive is a peer-to-peer mobility and delivery platform that inverts the traditional ride-hailing model by empowering users to negotiate fares directly with drivers. The design system embodies 'Transparent Optimism'—a visual language that combines energetic lime-green accents (#c1f11d) with warm, accessible neutrals to convey fairness, clarity, and human connection. The brand personality is conversational and empowering: it speaks to users as partners in a transaction, not passive consumers. The UI prioritizes legibility and directness, using bold typography (Suisse Intl at 700 weight for headlines) and high-contrast interactions to make every action feel intentional and rewarding. Voice example: 'You set the price. Drivers accept or counter. Fair deals happen when both sides agree.'

Colors

The color system is anchored by Primary (#c1f11d), an electric lime-green that signals action, trust, and the brand's commitment to fairness. This accent appears on all primary CTAs ('Book', 'Check them all'), focus states, and key interactive elements. It is never used for body text or large surfaces—its intensity is reserved for moments that demand attention. Secondary (#505050) is a warm charcoal that grounds the interface, used for body text, secondary labels, and disabled states. Tertiary (#e9ecef) is a soft neutral gray that creates visual separation and container backgrounds. The surface stack ranges from warm cream (#fffef9) at the brightest level to cooler grays (#e9ecef) for interactive containers, creating subtle depth without darkness. Error states use a clear red (#d32f2f) for

Typography

The typography system uses Suisse Intl as the primary typeface, paired with Noto Sans as a fallback, creating a modern yet accessible voice. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; Headline-lg (40px, 700 weight) anchors major sections; Headline-md (28px, 700 weight) introduces subsections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) handle narrative content with generous line-height (28px and 24px respectively) for readability. Label-md (14px, 600 weight, 0.01em letter-spacing) is used for button text, form labels, and interactive elements; Label-sm (12px, 500 weight, 0.05em letter-spacing) for metadata and helper text. All headlines use negative letter-spacing (-0.04em to -0.01em) to tighten their visual weight and

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on all screen sizes. The page rhythm uses semantic spacing: lg (40px) separates major sections (hero to feature cards), md (24px) creates breathing room within card groups and form sections, and sm (12px) provides internal padding within components. The gutter is consistently 24px, maintaining alignment across the viewport. Hero sections use full-width backgrounds with overlay gradients (semi-transparent dark overlays at rgba(0, 0, 0, 0.3) to rgba(0, 0, 0, 0.5)) to ensure text legibility over photographic backgrounds. Cards and containers are inset from the viewport edge by gutter spacing, creating a contained, organized feel. White-space is generous: buttons have 20px ver

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids darkness while maintaining clear visual hierarchy. Level 1 (Base): The background is a warm cream (#fffef9) with no shadow, establishing the foundation. Level 2 (Cards & Containers): Standard cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at #d0d0d0, creating subtle separation from the background. Level 3 (Modals, Dropdowns & Elevated States): Elevated surfaces use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment, signaling prominence without visual heaviness. Hover states tra

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons use lg radius (1rem / 16px) for primary and secondary actions, creating a friendly, inviting appearance that encourages interaction. Cards and containers use lg radius (1rem) for consistency with buttons, reinforcing a cohesive component family. Form inputs use DEFAULT radius (0.5rem / 8px), a tighter radius that signals functional, utilitarian purpose while remaining approachable. Badges and pills use full radius (9999px) to create a distinct vis

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background-color: #c1f11d with text-color: #141414, padding: 20px 32px, height: 48px, and rounded: 1rem. On hover, the background shifts to #a8d91a (primary-fixed-dim) with a 200ms ease-out transition. Secondary buttons use a transparent background with a 2px solid border at #c1f11d and the same text color, creating a lower-emphasis alternative. Tertiary buttons use background-color: #e9ecef with text-color: #141414 and a 1px solid border at #d0d0d0, suitable for less critical actions. All buttons use label-md typography (14px, 600 weight) except primary CTAs, which use 20px, 600 weight for prominence.

Containers & Surfaces Cards use background-color: #faf8f3 (surface-container-lowest) with rounded: 1

Do's and Don'ts

**Do**

• Do use the primary lime-green (#c1f11d) exclusively on CTAs, focus states, and brand moments—never on body text or large surfaces.
• Do maintain 20px vertical and 32px horizontal padding on primary buttons to ensure touch-friendly targets (minimum 48px height).
• Do apply the lg radius (1rem) to buttons and cards to create a cohesive, approachable component family.
• Do use generous spacing (lg: 40px between sections, md: 24px within sections) to reduce cognitive load and improve scannability.
• Do transition all interactive state changes over 150–200ms with ease-out timing to signal responsiveness without feeling sluggish.
• Do use Suisse Intl at 700 weight for all headlines to create visual impact and brand distinctiveness.

**Don't**

• Don't use the primary lime-green (#c1f11d) for body text, disabled states, or large background surfaces—reserve it for moments that demand attention.
• Don't reduce button padding below 20px vertical or 32px horizontal; smaller targets frustrate users and violate accessibility guidelines.
• Don't mix border-radius values within the same component family (e.g., don't use sm radius on one button and lg on another).
• Don't apply shadows to buttons or interactive elements; use color and border changes instead to signal state.
• Don't use transition durations shorter than 150ms or longer than 300ms; faster feels jarring, slower feels unresponsive.
• Don't use system fonts (system-ui, -apple-system) in place of Suisse Intl; the typeface is core to brand identity.