Mobile Club

Overview

Mobile Club is a French smartphone rental platform that democratizes access to premium mobile devices through affordable monthly subscriptions. The brand serves price-conscious consumers and young professionals seeking flexibility without long-term commitment. The design aesthetic is "Energetic Minimalism"—a fusion of bold, high-saturation accent colors (particularly the signature electric yellow #fff95f) against a serene, near-white canvas (#fefdf9), creating visual tension that communicates both playfulness and trustworthiness. The UI evokes a sense of youthful optimism and accessibility: the yellow feels celebratory, not corporate; the clean cream background feels spacious and uncluttered, not sterile.

The brand voice is conversational, direct, and solution-oriented. Vocabulary leans toward action verbs and benefit-driven language: "Louez," "Profitez," "Découvrez." Tone is never patronizing; it respects the user's intelligence while maintaining warmth. The brand assumes users are pragmatic decision-makers who value clarity over hype. Example sentence in brand voice: "Votre iPhone 18 Pro arrive demain—sans engagement, sans surprise."

Colors

The color system is built on a principle of "Accent-Driven Clarity." The primary accent, electric yellow (#fff95f), is reserved exclusively for high-priority call-to-action elements, interactive states, and brand moments. It appears on buttons, badges, and hero highlights, commanding attention without overwhelming. The secondary accent, vibrant teal (#00b67a), supports secondary actions, success states, and trust signals (e.g., "Assurance incluse" badges). A tertiary accent, periwinkle blue (#7d89ff), is used sparingly for informational elements, gradients, and decorative accents in hero sections.

The surface stack is anchored in a warm, off-white palette: surface (#fefdf9) serves as the primary background, with container variants ranging from surface-container-lowest (#fefdf9) for subtle

Typography

The type system uses Whyte Inktrap, a geometric sans-serif with distinctive angular letterforms, as the sole typeface family across all scales. This monolithic choice reinforces brand cohesion and creates a distinctive, recognizable voice. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks, commanding the page with its scale and weight. Headline-lg (40px, 600 weight) anchors secondary sections and card titles. Headline-md (28px, 600 weight) is used for subsection headers and prominent labels. Title-lg (20px, 600 weight) marks tertiary headings and card subtitles. Body-lg (18px, 500 weight) is the primary reading size for long-form content and prominent descriptions. Body-md (16px, 400 weight) is the default paragraph text, set at 24px

Layout

The page layout uses a 12-column grid system with a maximum container width of 1280px, centered with auto margins. The grid is fluid on mobile (100vw with 24px horizontal gutter) and fixed on desktop. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for compact grouping, md (24px) for standard section padding and card spacing, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter between grid columns is consistently 24px. White-space is treated as a design element: sections are separated by lg spacing (40px) to create visual breathing room, and card padding uses md spacing (24px) to balance content density. Container max-width is 1280px on desktop; on tablet (768px–1024px), containers scale to 90vw; on mobile, containe

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the surface (#fefdf9) with no shadow, representing the primary canvas. Level 2 (Standard Cards & Inputs): background color shifts to surface-container-low (#faf9f6) or surface-container (#f5f4f1) with a subtle shadow of 0 4px 12px rgba(0, 0, 0, 0.08), creating gentle separation from the base. Level 3 (Elevated Cards, Modals, Dropdowns): background color elevates to surface-container-high (#efefec) or surface-container-highest (#e9ecef) with a stronger shadow of

Shapes

The shape philosophy is "Geometric Warmth"—combining sharp, angular forms (reflecting Whyte Inktrap's geometric aesthetic) with rounded corners that soften the overall impression and improve usability. Buttons use full rounding (9999px border-radius) to create pill-shaped affordances that feel friendly and clickable; this applies to primary, secondary, and ghost button variants. Cards and containers use lg rounding (1rem / 16px) to balance geometric precision with approachability. Input fields and form elements use DEFAULT rounding (0.5rem / 8px) for a more technical, structured appearance. Ba

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#fff95f), text color: {colors.on-primary} (#000000), padding: 10px 24px, height: 48px, border-radius: 9999px, font-weight: 500, and font-size: 14px (label-md). On hover, background transitions to {colors.primary-fixed-dim} (#ffd700) with a 200ms ease-out animation. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) to create a tactile depression effect. Secondary buttons use a transparent background with a 2px solid border at {colors.on-surface} (#000000), text color: {colors.on-surface}, and the same padding and height as primary. On hover, background becomes {colors.surface-container-high} (#efefec) with a 200ms transition. Ghost buttons (tertiary) use

Do's and Don'ts

**Do**

• Do use the primary yellow (#fff95f) exclusively on high-priority CTAs, interactive states, and brand moments—never on passive elements or backgrounds.
• Do maintain the 24px gutter and lg spacing (40px) between major sections to preserve the spacious, uncluttered aesthetic.
• Do apply Whyte Inktrap consistently across all text scales; never mix typefaces or fall back to system fonts in production.
• Do use the full 9999px border-radius on buttons and badges to signal affordance and friendliness.
• Do apply the shadow system (0 4px 12px rgba(0, 0, 0, 0.08) for standard, 0 3px 8px rgba(0, 0, 0, 0.15) for elevated) to create subtle depth without visual heaviness.
• Do test all interactive elements for WCAG AA contrast: primary yellow (#fff95f) on black (#000000) achieves 15:1 contrast; secondary text (#3c3c3c) on cream (#fefdf9) achieves 10.5:1.

**Don't**

• Don't use the primary yellow on non-interactive elements, backgrounds, or decorative accents—it must remain reserved for CTAs and active states.
• Don't mix Whyte Inktrap with system fonts or web-safe fallbacks; always load the full font stack via @font-face or preload links.
• Don't apply shadows heavier than 0 3px 8px rgba(0, 0, 0, 0.15); the design relies on subtle depth, not dramatic layering.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements; maintain the geometric-warmth philosophy.
• Don't reduce the gutter or section spacing below 24px and 40px respectively; white-space is a core brand asset.
• Don't apply text-shadow or other legibility hacks on large text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only for small labels over busy backgrounds.