Levago

Overview

Levago is a French web agency brand system built on **Aggressive Minimalism** — a design philosophy that strips away decoration and embraces radical contrast to command attention. The brand serves SME decision-makers (artisans, tradespeople, professionals) who demand clarity, speed, and no surprises. The aesthetic is deliberately confrontational: pure black (#000000) canvas with neon-lime accent (#CCFF00) creates visual tension that communicates urgency and decisiveness. The UI evokes the aesthetic of technical blueprints and industrial signage — functional, uncompromising, impossible to ignore. Voice: direct, confident, slightly irreverent. Example: 'Zéro texte à écrire. Zéro prix caché. Zéro site générique. En ligne en 2 semaines.' — every word earns its place; no filler, no corporate softness.

Colors

The color system is built on **binary contrast** with a single accent. Primary (#CCFF00) is the brand's signature neon-lime — used exclusively on CTAs, highlights, and interactive states. It appears against black (#000000) backgrounds to create maximum legibility and psychological urgency; the eye cannot ignore it. Secondary (#2872a1) is a professional blue reserved for data visualization, charts, and secondary information hierarchies — it never competes with primary. Tertiary (#fbbc04) is a warm gold used sparingly for ratings, stars, and success states. The surface stack ranges from pure black (#000000) for hero sections and headers to light gray (#f5f5f5) for body content areas, with intermediate containers at #e8e8e8 and #fafafa for subtle depth. On-surface text is pure black (#000000)

Typography

The type system uses **Inter exclusively** across all weights (400, 700, 900) to maintain visual cohesion and technical precision. Display (70px, 900 weight, -0.04em tracking) is reserved for hero headlines and must always be set in all-caps with -4% letter-spacing to create a compressed, aggressive silhouette. Headline-lg (48px, 900 weight) is used for section titles and maintains the same intensity. Headline-md (32px, 700 weight) is for subsection headers. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content; body-md (16px, 400 weight, 24px line-height) is for UI labels and secondary content. Label-md (14px, 700 weight, 0.05em tracking) is used for button text, badges, and form labels — always uppercase. Label-sm (12px, 700 weight, 0.08em trackin

Layout

The layout uses a **12-column grid** with a max-width of 1280px (container-max) and a 24px gutter on desktop, scaling to 16px on tablet and 12px on mobile. The page rhythm alternates between full-bleed black hero sections (padding: 80px 24px) and light gray content sections (padding: 40px 24px) to create visual breathing room and guide the eye through the narrative. White-space is used aggressively — sections are separated by lg spacing (40px) vertically and md spacing (24px) horizontally. Cards and containers use md padding (24px) internally. The hero section spans full viewport height (min-height: 100vh) with centered, left-aligned text; the primary CTA is positioned at the bottom-left of the hero with 24px margin from edges. Secondary CTAs and navigation links use sm spacing (12px) for

Elevation & Depth

Depth in this system is achieved through **stark contrast and layering**, not soft shadows. Level 1 (Base): pure black (#000000) background with no shadow. Level 2 (Cards & Containers): light gray surface (#f5f5f5) with a 1px solid border in outline-variant (#bbbbbb) and a subtle shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to separate from the background. Level 3 (Modals & Overlays): white surface (#ffffff) with a 2px solid border in primary (#CCFF00) and a stronger shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to signal prominence. Interactive elements (buttons, inputs) use no shadow by default; on hove

Shapes

The shape philosophy is **Technical Minimalism** — sharp corners with minimal rounding to reinforce the brand's no-nonsense aesthetic. Buttons and inputs use rounded: DEFAULT (0.5rem / 8px) for a subtle, professional finish that avoids the softness of larger radii. Cards and containers use rounded: DEFAULT (0.5rem) to maintain consistency. Badges and pills use rounded: full (9999px) only when they contain a single word or icon; multi-word labels use DEFAULT rounding. The header and hero section use rounded: 0 (no rounding) to create hard edges that anchor the page. Focus states on interactive

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses backgroundColor: #CCFF00, textColor: #000000, fontWeight: 900, padding: 12px 24px, height: 48px, rounded: 0.5rem, with no border. On hover, shift to backgroundColor: #b3e600 and apply transform: scale(1.02) for a subtle press effect (no transition duration; instant feedback). **button-secondary** uses backgroundColor: transparent, textColor: #CCFF00, border: 2px solid #CCFF00, same padding and height. On hover, invert to backgroundColor: #CCFF00, textColor: #000000. **button-ghost** uses backgroundColor: transparent, textColor: #000000, border: 1px solid #888888, and on hover, backgroundColor: #f5f5f5. All buttons use label-md typography (14px, 700 weight, 0.05em tracking, uppercase).

Containers &

Do's and Don'ts

**Do**

• Do use #CCFF00 exclusively for primary CTAs and interactive highlights — it is the brand's signature accent and must never be diluted or used decoratively.
• Do set all headlines in Inter 900 weight, all-caps, with -0.04em letter-spacing to create the aggressive, compressed silhouette that defines the brand.
• Do maintain pure black (#000000) and white (#ffffff) as the dominant colors; use gray (#f5f5f5, #e8e8e8) only for content containers and secondary surfaces.
• Do apply 48px minimum height to all interactive elements (buttons, inputs, list items) to meet accessibility standards and maintain visual weight.
• Do use sharp corners (0.5rem rounding) on buttons and cards; avoid rounded: lg or xl which soften the brand's assertive personality.

**Don't**

• Don't use secondary (#2872a1) or tertiary (#fbbc04) as primary CTAs — they are supporting colors only. Primary (#CCFF00) must always be the most visually dominant interactive element.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.08) — the brand rejects soft, diffuse depth. Use stark contrast and borders instead.
• Don't mix rounded radii within a single component family (e.g., don't use rounded: lg on one button and rounded: DEFAULT on another). Consistency reinforces technical precision.
• Don't use gradients, blur effects, or glassmorphism — the brand is built on binary contrast and clarity, not atmospheric effects.
• Don't set body text smaller than 16px or larger than 18px; the brand prioritizes legibility over visual drama. Use weight and color to create hierarchy, not size.