Répertoire Technique & Tokens CSS

Design System Unifié
Nakôbio × Biosain

Référentiel commun pour harmoniser les interfaces, formulaires et fiches de l'écosystème : nako.bio, biosain.at, campus et les exports de cours imprimables.

Playfair Display × Quicksand

Deux polices libres sous licence SIL OFL — Playfair Display apporte l'élégance éditoriale des magazines premium, Quicksand amène chaleur humaine et lisibilité mobile.

Serif — Éditorial & Titrage Premium
Playfair Display

« Nourrir la terre pour que la terre nous nourrisse. »

  • Rôles stricts : Titres h1, h2, h3, citations, repères chiffrés et numéros d'étapes (01, 02).
  • Évocation : Contraste élevé, magazine haut de gamme, présence forte sur grand écran.
  • Tailles recommandées : 28px (h2) à 48px (hero/impact).
  • Poids disponibles : 400, 500, 600, 700, 800 — Italic 400 & 600.
Sans-serif — Interface, Chaleur & Rigueur
Quicksand

Tuyau PE Ø 40 mm — Pression de service : 2.5 bars — Débit : 12 L/m linéaire.

  • Rôles stricts : Textes courants, tableaux techniques, navigation, badges, boutons et formulaires.
  • Évocation : Arrondis doux, chaleur humaine — lisibilité optimale sur smartphone en plein soleil.
  • Tailles recommandées : 12px (légendes), 14px (UI), 16px (corps).
  • Poids disponibles : 300, 400, 500, 600, 700.

Échelle Modulaire

--text-4xl · 48px Aa
--text-3xl · 36px Aa — Titre H1
--text-2xl · 28px Aa — Titre H2
--text-xl · 21px Aa — Titre H3
--text-lg · 18px Aa — Chapeau intro
--text-base · 16px Aa — Corps de texte
--text-sm · 14px Aa — Métadonnées UI
--text-xs · 12px Aa — Légendes & badges

Socle Matières & Déclinaisons de Marque

Les surfaces naturelles et encres végétales sont partagées. Les teintes de marque changent selon le contexte avec data-theme. Survolez les swatches pour les détails.

1. Socle Commun — Matières & Sol

#FFFDF6
Surface Naturelle #FFFDF6 Fond principal — lin / parchemin --color-surface
#F4EED8
Surface Sunken #F4EED8 Zones techniques & callouts --color-surface-sunken
#1B2318
Noir Végétal #1B2318 Encre de lecture principale --color-ink
#43492F
Vert Olive Sombre #43492F Textes secondaires --color-ink-soft
#6B684E
Terre d'Ombre #6B684E Métadonnées & légendes --color-ink-faint

2. Déclinaisons Spécifiques par Marque

Nakôbio Mali / Sahel

data-theme="nakobio"

Agroécologie sahélienne, semences paysannes reproductibles et pédagogie de terrain.

PRIMARY #2F4A34
SECONDARY #C86832
ACCENT #E0A030

Biosain Autriche / Europe

data-theme="biosain"

Maraîchage bio-intensif de précision, circuits courts et multiplication de semences.

PRIMARY #CAAE00
SECONDARY #2F4A34
ACCENT #1E3324

3. Tokens Actifs (thème courant)

--color-brand-primary
--color-brand-secondary
--color-brand-accent
--gradient-brand
--gradient-hero

Composants Modulaires en Action

Les composants s'adaptent automatiquement au thème actif (essayez de basculer entre Nakôbio et Biosain en haut à droite).

Boutons

Cartouche d'Étape Pédagogique

01

Repérage des lignes et tension des cordeaux

15 minutes

Aligner les jalons aux deux extrémités de la parcelle. Une planche standard fait exactement 75 cm de largeur utile avec un passe-pied de 40 cm.

02

Incorporation de compost de surface

30 minutes

Étaler uniformément 4 brouettes de compost mûr par planche de 30 mètres sans enfouir profondément afin de nourrir les vers et la microfaune de surface.

Encadrés de Conseils & Alertes

Bonne pratique agronomique
Toujours couvrir immédiatement après l'amendement (paillage de paille de mil ou bâche occultante) pour préserver l'humidité et les micro-organismes du sol.
Point de vigilance
Ne pas tasser le lit de semence lors de la pose des asperseurs. Marchez exclusivement dans les passe-pieds de 40 cm.

Tableaux Techniques & Dosages

Composant / Étape Type de matériel Dosage / Cote Notes de terrain
Planche standard Sol meuble permanent 75 cm Compatible rouleau rayonneur & filets
Tuyauterie principale Polyéthylène haute densité Ø 40 mm Pression d'entrée recommandée : 2.8 bars
Fertilisation de fond Compost thermophile mûr 200 L / 30 m À incorporer superficiellement au croc

Badges de Statut & Labels Métier

100% Bio Certifié Semence Paysanne Saison Sèche 2026 Terroir Sahélien En stock (Planches A & B) Dernières récoltes Intrant Interdit

Cartes Produits & Fiches Pédagogiques

Récolté ce matin 1 500 FCFA / kg

Tomate Roma Sélection Sahel

Variété paysanne acclimatée · Chair dense, sans traitement chimique de synthèse

Module 03 Durée : 45 min

Compost Thermophile Sahélien

Règle du ratio Carbone/Azote (C/N = 30), aération passive et montée en température à 65°C pour assainir les adventices.

Télécharger le protocole PDF →

Formulaires & Saisie Accessible

Nom du responsable pour la distribution des semences reproductibles.

Grille d'Espacement & Rayons de Courbure

Tous les espacements suivent une grille modulaire base 4px / 8px. Les rayons restent doux et naturels.

Échelle d'Espacement

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px

Rayons de Courbure

Xs
--radius-xs 3px
Sm
--radius-sm 6px
Md
--radius-md 10px
Lg
--radius-lg 16px
Full
--radius-full

Ombres

--shadow-sm Carte simple
--shadow-md Hover / Focus
--shadow-lg Modal / Overlay

Tokens d'Animation

--transition-fast 100ms ease
--transition-base 200ms ease
--transition-slow 350ms cubic-bezier
--transition-bounce 300ms bounce

Règles d'Implémentation & Intégration

Ce design system est prêt pour la production et conçu pour être facilement consommé par les développeurs et les assistants de génération de code.

Installation rapide (CSS unifié)
<!-- Importer les tokens et composants dans vos pages HTML ou layouts Astro -->
<link rel="stylesheet" href="https://design.nako.bio/tokens/tokens.css" />
<link rel="stylesheet" href="https://design.nako.bio/tokens/themes.css" />
<link rel="stylesheet" href="https://design.nako.bio/components/steps.css" />
<link rel="stylesheet" href="https://design.nako.bio/components/callouts.css" />
<link rel="stylesheet" href="https://design.nako.bio/tokens/print.css" />

Principes de non-régression à respecter :

  1. Zéro police non autorisée : Ni Roboto, ni Montserrat, ni Poppins. Strictement Playfair Display (titres, chiffres, citations) et Quicksand (interface et corps).
  2. Zéro couleur hexadécimale en dur dans les composants : Toujours utiliser var(--color-brand-primary), var(--color-surface), etc.
  3. Bascule de marque : L'attribut data-theme="nakobio" ou data-theme="biosain" à la racine suffit pour adapter l'ensemble de l'interface.
  4. Impression A4 automatique : Grâce à print.css, toute fiche technique ou page de cours s'imprime en PDF sans coupure maladroite de tableaux ou d'étapes.
  5. Animations systématiques : Utiliser var(--transition-base) pour tous les états de survol — jamais de valeurs codées en dur.