PeyeM

Overview

PeyeM is a professional invoicing and payment management platform designed for French entrepreneurs and small businesses. The design system embodies a "Split-Screen Clarity" aesthetic: a deep navy hero section (rgb(13, 43, 74) to rgb(22, 66, 107)) anchors brand authority and trust on the left, while a pristine white form container on the right emphasizes simplicity and accessibility. The visual language prioritizes efficiency—users should feel confident that complex billing workflows are distilled into intuitive, single-step interactions. The brand personality is professional yet approachable: confident in capability, never condescending. Voice example: "Facturez en 1 minute, encaissez en 24 heures—c'est aussi simple que ça."

Colors

The color system is anchored by a vibrant primary blue (#1677ff) used exclusively for interactive elements—primary CTAs, links, and focus states. This blue is derived from Ant Design's palette and conveys reliability and forward momentum. The surface stack is clean and minimal: white (#ffffff) for containers and cards, with a subtle gray (#f5f5f5) for page backgrounds and (#d9d9d9) for borders. Secondary green (#52c41a) and tertiary gold (#faad14) are reserved for status indicators and success messaging; error red (#ff4d4f) signals validation failures. The hero section uses a custom dark navy gradient (approximately #0d2b4a to #164267) to create visual separation and establish a premium, trustworthy tone. All interactive states follow a three-tier system: primary (#1677ff) → hover (#4096ff

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances professionalism with approachability. Display (48px, 700 weight, -0.02em tracking) is reserved for hero headlines like "Tout pour facturer comme un pro"; headline-lg (38px, 400 weight) provides a lighter, more conversational tone for subheadings. Body text is set at 14–16px with 1.5–1.6 line-height to ensure legibility in dense form layouts. Labels and button text use 15px at 700 weight with 0.01em tracking to command attention without shouting. On small labels over busy backgrounds (e.g., badge text), apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased to prevent blur. Headings use a tighter line-height (1.2–1.4) to create visual hierarchy; body copy uses 1.5714 (22px line-height on 1

Layout

The page layout uses a 12-column grid with a max-width of 1040px, centered on larger screens. The hero section spans full viewport width with a split layout: left column (50%) contains the dark navy background with white text and checkmark list items; right column (50%) holds the white card form. Spacing follows a 4px unit system: section separation uses lg spacing (24px), card padding is 32px (md + lg), and input fields have 12px internal padding. The gutter between grid columns is 24px. White-space is generous—the form card has 32px padding on all sides, and input fields have 16px vertical margin between them. This breathing room reduces cognitive load and makes the interface feel premium rather than cramped. Container max-width of 1040px ensures the split layout remains balanced on desk

Elevation & Depth

Depth is conveyed through a subtle shadow system rather than bold layering. Base cards use a soft composite shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05), which creates a gentle lift without drama. On hover, cards transition to a stronger shadow: 0 1px 2px -2px rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.12), 0 5px 12px 4px rgba(0,0,0,0.09), signaling interactivity. Input fields have a 1px solid border at #d9d9d9; on focus, they gain a 2px outline at rgba(22, 119, 255, 0.1) (a 10% opacity primary blue) with a 0.2s transition. The hero se

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and primary CTAs use 12px radius (lg), creating a friendly, clickable appearance. Form inputs use 6px radius (DEFAULT), a subtle rounding that feels modern without being playful. Cards use 20px radius (xl), the most generous rounding, to create a premium, contained feel. Small UI elements like badges and tags use 9999px (full) for pill-shaped appearance. The hero section and full-width containers have 0px radius (sharp edges) to anchor the layou

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses #1677ff background with white text, 15px 700-weight Inter, 12px border-radius, and 11px vertical / 24px horizontal padding (44px total height). On hover, the background shifts to #4096ff with a 200ms transition; on active/press, it becomes #0958d9. Secondary buttons use a transparent background with a 1px #d9d9d9 border and dark text, maintaining the same dimensions. The "Continuer" CTA in the form is always primary blue and full-width on mobile (100% width, 44px height), stacked below the email input with 16px margin-top. All buttons have cursor: pointer and a focus outline of 3px solid rgba(22, 119, 255, 0.2) with 1px offset.

Containers & Surfaces Cards are the primary container for grouped co

Do's and Don'ts

**Do**

• Do use primary blue (#1677ff) exclusively for CTAs, links, and focus states—never for backgrounds or decorative elements.
• Do maintain 32px padding inside cards and 24px gutter between sections to create breathing room and reduce cognitive load.
• Do apply the 200ms cubic-bezier(0.645, 0.045, 0.355, 1) transition to all interactive state changes (hover, focus, active) for a cohesive, polished feel.
• Do use the dark navy gradient (#0d2b4a to #164267) exclusively for the hero section to establish trust and visual hierarchy.
• Do keep form inputs at 40px height with 6px radius and 1px borders—this is the established control size across the system.

**Don't**

• Don't use secondary green or tertiary gold for primary CTAs—these are reserved for status badges and success messaging only.
• Don't apply shadows to the hero section or full-width blocks; shadows are for cards and elevated surfaces only.
• Don't use system fonts or fallback stacks; Inter must load from Google Fonts to maintain brand consistency.
• Don't round corners on text, inline links, or decorative elements—rounding is reserved for containers, buttons, and form controls.
• Don't exceed 1040px container max-width on desktop; this maintains the balanced split-screen layout and prevents content from stretching.