Aller au contenu
NexusUI

Une base, pas un template.

NEXUS UI est l'infrastructure de création numérique sur laquelle se construisent les projets suivants : un design system complet, une bibliothèque de composants réutilisables et une bibliothèque d'animations. Chaque décision visuelle est vérifiée avant d'être inscrite dans les tokens.

Voir le design systemParcourir les composants
Direction
Swiss editorial
Contraste
WCAG AA vérifié
Motion
reduced-motion natif
§1

Le projet est une infrastructure, pas une page

NEXUS UI doit servir de base à des sites vitrines, des SaaS, des dashboards, des portfolios et des applications métier. Ce qui suit est donc construit pour être copié dans le projet suivant, pas pour être regardé une fois.

01

Des tokens, pas des valeurs

Couleur, espacement, rayon, ombre et motion vivent dans deux fichiers CSS. Changer la direction artistique du projet ne demande pas de toucher un seul composant.

02

Le contraste est vérifié, pas supposé

Chaque paire texte/surface est passée au détecteur avant d'entrer dans les tokens. Trois couleurs candidates ont été rejetées pour échec WCAG AA.

03

Le mouvement a une grammaire

Durées, courbes et distances sont des tokens. prefers-reduced-motion est traité une fois, globalement, et non composant par composant.

04

Le responsive est une fonctionnalité

Neuf largeurs à vérifier, de 320 px à 1440 px. Pas de débordement, pas de bouton hors écran, pas de titre qui casse la mise en page.

05

Les bibliothèques se méritent

shadcn/ui pour les primitives accessibles, Magic UI pour dix composants choisis, Motion pour les transitions. Rien d'autre tant que rien d'autre ne sert.

← Faites défiler horizontalement, ou utilisez les flèches après avoir sélectionné la zone.

§2

Où en est le système

Les chiffres ci-dessous sont comptés sur le disque au moment du build. Ils ne peuvent pas être gonflés, et ils augmentent tout seuls.

32
Composants

Fichiers dans src/components/ui, comptés au build.

159
Design tokens

Déclarations dans tokens.css, modes clair et sombre réunis.

31
Motion tokens

Durées, courbes, délais, stagger et distances.

7
Pages prévues

7 construites à ce jour.

§3

Les pages du système

Le cahier des charges en prévoit huit. Celles qui ne sont pas encore construites sont marquées comme telles — ici aussi, rien n'est présenté comme fini tant qu'il ne l'est pas.

  • Design System

    Couleurs, typographie, espacements, rayons, ombres, motion.

    Construite

  • Composants

    Boutons, formulaires, navigation, cartes, overlays, feedback.

    Construite

  • Défilement

    Séquences horizontales et verticales alternées, sans scroll détourné.

    Construite

  • Motion Lab

    Fade, stagger, reveal, scroll, parallaxe, transitions de page.

    Construite

  • Gallery

    Grilles, patterns, compositions, variantes de sections.

    Construite

  • Dashboard

    Sidebar, statistiques, graphiques, tableaux, filtres.

    Construite

  • Documentation

    Installation, architecture, conventions, contribution.

    Construite

§4

La stack

Chaque dépendance est là parce qu'elle fait quelque chose que le projet ne sait pas faire seul. GSAP, Lenis et Three.js ne sont pas installés : aucune séquence ne les justifie encore.

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiMagic UIMotionLucidenext-themes
Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiMagic UIMotionLucidenext-themes
Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiMagic UIMotionLucidenext-themes
Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiMagic UIMotionLucidenext-themes
§5

Prendre le système en main

Les fondations sont posées : tokens vérifiés, primitives accessibles, thème clair/sombre persistant, navigation responsive. La suite consiste à construire les pages restantes sur cette base, dans l'ordre fixé par le cahier des charges.

Design systemComposants