SpiritSkillz

Overview

SpiritSkillz is a B2B automation and recruitment platform serving French SMEs and mid-market enterprises. The design system embodies 'Technical Minimalism'—a philosophy that pairs austere, high-contrast layouts with strategic bursts of color to guide user attention toward critical actions. The brand personality is authoritative yet approachable: it speaks to business leaders with precision and clarity, avoiding hype while celebrating tangible outcomes. The visual language uses a deep navy hero canvas (#151a4a) as a confident anchor, contrasted by white typography (rgb(255, 255, 255)) and a vibrant golden-yellow accent (#ffd23f) that signals actionable moments. The interface evokes trust through clean geometry, generous whitespace, and a measured pace of information disclosure.

Voice and tone reflect the brand's core mission: pragmatic, direct, and solution-focused. Sentences are active and outcome-oriented, avoiding jargon while respecting the technical literacy of the audience. Example: 'Automatiser ce qui peut l'être. Recruter pour le reste.' This tagline distills the entire value proposition into two declarative statements—no hedging, no flourish. The vocabulary favors concrete nouns (diagnostic, workflow, automation) and action verbs (reprendre, recruter, automatiser), creating a sense of agency and control.

Colors

The color system is built on a high-contrast, accent-driven model optimized for enterprise clarity. Primary (#ffd23f) is the golden-yellow call-to-action accent, reserved exclusively for buttons, interactive highlights, and key navigation elements that demand immediate user attention. It appears sparingly—approximately 8–12% of the interface—to maintain its psychological weight and prevent visual fatigue. Secondary (#2ea3f2) is a bright, saturated blue used for links, focus states, and secondary actions; it provides a cooler, more technical counterpoint to the warm primary. Tertiary (#151a4a) is the deep navy that anchors the hero section and establishes brand authority; it serves as the inverse-surface for dark-mode contexts and reinforces the 'night-mode' aesthetic of the hero.

The surf

Typography

The type system employs a two-family strategy: Onest (a geometric sans-serif with high x-height and distinctive letterforms) for all display, headline, and label contexts, and Public Sans (a neutral, highly legible humanist sans-serif) for body copy and extended reading. This pairing creates visual hierarchy through family distinction rather than weight alone. Display text (56.8px, 800 weight, -0.04em tracking) is reserved for hero headlines and establishes immediate brand presence; it uses Onest's distinctive geometric forms to convey modernity and precision. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) maintain the same family and negative letter-spacing to compress visual density and reinforce authority. Body-lg (18px, 500 weight) and body-md (16px, 500 weight) shif

Layout

The layout system uses a fluid 12-column grid with a fixed max-width of 1080px, centered on the viewport. The hero section spans full-width with a dark navy background (#151a4a) and uses a 2-column asymmetric split: the left column (60% width) contains the headline and primary CTA, while the right column (40% width) displays an interactive card carousel. Below the hero, content sections use the full 1080px container with consistent gutter spacing of 24px on either side. Vertical rhythm is established through a spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section margins, lg (40px) for major section separation, and xl (64px) for full-page rhythm breaks. The hero headline uses 56.8px type with 68px line-height, creating a 12px descender space

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast while maintaining clear layer separation. The base elevation (sm) applies a soft, warm-tinted shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to subtle UI elements like input fields and small cards, creating barely perceptible lift. Mid-level elevation (md) uses a slightly larger blur radius and offset (0 8px 24px rgba(34, 44, 57, 0.08)) for standard cards, modals, and dropdown menus; this shadow is warm-gray and diffuse, avoiding the harsh black shadows common in older design systems. The highest elevation (lg) is reserved

Shapes

The shape philosophy is 'Geometric Precision'—a balance between sharp, technical corners and subtle rounding that signals approachability without sacrificing authority. Buttons use a 8px border-radius (md) to create a modern, slightly softened rectangle that feels contemporary without appearing playful. Cards and containers use a 5px border-radius (DEFAULT) for a more conservative, business-appropriate appearance; this radius is small enough to maintain geometric clarity but large enough to avoid the harsh, dated look of 0px corners. Input fields and form elements use the same 5px radius for v

Components

Action Elements Buttons are the primary interaction mechanism and use a three-tier system. Primary buttons (button-primary) use the golden-yellow accent (#ffd23f) with dark navy text (#14162b) at 48px height, 13px vertical padding, and 24px horizontal padding; the 8px border-radius creates a modern, slightly softened rectangle. On hover, the background shifts to a slightly darker yellow (#ffe680, primary-fixed-dim) with a 200ms ease-out transition to signal interactivity without jarring the user. Secondary buttons (button-secondary) use a transparent background with a 2px border in outline-variant (#dddddd) and on-surface text; on hover, the background fills with surface-container-high (#fafafc) and the border darkens to outline (#999999). Ghost buttons (button-ghost) are used in dark

Do's and Don'ts

**Do**

• Do use the golden-yellow primary (#ffd23f) exclusively for primary CTAs, key navigation, and high-priority interactive elements—never for body text, backgrounds, or decorative elements.
• Do maintain a minimum 24px gutter on either side of the 1080px container to ensure content breathing room and prevent edge-to-edge visual fatigue.
• Do apply the label-md typography (Onest, 15px, 600 weight) to all button text and UI labels to create consistent, scannable interface language.
• Do use the cool blue secondary (#2ea3f2) for links, focus states, and secondary actions to create visual distinction from the warm primary accent.
• Do apply a 200ms ease-out transition to all button and card hover states to signal interactivity without jarring the user.

**Don't**

• Don't use the primary yellow (#ffd23f) for body copy, backgrounds, or decorative elements—reserve it exclusively for actionable moments to preserve its psychological weight.
• Don't exceed a 1080px container width or reduce gutters below 24px, as this compromises readability and creates visual congestion on desktop screens.
• Don't apply shadows darker than rgba(0, 0, 0, 0.25) or use harsh black shadows, as this contradicts the light, airy aesthetic and creates visual heaviness.
• Don't mix Onest and Public Sans within a single text block; use Onest for headlines/labels and Public Sans for body copy to maintain clear typographic hierarchy.
• Don't apply border-radius values outside the defined scale (sm: 3px, DEFAULT: 5px, md: 8px, lg: 12px, xl: 16px, full: 999px), as this breaks geometric consistency and dilutes brand recognition.