Unglamorous Nomads — globule ultimate

Design system

Les tokens et composants du site. Tout ce qui est ici est rendu avec les vraies classes du thème : si ça change ici, ça change partout.

01

Couleurs

Thème — change avec clair / sombre

--theme-bgFond de page
--theme-bg2Surfaces, survol
--theme-borderBordures, séparateurs
--theme-line-subtleLignes discrètes (footer)
--theme-textTitres, texte principal
--theme-text-subTexte courant
--theme-text-mutedLabels, méta

Marque

--color-accentCTA, liens, états actifs
--color-hatExplorateur uniquement
--color-successSuccès
--color-errorErreurs

Catégories de brèves — fond + couleur de texte, teinte au survol

D'angoisseBrèves d'angoisse.
De rencontresBrèves de rencontres.
De toilettesBrèves de toilettes.
De cœurBrèves de cœur.
02

Typographie

Plus Jakarta Sans pour toute l'interface et tous les titres, en gras (800). Instrument Serif italique (un seul poids, 400) uniquement pour la voix littéraire (citations, bios, prose). Jamais les deux dans un même titre.

.ds-display
--text-mega · 120

Une brève.

.ds-h1
--text-display · 96

Titre de page.

.ds-h2
--text-3xl · 40

Titre de section.

.ds-h3
--text-2xl · 32

Sous-titre, encadré.

.ds-h4
--text-lg · 20

Titre de carte.

.ds-lead
--text-md · 18

Chapô : une ou deux phrases sous un grand titre pour poser le ton.

.ds-body
--text-base · 16

Texte courant. Des histoires courtes, drôles ou poignantes, écrites par des voyageurs qui n'ont rien à vendre.

.ds-serif
Sans · --text-md · 18

« Pas de fiction ici : chaque histoire a été vécue par la personne qui l'écrit. »

.ds-eyebrow
--text-2xs · 10

Les formats longs

.ds-meta
--text-xs · 12

7 avr. 2026 — par Margaux

.ds-link
--text-sm · 14

Toutes les plumes →

Échelle

03

Boutons

Un seul bouton, .btn. Les variantes ne changent que la couleur ; .btn-sm change la taille. Rayon 4px, pas de majuscules. Au survol, le bouton se soulève sur une ombre d'encre dure, comme un tampon.

Devenir contributeur → Découvrir les brèves Écouter les brèves Devenir explorateur — 5€/mois
S'inscrire Lire plus tard Explorateur

.btn-primary — l'action principale d'une section (une seule, avec parcimonie : l'orange doit rester rare).

.btn-secondary — CTA à l'encre, sans orange : hero, navigation. S'inverse en mode sombre.

.btn-outline — actions tertiaires, liens d'appoint.

.btn-explorateur — uniquement pour l'abonnement payant.

04

Pills

Filtres et catégories. L'état actif prend les couleurs de la catégorie.

05

Espacements & formes

--radius · 4px
boutons, champs
--radius-pill
pills
--radius-round
avatars
0
sections, grilles
06

Composants

Carte d'article

Texture des images — un motif + un filtre, appliqués à toutes les photos du site

Le panneau permet d'essayer grain de papier, trame, riso, simplification des couleurs… sur tout le site. Les réglages restent dans le navigateur ; « Copier le CSS » donne les valeurs à figer dans texture.css.

Ouvrir le panneau texture

Photo card — .ds-photocard / .ds-photocard-sm · couverture monochrome + légende papier

Se tromper dans le formulaire de déclaration douanière de l’aéroport, ça fait quoi ? Se tromper dans le formulaire de déclaration douanière de l’aéroport, ça fait quoi ?

Newsletter — .ds-input + .btn · formulaire Ghost natif

Appel à contributeurs

07

Règles

  • Titres en une seule police, Plus Jakarta Sans 800. Pas de mot en serif italique dans un titre.
  • Pas d'ombres portées. On sépare avec des bordures fines (--border, --border-subtle).
  • Une couleur d'action : --color-accent. --color-hat est réservé à l'abonnement explorateur.
  • Pas de valeurs en dur : tailles, couleurs, rayons et espacements viennent de vars.css.
  • Le texte vit dans les classes .ds-* ; le CSS des pages ne gère que la mise en page.
  • Clair et sombre : toujours vérifier les deux (le bouton en haut de cette page).