Le contexte

On travaille principalement avec des clients basés à Madagascar ou dans la région IOA. Contraintes spécifiques :

• Connectivité — 3G/4G variable, data coûteuse
• Appareils — Mobile-first obligatoire (80%+ traffic mobile)
• Écosystème — Peu de ressources design locales, tout se build in-house

---

Nos principes de design system

1. Dark mode par défaut

Pas une option. Une base.

Pourquoi ? Réduction de la fatigue visuelle, économie de batterie sur mobile, et esthétique premium qui différencie nos produits.

Tokens Apollon Lab :

• Background : #0a0a0a
• Accent primary : #155dfc (blue)
• Accent secondary : #00FF88 (green)
• Typography : Bebas Neue (display) + Inter (body)

2. Performance non-négociable

Un beau design qui charge en 8 secondes sur 3G = zéro utilisateur.

Règles :

• Pas plus de 100KB CSS total
• Images WebP avec fallback
• Fonts auto-hostées (pas Google Fonts CDN = moins de requêtes)
• Lighthouse Performance > 90

3. Composants atomic mais pragmatiques

On ne fait pas du purisme Design System académique. On build ce dont on a besoin :

• Button (3 variants : primary, secondary, ghost)
• Card (content, pricing, testimonial)
• Hero (avec CTA)
• Section wrapper (responsive padding)
• Form (input, textarea, select)

~15 composants couvrent 95% de nos besoins.

---

Outils qu’on utilise

Tool	Usage
Figma	Design initial + prototypage
Tailwind CSS v4	Implementation (utility-first)
Lexington Themes	Templates de départ (Buio pour dark mode)
Storybook	Documentation composants (sur projets complexes)

---

Conclusion

Un bon design system n’est pas celui qui a le plus de composants. C’est celui que l’équipe utilise vraiment et qui reste maintenable sans équipe dédiée design ops.

Chez Apollon Lab, on privilégie la pragmatie sur la perfection.