FINN

Overview

FINN is a German automotive subscription platform that transforms car rental into a seamless, transparent experience. The brand serves digitally-native professionals and families seeking flexibility without complexity, embodying a design philosophy of "Functional Minimalism"—where every visual element serves a purpose, and clarity trumps decoration. The aesthetic is distinctly Northern European: clean typography, generous whitespace, and a single bold accent color (primary blue #0072ea) that signals trust and action. The emotional response is one of calm confidence: users feel they're in control, never overwhelmed. The brand personality is direct, professional yet approachable, with a hint of German precision. Voice: clear, honest, never hyperbolic. Example sentence: "Wähle dein Auto, zahle monatlich, fahre sofort—keine versteckten Gebühren."

Colors

FINN's color system prioritizes clarity and trust through a high-contrast, neutral-dominant palette anchored by a vibrant primary blue. Primary (#0072ea) is reserved exclusively for call-to-action buttons, interactive focus states, and key navigation elements—it commands attention without aggression. The surface stack ranges from pure white (#ffffff) for primary content areas to light grays (#f8f8f8, #e9eaec, #d7d7d7) for subtle container differentiation and disabled states. On-surface text is near-black (#191919) for maximum readability at 16px body size; secondary text uses #707070 for hierarchy. The error/tertiary accent (#e71d3f) is used sparingly for alerts and promotional badges. Success green (#26bc58) appears in confirmation states and positive messaging. All interactive elements u

Typography

The type system pairs Suisse Intl (headlines, display) with Inter (body, labels), creating a sophisticated yet accessible hierarchy. Suisse Intl's geometric precision conveys professionalism and modernity in headlines (48px, 600 weight for h1; 32px, 600 weight for h2), while Inter's humanist proportions ensure legibility in body copy (16px, 400 weight, 24px line-height). Display sizes use -0.04em letter-spacing to tighten the visual mass; body text uses 0em spacing for neutral readability. Labels are consistently 16px, 600 weight to distinguish interactive elements. When small labels (12px) appear over busy backgrounds or in dense tables, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contrast. All font-weights use 400 (regular), 500 (medium), or 600 (semibold)—never 700 or hi

Layout

FINN uses a 12-column fluid grid with a max-width of 1280px, centered on desktop and full-bleed on mobile. The gutter is consistently 24px between columns and sections. Hero sections use a 50/50 split (image right, content left) with 40px (lg spacing) between the headline and supporting copy, then 24px (md spacing) before the primary CTA. Form fields stack vertically with 12px (sm spacing) between label and input, 24px (md spacing) between form groups. Card-based layouts use 24px (md spacing) for internal padding and 24px between cards in a grid. The container max-width of 1280px ensures readability on ultra-wide displays; content never exceeds 960px on single-column layouts. Whitespace is generous—never cramped—with minimum 40px (lg spacing) above section headings and 24px below body para

Elevation & Depth

FINN's depth model is restrained and functional, avoiding the layered complexity of glassmorphism. Elevation is conveyed through subtle shadows and border definition rather than blur or transparency. Level 1 (Base): flat, no shadow, white background (#ffffff). Level 2 (Cards, Inputs): 1px solid border at #d0d0d0 + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals, Dropdowns): same border + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12). Hover states lift cards to Level 3 with a smooth transition (150ms ease-out). Focus states on inputs add a 3px inset ring at rgba(0, 114, 234, 0.2) (prima

Shapes

FINN adopts "Architectural Precision"—minimal, sharp corners that convey professionalism and control. Border-radius is consistently small: 2px (0.125rem) for buttons and inputs, 4px (0.25rem) for cards and dropdowns, 8px (0.5rem) for larger containers and modals. Buttons use 2px radius to feel crisp and clickable; inputs use 2px to align with buttons in forms. Cards use 4px to soften the edge slightly while maintaining the geometric aesthetic. Badges and pills use full (9999px) radius only when circular or truly pill-shaped; otherwise, they follow the 4px standard. This conservative approach t

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#0072ea on white, 10px 12px padding, 44px height, 2px radius) use label-md typography (16px, 600 weight) and trigger main actions ("Auto finden"). Hover state darkens to #0052b3 with no shadow change. Active state uses #003d85. Secondary buttons use #f8f8f8 background with a 1px #d0d0d0 border, same padding and height, for alternative actions ("Geschäftskundenangebot"). Ghost buttons are transparent with a border, used for tertiary actions. All buttons have a 150ms ease-out transition on background-color and border-color.

Containers & Surfaces Cards use white background (#ffffff) with 1px #d0d0d0 border and 24px padding. Standard shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, shadow lifts to 0 8px

Do's and Don'ts

**Do**

• Do use primary blue (#0072ea) exclusively for CTAs, focus states, and key interactive elements—never for decorative or background purposes.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) between form fields to preserve the clean, breathing aesthetic.
• Do apply 2px border-radius to buttons and inputs, 4px to cards—never exceed 8px unless creating a pill or badge.
• Do use Suisse Intl for all headlines (h1, h2, h3) at 600 weight with -0.02em letter-spacing; reserve Inter for body and labels.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns; never use harsh or blurred shadows.
• Do use near-black (#191919) for primary text and #707070 for secondary text—never use pure black or pure white for text.

**Don't**

• Don't use primary blue for backgrounds, large text blocks, or decorative elements—it must remain a high-contrast accent.
• Don't exceed 1280px container width or use more than 12 columns; maintain the disciplined grid structure.
• Don't apply border-radius greater than 8px to standard components; reserve full (9999px) for badges and pills only.
• Don't mix typefaces within a single component; use Suisse Intl for headlines and Inter for everything else.
• Don't use drop shadows with opacity greater than 0.15 or blur values exceeding 24px; keep depth subtle and functional.
• Don't use more than three accent colors (primary blue, success green, error red); resist the urge to add tertiary or quaternary hues.