CityBike

Overview

CityBike is a bike-sharing platform built on Google's Material Design 3 system, delivering a clean, accessible, and data-driven interface for urban mobility. The design aesthetic is "Tech-Forward Minimalism"—a philosophy that prioritizes clarity and trust through generous whitespace (surface: #ffffff), precise typography (Roboto at 16px body-md), and a single, confident accent color (primary: #1a73e8, Google's signature blue). The brand serves urban commuters who value reliability, speed, and transparency; the UI evokes a sense of control and confidence, never overwhelming the user with visual noise. Every interaction—from selecting a bike station to viewing trip history—feels intentional and grounded.

The voice is professional yet approachable: direct, data-aware, and respectful of the user's time. Sentences are short and action-oriented. Example: "Your bike is ready at Station 12. Unlock in 30 seconds." The brand avoids marketing hyperbole; instead, it speaks in facts and clear affordances. Personality traits: efficient, trustworthy, civic-minded.

Colors

CityBike's color system is anchored in Google's Material Design palette, with a strict separation between functional surfaces and interactive accents. Primary (#1a73e8) is the signature Google blue, used exclusively for CTAs, links, active states, and focus indicators—it commands attention without aggression. On-primary (#ffffff) ensures text legibility at WCAG AA contrast ratios (21:1). The surface stack (surface: #ffffff, surface-container: #e9ecef, surface-container-highest: #d0d0d0) creates visual hierarchy through subtle gray shifts; this is critical for distinguishing interactive zones (cards, modals, dropdowns) without introducing competing colors. On-surface (#202124) is a near-black that reads as authoritative and calm; on-surface-variant (#5f6368) is used for secondary text and d

Typography

The type system uses Roboto across all scales, a choice that reinforces Google's ecosystem and ensures pixel-perfect rendering on all devices. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines; headline-lg (40px, 600 weight) anchors section titles; headline-md (28px, 600 weight) breaks up content zones. Body-md (16px, 400 weight, 0.03em tracking) is the primary reading size, set at 24px line-height for comfortable scanning. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, ensuring they stand out as interactive. On small labels over busy backgrounds (e.g., station badges), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to maintain legibility. Letter-spacing is calibrated per size: larger display text uses negative tracking (

Layout

CityBike uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Gutter spacing is 24px (md token), applied consistently between columns and at container edges. The spacing scale is semantic: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, xl (64px) for hero-to-content transitions. White-space is generous—never cramped. Sections are separated by lg spacing (40px) vertically, creating a rhythm that guides the eye downward without fatigue. Container padding is always md (24px) on desktop, reducing to sm (12px) on mobile. The grid respects the 8px unit system: all measurements are multiples of 8px (4px, 8px, 12px, 16px, 24px, 32px, 40px,

Elevation & Depth

Depth in CityBike is conveyed through a restrained shadow system and subtle background shifts, never through color darkening. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and subtle depth, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and dropdown panels, lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating action elements. Shadows use a consistent black with 6–15% opacity, never pure black. Interactive elements (buttons, inputs) do not cast shadows at rest; they gain a subtle md shadow on hover to signal elevation. Modals and overlay

Shapes

CityBike adopts a philosophy of "Precise Geometry"—rounded corners are minimal and functional, never decorative. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px), a subtle curve that softens hard edges without appearing playful or organic. Cards use rounded.md (0.75rem / 12px), slightly more generous to signal containment and breathing room. Modals and full-width overlays use rounded.lg (1rem / 16px) at the top corners only, grounding them to the viewport. Badges and pills use rounded.full (9999px) for their inherent circular nature. The rationale: smaller radii (8px) on interactive eleme

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses backgroundColor: {colors.primary} (#1a73e8), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 40px, rounded: {rounded.DEFAULT} (8px), and a subtle box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12). On hover, the background darkens to #1765cc and shadow increases to 0 3px 6px rgba(0, 0, 0, 0.16), signaling interactivity. On focus, add a 2px solid outline in #00639b with 2px offset. Button-secondary is transparent with a 1px border in {colors.outline-variant} (#dadce0); on hover, the background shifts to {colors.surface-container-low} (#eeeeee). Transition all color and shadow changes over 0.218s (Google's standard). Disabled buttons shift to surface-container (#e9ecef) with on-surface-vari

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for CTAs, links, and focus states—never for backgrounds or decorative elements.
• Do maintain 1px borders in outline-variant (#dadce0) on all cards, inputs, and containers to define edges crisply.
• Do apply md spacing (24px) between major sections and sm spacing (12px) within component groups to establish visual rhythm.
• Do use Roboto at 16px body-md with 24px line-height for all body text to ensure readability and consistency.
• Do transition interactive states (hover, focus, active) over 0.218s using background-color and box-shadow, never opacity.
• Do reserve tertiary (#34a853) for success states and positive confirmations; error (#d33b27) for destructive actions only.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no brand colors from other platforms.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)); excessive shadows flatten the hierarchy.
• Don't use border-radius greater than 16px except for full-circle badges (rounded.full); larger radii feel unengineered.
• Don't mix font families—Roboto only, across all scales and weights.
• Don't set line-height less than 1.5 for body text; cramped leading reduces scannability.
• Don't disable buttons by reducing opacity; always shift to surface-container (#e9ecef) with on-surface-variant text (#5f6368).