capernaum-ministries
Or Capernaum
Une seule gamme, tous les rôles
Une palette définit un fond, une encre et une couleur de marque. Tous les autres rôles en découlent, ce qui maintient une hiérarchie identique d’une palette à l’autre et entre le clair et le sombre.
Les accents secondaires — pine, amber, rose, sky, leaf — ne servent que sur les icônes. Ils distinguent un domaine d’action d’un autre ; ils ne portent jamais de texte.
Quatre déclinaisons, une seule hiérarchie
Chacune comporte une variante claire et une variante sombre complètes. Le sélecteur de palette de l’en-tête les applique en direct ; la palette par défaut est définie dans config.js.
Deux familles, cinq registres
Epilogue porte les titres, Inter le texte de lecture, et JetBrains Mono l’ensemble des libellés. Le registre monospace est volontairement à part : il signale une métadonnée plutôt qu’un texte suivi.
Une seule géométrie
Boutons et champs partagent une hauteur de référence obtenue par le remplissage interne, jamais par une hauteur fixe. Le plancher est une cible de 44 × 44 px, et les angles sont droits partout — ce système n’a pas d’échelle de rayons.
Chaque état, dessiné
Repos, focus, erreur et désactivé sont chacun dessinés plutôt que laissés au navigateur. Un formulaire porte toujours sa propre surface en dégradé : il se lit comme un objet sur n’importe quel fond — y compris une photographie.
Les champs ci-contre sont un spécimen. Ils n’envoient rien.
Les objets récurrents
Carte, pavé d’icône, citation détachée, liste de faits en pointillés — les blocs dont chaque page est assemblée, partageant tous une même épaisseur de bordure et une même couleur de filet.
Carte
Pavé d’icône, titre, texte, et une action ancrée en pied.
La carte de citation, telle qu’elle apparaît sur la page Témoignages — guillemet à gauche, attribution en pied.
Un mouvement que l’on peut désactiver
Les sections apparaissent en fondu à leur entrée, le bandeau d’annonces défile, l’en-tête se masque à la descente et revient à la remontée, et un menu déroulant se ferme avec un délai pour que la diagonale vers le panneau n’ait pas à être parcourue en ligne droite.
Tout cela est conditionné à prefers-reduced-motion. Lorsqu’un visiteur a demandé moins de mouvement à son système, les apparitions se résolvent instantanément, le bandeau s’arrête et aucune information n’est transmise par le seul mouvement.
Jetons
Couleurs sémantiques
Chaque palette redéfinit ces mêmes noms. Aucun composant ne sait quelle palette est active — c’est ce qui permet d’en ajouter une sans toucher au reste.
--bg
Fond de page
--surface
Carte, panneau
--surface-2
Bande alternée
--text
Encre du texte
--text-mid
Texte secondaire
--text-mute
Métadonnées
--brand
Identité, accents
--brand-deep
État enfoncé
--brand-text
Marque en petit texte (conforme AA)
--on-brand
Texte sur la marque
--rule
Filet, séparateur
--rule-bright
Bordure de contrôle
--ring
Anneau de focus
--danger
Erreur de saisie
Échelle
Typographie
Epilogue pour les titres, Inter pour le corps, JetBrains Mono pour les étiquettes. Quatre pas fluides, chacun borné par un clamp().
Display · d1
Zéro Indigent
Titre de section · d2
Transformer des vies, bâtir le Royaume
Chapeau
Le paragraphe d’ouverture qui porte la promesse d’une section, un cran au-dessus du texte de lecture.
Texte courant
Le texte de lecture à sa taille par défaut, réglé sur une justification confortable d’environ soixante-dix caractères, la limite au-delà de laquelle la ligne fatigue l’œil.
Surtitre
Monospace, capitales, interlettrage
Quatre schémas
Palettes
Chaque palette redéfinit les mêmes jetons sémantiques, en clair et en sombre. Elle se choisit dans « Capernaum → Apparence », et cette page est la preuve que le système tient dans les quatre.
terracotta
Terre cuite
sapphire
Bleu sanctuaire
evergreen
Vert persistant
Géométrie
Contrôles
Boutons, champs et sélecteurs partagent une hauteur calculée à partir du même remplissage. Aucune hauteur fixe : c’est ce qui les garde alignés quand la taille du texte change.
Filtre, actif
Filtre, au repos
Hors du parcours idéal
États
Vide, chargement et erreur sont conçus avec le même soin que le contenu : c’est là que se joue la confiance.
Votre message n’a pas pu être envoyé
Réessayez dans un instant. Si cela se reproduit, écrivez-nous directement — vos informations sont conservées dans le formulaire ci-dessous.
Chargement en cours…
Composants
Les objets récurrents
Carte, pavé d’icône, citation détachée, liste de faits en pointillés — les blocs dont chaque page est assemblée, partageant tous une même épaisseur de bordure et une même couleur de filet.
Carte
Pavé d’icône, titre, texte, et une action ancrée en pied.
La carte de citation, telle qu’elle apparaît sur la page Témoignages — guillemet à gauche, attribution en pied.
Spécimen
Système de design · référence
Liste de faits
- Rayon
- 0 — angles droits
- Cible minimale
- 44 × 44 px
- Contraste
- AA, dans les deux thèmes
Animation
Un mouvement que l’on peut désactiver
Les sections apparaissent en fondu à leur entrée, le bandeau d’annonces défile, l’en-tête se masque à la descente et revient à la remontée, et un menu déroulant se ferme avec un délai pour que la diagonale vers le panneau n’ait pas à être parcourue en ligne droite.
Tout cela est conditionné à prefers-reduced-motion. Lorsqu’un visiteur a demandé moins de mouvement à son système, les apparitions se résolvent instantanément, le bandeau s’arrête et aucune information n’est transmise par le seul mouvement.
- Apparition
- 0,9 s · cubic-bezier(.16,1,.3,1)
- Masquage de l’en-tête
- 0,38 s
- Fermeture du menu
- délai de 180 ms
- États des contrôles
- 0,18 s
- Mouvement réduit
- Tout ce qui précède → instantané
Zéro Indigent
Conçu pour être transmis
Tout sur cette page est un jeton. Modifiez-en un et l’ensemble du site suit.