Source.paris

Overview

Source.paris is a Parisian product design agency that transforms complexity into premium digital experiences through an AI-native methodology spanning product vision to production. The brand embodies Architectural Minimalism—a design philosophy that strips away ornament to reveal essential structure, using extreme contrast (near-black #0f0f0f against pure white #ffffff and electric lime #f4ff45) to create visual clarity and precision. The aesthetic evokes a high-end Parisian atelier: austere, confident, intellectually rigorous. Users encounter a UI that feels like a refined blueprint, where every pixel serves function and every interaction is deliberate. The emotional response is one of trust and sophistication—the interface whispers rather than shouts, yet commands absolute attention through its restraint.

The brand voice is precise, cerebral, and unapologetically European. Vocabulary favors technical clarity over marketing flourish: 'transform complexity,' 'AI-native approach,' 'production-ready.' Tone is calm and authoritative, never breathless or hyperbolic. Example sentence in brand voice: 'We architect digital systems that scale from concept to market without compromise.'

Colors

The color system operates on a principle of extreme contrast and functional hierarchy. The primary surface is near-black (#0f0f0f), establishing a neutral canvas that recedes visually, allowing interactive elements to advance. On-surface text is pure white (#ffffff) for maximum legibility and sophistication. The primary accent is electric lime (#f4ff45)—a high-saturation, high-value color reserved exclusively for call-to-action buttons, focus states, and brand-critical interactions. This color appears infrequently (15 instances across the site) but commands immediate attention; it is the only warm, saturated element in an otherwise cool, desaturated palette. Secondary accent is a vivid blue (#0099ff) used for secondary actions, links, and status indicators. The tertiary palette consists of

Typography

The type system pairs two distinct font families to create visual hierarchy and emotional resonance. GT America LCG (Regular and Medium weights) serves display and headline roles, communicating the brand's architectural precision through its geometric, modernist letterforms. TWK Everett (Regular and Medium weights) handles body and label text, providing warmth and readability in smaller sizes. Fragment Mono appears exclusively in micro-labels and technical annotations, reinforcing the 'blueprint' aesthetic. Display text (72px, 400 weight, -0.02em letter-spacing) sets the visual tone with generous leading (80px) that creates breathing room on the page. Headline-lg (48px, 400 weight) maintains the same geometric clarity at mid-scale. Body text (16px, 400 weight, 24px line-height) is set with

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and tablet viewports. The gutter spacing is 40px, creating generous breathing room between sections and establishing a rhythm that feels spacious rather than cramped. Vertical spacing follows the semantic scale: lg (40px) separates major sections, md (24px) groups related content, sm (12px) provides micro-spacing within components. The page rhythm is deliberately slow—sections are tall (often 80–120vh), with large hero typography (72px) dominating the viewport. This creates a gallery-like experience where content unfolds gradually as the user scrolls. Container max-width is 1280px, but text blocks rarely exceed 800px to maintain optimal line length (60–80 characters). Ho

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The base layer (Level 1) is the near-black surface (#0f0f0f) with no shadow, establishing the ground plane. Level 2 (standard cards and containers) uses a 1px solid border at #262626 and an optional box-shadow of 0 4px 12px rgba(0, 0, 0, 0.15), creating gentle separation from the background. Level 3 (modals, popovers, elevated content) uses the same border plus a stronger shadow: 0 16px 40px rgba(0, 0, 0, 0.2), creating clear visual hierarchy. Interactive elements (buttons, inputs) do not use shadows; instea

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used sparingly and purposefully, never decoratively. Buttons and pills use full rounding (50px border-radius), creating a soft, approachable form that contrasts with the austere background. Standard cards and containers use 8px border-radius, providing subtle softening without compromising the architectural feel. Input fields use 8px border-radius to match cards, creating visual consistency. Modals and elevated surfaces use 12px border-radius, slightly more pronounced to signal elevation. Dividers and borders are sharp (0px radi

Components

Action Elements Buttons are the primary interaction mechanism and use full rounding (50px border-radius) to signal interactivity. Primary buttons (#f4ff45 background, #0f0f0f text, 44px height, 12px 24px padding) use the label-md typography (14px, 500 weight) with 0.02em letter-spacing. On hover, the background transitions to #e8e8e8 over 200ms (ease-out), creating a subtle feedback loop. Secondary buttons use a transparent background with a 1px solid #262626 border, same dimensions, and transition to #1f1f1f background on hover. Focus states on both button types apply a 2px solid rgba(244, 255, 69, 0.2) ring, positioned 2px outside the button boundary. Active states darken the background by 15% and reduce the ring opacity to 0.1.

Containers & Surfaces Cards use an 8px border-radi

Do's and Don'ts

**Do**

• Do use the primary accent (#f4ff45) exclusively for high-priority CTAs and focus states—never use it for decorative elements or secondary information.
• Do maintain the 40px gutter spacing between major sections to preserve the gallery-like, unhurried visual rhythm.
• Do apply the 200ms ease-out transition timing consistently across all interactive elements (buttons, cards, inputs) for a cohesive interaction feel.
• Do use full rounding (50px border-radius) only on buttons and pills; keep all structural elements (cards, inputs, modals) at 8–12px for architectural clarity.
• Do pair GT America LCG for headlines with TWK Everett for body text to create visual hierarchy without weight shifts.
• Do use 1px solid #262626 borders on all surfaces to provide subtle definition without visual noise.

**Don't**

• Don't use shadows as the primary depth mechanism—rely on borders, color contrast, and focus rings instead.
• Don't apply the primary accent (#f4ff45) to body text, backgrounds, or non-interactive elements; it must remain reserved for CTAs and focus states.
• Don't reduce the gutter spacing below 24px on desktop; the generous spacing is core to the brand's refined, unhurried aesthetic.
• Don't mix rounded and sharp corners on the same component type (e.g., don't use 8px on one button and 12px on another).
• Don't use system fonts or generic sans-serif; always load GT America LCG and TWK Everett from the provided @font-face declarations.
• Don't apply hover transitions faster than 150ms or slower than 250ms; the 200ms standard creates the intended responsive-yet-deliberate feel.