Le système de conception Atelier

Le système de conception Atelier est la langue visuelle derrière ce site et la marque Nibiru. Il est inspiré du symbole de la lotus dans le logo de la marque et du crème chaude sur laquelle se trouve le mot de marque. Le système est fourni sous forme de jetons de conception portables — CSS, SCSS, JSON et Tailwind — afin que tout site Nibiru, outil interne ou projet partenaire puisse adopter l’apparence sans avoir à la réinventer.

Un lotus sur du papier crème, éclairé par la lumière du matin.

Cinq principes

1. Une famille. Chaque élément de texte utilise Bricolage Grotesque (police variable, Google Fonts). Les tailles différentes utilisent des valeurs d’axe différentiel en taille optique — les tailles d’affichage sont caractéristiques, les tailles de corps sont calmes. Aucune police à serifs, jamais.
2. Crème, pas blanc. La page est #f5f1e8 — vellum chaud. Le blanc pur est trop froid. Le noir pur est trop fort. Nous utilisons un noir indigo profond #1f1b2e pour le texte à la place.
3. Deux pétales, une feuille d’or. Le violet de la marque #7c70ab et le bleu céleste de la marque #7db7dc viennent directement du lotus. Une seule accentuation dorée restreinte #c9a96e est réservée pour les moments qui méritent cela.
4. Espacement éditorial. Espaces blancs généreux, dispositions asymétriques, paragraphes de tête qui respirent. Plus proche d’un monographie publié qu’une page d’accueil SaaS.
5. Mouvement réduit. Les choses bougent lentement quand elles bougent du tout. Le lotus héroïque respire une fois toutes les 18 secondes. Pas de saccades, pas de clignotements, pas de battements.

Obtenir les jetons

# CSS custom properties
curl -O https://nibiru-framework.com/design-system/tokens.css

# SCSS variables and maps
curl -O https://nibiru-framework.com/design-system/tokens.scss

# Tailwind preset
curl -O https://nibiru-framework.com/design-system/tailwind.preset.js

Tous les jetons sont qualifiés de nom d’espace (--nibiru-* / nibiru.* / nibiru-*).

Adoptarlo en 12 líneas

<link rel="stylesheet" href="https://nibiru-framework.com/design-system/tokens.css">
<style>
  body  { background: var(--nibiru-paper); color: var(--nibiru-ink);
          font-family: var(--nibiru-font-text);
          font-variation-settings: var(--nibiru-fv-body);
          letter-spacing: var(--nibiru-tracking-body); }
  h1    { font-variation-settings: var(--nibiru-fv-display-hero);
          letter-spacing: var(--nibiru-tracking-display);
          font-size: var(--nibiru-text-hero); }
  .cta  { background: var(--nibiru-ink); color: var(--nibiru-paper);
          padding: 0.7rem 1.2rem;
          border-radius: var(--nibiru-radius-md); }
</style>

Cela suffit pour être en phase avec la marque.

Ce qui est documenté ici

• Palette — chaque couleur avec son rôle.
• Typography — les axes variables de Bricolage utilisés sérieusement.
• Components — boutons, cartes, appels à l’attention, le lanceur Oracle.
• Motion — respirer, s’évanouir, pas de flash.