Light Dark

Design System v1.0 — Light & Dark

Primary — #422AD5

Display — Russo One

Body — Roboto

Themes — Light / Dark

01 — Color Palette

Violet — Primary Ramp

Violet 50
#EDEAFC
Violet 100
#D2CBF8
Violet 300
#8E7EEB
Violet 500 ★
#422AD5 — PRIMARY
Violet 700
#271880

Semantic tokens — Light vs Dark

Light theme
--bg
#F0EFF9
--surface
#FFFFFF
--surface-subtle
#EDEAFC
--border
#D2CBF8
--text-primary
#0E0A2E
--accent
#422AD5
Dark theme
--bg
#0A0718
--surface
#120E2E
--surface-subtle
#1E1850
--border
#2D2460
--text-primary
#EDE9FC
--accent (lightened)
#6B58E0

Semantic — Status

Success
#1D9E75
Warning
#BA7517
Danger
#D85A30
02 — Typography

Display — Russo One

Aa Bb Cc

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Titres, logo, display uniquement

Body — Roboto

Aa Bb Cc

Light 300 — corps léger, intro

Regular 400 — body par défaut

Medium 500 — labels, liens

Bold 700 — boutons, overlines

Hero XL
Russo One / 60px / lh 1.15
Hero headline
Display L
Russo One / 48px / lh 1.15
Page titles
Section Title
Russo One / 36px / lh 1.35
Section headings — accent
Sub-section
Russo One / 28px / lh 1.35
Sous-sections
Card Title / Nav Logo
Russo One / 22px / lh 1.35
Cards, logo nav
Intro — Vous avez un vrai défi technique. Nous le transformons en produit.
Roboto 400 / 18px / lh 1.6
Intro paragraphs
Body — Vous avez un vrai défi technique. Nous le transformons en produit qui performe et dure.
Roboto 400 / 16px / lh 1.6
Body text par défaut
Small — Descriptions, captions, metadata et contenu secondaire dans les cards.
Roboto 400 / 13px / lh 1.6
Card descriptions
Overline — Section label
Roboto 500 / 11px / uppercase
Labels, overlines
03 — Spacing

Base unit : 4px

--space-14px
--space-28px — icon gap, padding serré
--space-312px — spacing interne small
--space-416px — gap par défaut, padding bouton
--space-624px — card padding, nav gap
--space-832px — entre sous-composants
--space-1248px — gaps internes de section
--space-1664px — padding vertical de section
--space-2496px — entre sections majeures
04 — Border Radius
sm — 6px
Tags, inputs
md — 10px
Badges, icônes
lg — 16px
Cards, nav
xl — 24px
Project cards
2xl — 36px
Service bubbles
full — pill
Boutons, badges
05 — Buttons

Variants

Primary ★
Outline
Secondary
Ghost
Disabled

Sur fond dark

Primary
Outline white

Tailles

sm — 13px
md — 15px
lg — 16px
06 — Badges & Tags
Retail
Primary
Retail
Dark
SaaS
Gray
Livré
Success
WooCommerce
Tag
Laravel
Tag
Vue 3
Tag
07 — Navigation
FR
08 — Section Heading Patterns

Our services

We build the right solutions to make your business move forward.

Pattern A — titre accent, centré

What we've built

Our projects

A plant and flower retailer needed a complete solution aligned with their strategy.

Pattern B — overline + titre primary, left-aligned
09 — Cards

Service Card

Websites
Your website is your best salesperson. We make sure it looks the part and performs like it should.
See more →
Audit & Strategy
Technical analysis meets business strategy. We give you a complete picture and a plan to move forward.
See more →
Business automation
We build the right solutions to automate your operations and keep your team on what matters.
See more →

Project Card

IMAGE PROJET
Retail
Végétal Concept
A plant and flower retailer needed a complete e-commerce platform. Multilingual, fast, built to scale.
WooCommercePolylangCloudways
View case study →
IMAGE PROJET
SaaS
Acquire
San Francisco-based customer support SaaS. Complex front-end with Vue 3 and real-time components.
Vue 3Laravel
View case study →

Solution Card

🏠
Real Estate
Sell faster, show better. We build digital tools that make it easier for your clients to choose.
🍽️
Restaurants
Your restaurant, your rules. Solutions to keep customers coming back and margins growing.
🛒
E-commerce
Built to sell, designed to grow. Most projects fail because they start with technology, not strategy.

Testimonial Card

"They didn't just build our site — they helped us think through our entire sales strategy. The result exceeded every expectation."
CD
Cécile Dupont
Founder, Végétal Concept
"They didn't just build our site — they helped us think through our entire online sales strategy. Exceeded every expectation."
MR
Marc Renaud
CEO, Service Client
"The most reliable team we've worked with. On time, on budget, zero headaches on our end."
SL
Sophie Laurent
Marketing Director
10 — Form Elements
Jamais partagé. Jamais de spam.
11 — CTA Section Pattern

Got a project in mind?

We'd love to hear about it. Drop us a message and we'll get back to you quickly.

12 — Usage Rules

✓ Do

  • → Russo One pour tous les titres et le logo
  • → #422AD5 pour les CTAs, liens actifs, logo
  • → Utiliser les tokens CSS, jamais les hex directement
  • → Boutons en pill (border-radius: full) sans exception
  • → Tester chaque composant en light ET dark
  • → 1 seul CTA primaire par section maximum

✗ Don't

  • → Ne jamais utiliser Russo One pour le body text
  • → Ne jamais hardcoder des hex hors tokens
  • → Ne jamais utiliser des boutons à coins droits
  • → Ne jamais empiler plus de 2 CTAs côte à côte
  • → Ne jamais ignorer le contraste en dark mode
  • → Ne jamais utiliser border-radius < 6px

Alven

Design System v1.0 — 2026 — Primary #422AD5 — Light & Dark