Shine

Overview

Shine is a French fintech platform designed for entrepreneurs and freelancers, embodying a philosophy of "Accessible Professionalism"—combining sophisticated financial tools with approachable, human-centered design. The brand personality is confident yet supportive, speaking directly to the pain points of solo business owners: complex compliance, hidden fees, and fragmented tooling. The UI aesthetic merges a warm, earthy palette (prosperity stone neutrals, accounting green accents) with clean, modern typography to convey both trustworthiness and forward-thinking innovation. The emotional response is one of relief and empowerment: users feel they've found a partner who understands their business, not a corporate black box.

Shine's voice is direct, jargon-light, and occasionally playful—never breathless or overly casual. The brand uses concrete language and avoids financial-speak; it explains features in terms of outcomes ("Encaissements simplifiés" rather than "Paiements optimisés"). Example sentence in Shine's voice: "Votre comptabilité se met à jour toute seule—pendant que vous faites ce que vous savez faire."

Colors

The Shine color system is anchored in a deep, trust-building green (#0f5f35 primary) paired with a warm, energetic yellow (#fff389 secondary) and a professional blue (#3a65eb tertiary). Primary green (#0f5f35) is reserved for primary CTAs, active states, and key interactive elements—it signals action and confidence without aggression. Secondary yellow (#fff389) appears on badges, highlights, and accent elements, evoking entrepreneurial energy and optimism. Tertiary blue (#3a65eb) is used for secondary CTAs and informational elements, providing visual hierarchy without competing with primary. The surface stack uses warm, off-white neutrals (prosperity stone palette: #f9f7f1 surface-dim, #f2eee2 surface-container-low, #e8e2cd surface-container) to create a sophisticated, paper-like warmth th

Typography

The type system pairs Shine Spectra (a custom serif family) for headlines and display text with Inter (a humanist sans-serif) for body and UI labels. This pairing communicates both heritage and modernity: Shine Spectra's elegant, slightly geometric serifs evoke financial stability and craftsmanship, while Inter's open letterforms and generous spacing ensure accessibility and contemporary clarity. Display (58px, 400 weight, -0.02em tracking) is used sparingly for hero statements and major section breaks; Headline-lg (40px, 400 weight) anchors hero copy and key value propositions; Headline-md (28px, 400 weight) structures subsections. Body-lg (18px, 400 weight, 28px line-height) is used for longer-form copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) handles

Layout

Shine uses a fluid, 12-column grid system with a maximum container width of 1440px, allowing content to breathe on ultra-wide displays while maintaining focus on smaller screens. The page rhythm is structured around a generous spacing scale: lg spacing (40px) separates major sections (hero, features, testimonials), md spacing (24px) is used for card padding and subsection margins, and sm spacing (12px) handles internal component spacing. The gutter (24px) is applied consistently to horizontal padding on containers, creating a uniform margin from the viewport edge. White-space philosophy prioritizes clarity over density: cards are never cramped, and text blocks are always surrounded by breathing room. The hero section uses a 2-column layout on desktop (text on left, visual on right) with fu

Elevation & Depth

Shine employs a subtle, flat-with-shadows elevation model that avoids skeuomorphism while maintaining clear visual hierarchy. The elevation system uses three levels: Level 1 (Base, no shadow) for the page background and default card states; Level 2 (Standard card, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)) for interactive cards, modals, and hover states; Level 3 (Elevated, box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers and dropdown menus. Shadows are always soft and diffuse, never sharp or dark, to maintain the warm, approachable aesthetic. Focus states

Shapes

Shine's shape philosophy is "Soft-Technical"—combining rounded corners with precise, geometric proportions to balance approachability with professionalism. Buttons use full rounding (border-radius: 9999px, padding: 16px 24px) to feel friendly and clickable, while cards and containers use moderate rounding (border-radius: 12px or 0.75rem) to maintain structure without appearing rigid. Input fields use minimal rounding (border-radius: 4px or 0.25rem) to signal form-like functionality and clarity. The reasoning: full-radius buttons stand out as primary actions and feel inviting; moderate-radius c

Components

Action Elements Buttons are the primary interactive element and follow a strict hierarchy. Primary buttons (background: #0f5f35, color: #ffffff, border-radius: 9999px, padding: 16px 24px, height: 48px, font-weight: 500) are used for main CTAs like "Découvrir nos offres" and "Ouvrir mon compte." On hover, the background darkens to #003725 and the box-shadow shifts to 0 4px 12px rgba(0, 0, 0, 0.08). Secondary buttons (background: #f2eee2, color: #0f5f35, border: 1px solid #0f5f35, border-radius: 12px, padding: 12px 20px) are used for alternative actions and maintain the same hover elevation. Tertiary buttons (background: #3a65eb, color: #ffffff, border-radius: 9999px) are reserved for secondary CTAs like account creation flows. All button transitions use 150ms ease-out timing for a respo

Do's and Don'ts

**Do**

• Do use primary green (#0f5f35) exclusively for primary CTAs and active states—it's the brand's signature action color and must remain distinctive.
• Do apply the prosperity stone palette (warm off-whites and taupes) for surfaces and backgrounds to maintain the approachable, paper-like aesthetic.
• Do pair Shine Spectra headlines with Inter body text to balance heritage and modernity—never reverse this pairing.
• Do use full border-radius (9999px) on buttons and pills to signal interactivity and friendliness; reserve minimal rounding (4px) for form inputs to denote precision.
• Do maintain consistent 24px padding and 40px section spacing to create a rhythm that feels generous and scannable.
• Do use soft shadows (0 4px 12px rgba(0, 0, 0, 0.08)) for hover states rather than color shifts to preserve the warm, cohesive palette.

**Don't**

• Don't use the secondary yellow (#fff389) as a background for large areas—it's an accent color for badges and highlights, not a surface.
• Don't mix serif and sans-serif fonts within a single text block; maintain clear hierarchy by using Shine Spectra for headlines and Inter for body.
• Don't apply sharp shadows or high-contrast borders to cards; Shine's aesthetic is warm and approachable, not corporate or harsh.
• Don't use the primary green for body text or secondary UI elements—reserve it for primary actions to maintain visual hierarchy and brand distinctiveness.
• Don't reduce padding or spacing below the sm unit (12px) in components; the design system prioritizes breathing room and clarity over density.
• Don't apply focus states using outline or border-only treatments; use the inset box-shadow (0 0 0 3px rgba(15, 95, 53, 0.1)) to maintain the soft, modern aesthetic.