Humanskills

Overview

Humanskills embodies a 'Technical Minimalism' aesthetic—the marriage of enterprise-grade precision with human-centered warmth. The brand serves mid-to-large organizations navigating AI-driven transformation, and the UI evokes clarity, confidence, and forward momentum through a restrained color palette anchored by a deep purple primary (#25035e) and supported by a vibrant secondary violet (#8a52f9). The emotional response is one of structured possibility: users feel guided, not overwhelmed, by the interface's clean surfaces and purposeful hierarchy.

The brand voice is direct, optimistic, and grounded in expertise. Humanskills speaks in the language of transformation—not hype—using concrete language over abstractions. Vocabulary patterns favor action verbs (construire, changer, innover) and collaborative framing (approche combinée, chez vous). Tone is professional yet approachable, never patronizing. Example sentence in brand voice: 'Nous accélérons votre transformation en combinant l'IA et l'expertise humaine—ensemble, nous construisons votre avenir.'

Colors

The color system is built on a foundation of clean, neutral surfaces (white #ffffff, soft grays #f5f5f5–#e0e0e0) that provide breathing room for the brand's two signature accent colors. Primary (#25035e, deep purple) is the dominant interactive accent, used exclusively on CTAs, active states, and key brand moments—it commands attention without aggression. Secondary (#8a52f9, vivid violet) serves as a supporting accent for highlights, secondary CTAs, and data visualization accents, creating visual rhythm without competing for dominance. Tertiary (#f59194, warm coral-pink) is reserved for status indicators, badges, and accent highlights that require warmth or urgency. The surface stack progresses from #ffffff (base) through #f8f8f8 (container-low) to #e0e0e0 (container-highest), enabling sub

Typography

The type system centers on Funnel Display, a geometric sans-serif that communicates modernity and precision while maintaining warmth through its open letterforms. Display (60px, weight 400, line-height 68px, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (48px, 400, 56px) structures section introductions; Headline-md (32px, 400, 40px) organizes subsections; Title-lg (24px, 400, 32px) labels card headers and modal titles. Body text uses lighter weights (300) to create visual softness: Body-lg (18px, 300, 28px) for introductory paragraphs, Body-md (16px, 300, 24px) for standard content. Labels employ weight 700 with increased tracking (0.02–0.03em) to ensure legibility at small sizes and to signal interactive intent. On small labels over busy backgrounds, apply

Layout

The page grid operates on a 12-column fluid layout with a max-width of 1200px, centered with symmetric gutters of 32px on desktop. Sections use the lg spacing token (40px) for vertical separation, creating a rhythm that feels neither cramped nor sparse. The hero section occupies the full viewport height with centered content, leveraging the display typography and ample whitespace (64px top/bottom padding) to establish visual authority. Container max-widths vary by content type: full-width for hero and image-heavy sections, 1050px for text-dense content, 800px for forms and focused interactions. The spacing scale (4px unit, 12px sm, 24px md, 40px lg, 64px xl) is applied consistently to padding, margins, and gaps, ensuring visual coherence. Negative space is treated as a design element, not

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. Level 1 (Base Surface) uses no shadow, establishing the neutral canvas at #ffffff. Level 2 (Standard Cards & Components) applies a soft shadow: 0 1px 3px rgba(37, 3, 94, 0.06), creating gentle separation from the base. Level 3 (Elevated Cards, Modals, Popovers) uses 0 4px 12px rgba(37, 3, 94, 0.08), introducing more pronounced depth. Level 4 (Hero Overlays, Floating Elements) employs the full elevation-lg: 0 28px 76px rgba(37, 3, 94, 0.09), 0 10px 30px rgba(138, 82, 249, 0.06)—a dual-layer shadow t

Shapes

The shape philosophy is 'Geometric Precision with Human Softness'—sharp enough to feel technical, rounded enough to feel approachable. Buttons and primary CTAs use full-radius (9999px / border-radius: 50px) to signal action and create visual warmth; this pill-shape is the most recognizable interactive element in the system. Cards and containers use lg radius (24px), balancing geometric clarity with approachability. Form inputs and secondary components use DEFAULT radius (8px), a subtle middle ground that feels neither harsh nor overly organic. Micro-interactions (badges, small alerts) use sm r

Components

Action Elements Buttons are the primary interaction mechanism and come in two main variants. Button-primary uses the brand primary (#25035e) with white text, full-radius (50px), and padding of 15px 32px, achieving a 48px height. On hover, the background shifts to #492d8e (a darker purple) over 200ms, signaling interactivity without jarring the user. Button-secondary uses a transparent background with a 2px solid border in the primary color, maintaining the same dimensions and radius; on hover, it fills with the primary-container (#e4eafd) to create a subtle press effect. Both variants use label-md typography (14px, weight 700, 0.02em tracking) for clear, confident labeling. Avoid mixing button styles in a single call-to-action group; use one primary button per section, supported by sec

Do's and Don'ts

**Do**

• Do use the primary color (#25035e) exclusively for primary CTAs and active states—it is the brand's most recognizable element and should never be diluted by overuse.
• Do apply the lg spacing token (40px) between major sections to establish visual rhythm and give content room to breathe.
• Do use Funnel Display at weight 300 for body text to maintain the brand's warm, approachable tone; avoid system fonts or serif alternatives.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing to signal intentional, purposeful motion.
• Do use full-radius (9999px) exclusively for buttons and primary CTAs; never apply it to cards or containers, which should use lg radius (24px).

**Don't**

• Don't use the secondary color (#8a52f9) as a primary CTA background; it is a supporting accent and will dilute the brand's visual hierarchy.
• Don't apply shadows darker than elevation-lg (0 28px 76px rgba(37, 3, 94, 0.09), 0 10px 30px rgba(138, 82, 249, 0.06))—deeper shadows introduce visual heaviness that contradicts the brand's clarity.
• Don't mix button styles in a single call-to-action group; use one primary button per section, supported by secondary buttons only when necessary.
• Don't use colors outside the defined palette for interactive elements; the brand relies on the purple/violet/coral triad for visual coherence.
• Don't apply border-radius values outside the defined scale (sm 3px, DEFAULT 8px, md 12px, lg 24px, xl 32px, full 9999px)—arbitrary radii fragment the system and weaken brand recognition.