Thème NOP Grand Est · version 1.2
Design system
Le site est construit selon l’Atomic Design : de petites pièces (les atomes) s’assemblent en molécules, puis en organismes, qui forment les modèles et enfin les pages. Tout ce qui suit est le vrai rendu du thème, avec les mêmes blocs que sur le site.
01 — Atomic Design
Atomes
Les plus petites pièces : couleurs, lettres, boutons, liens. On ne les invente pas page par page, on les réutilise.
Couleurs
Une palette sombre pour laisser la place aux photographies. Le rouge est réservé à l’urgence : un appel en cours, le bouton Candidater.
Fond
#090A0B · paper
Fond du site.
Texte clair 15,1:1
Surface
#16181B · stone
Bandeaux, pied de page.
Texte clair 13,6:1
Gris tirage
#2A2E34 · silver
Images en attente.
Texte clair 10,4:1
Secondaire
#616873 · muted
Filets, dates, légendes. Jamais de texte courant.
Sur le fond 3,5:1
Texte
#DDE1E7 · ink
Texte courant, liens, bouton Encre.
Texte foncé 15,1:1
Rouge
#E5484D · accent
Urgence seulement. Texte toujours foncé.
Texte foncé 5,1:1
Typographie
Deux familles : Archivo, condensée pour les titres, et IBM Plex Mono pour les informations pratiques.
Affiche · Archivo 68 %, très grand
#4 — 2027
Titre de section · H2, Archivo 72 %, capitales
Éditions précédentes
Sous-titre · H3, Archivo 85 %
Candidater, exposer
Intertitre · H4
Résidence d’artiste
Chapeau · grand
Tous les deux ans, un parcours d’expositions autour d’une pensée philosophique.
Texte courant · Archivo
Des photographes professionnels mènent des ateliers à partir de la pensée de chaque édition. Les travaux sont restitués pendant L’Événement Photographique.
Information · IBM Plex Mono
25.04 → 18.05.2025 · L’Octroi, Nancy
Boutons
Accent · une seule action urgente
Encre · action principale
Contour · action secondaire
Vers un autre site · flèche automatique
Liens et signes
Lien interne
Voir les archives des éditions.
Lien vers un autre site
Voir le site de NOP Galerie : la flèche s’ajoute seule.
Pastille · appel en cours
Appel en cours
Filet · 1 px secondaire
02 — Atomic Design
Molécules
Quelques atomes assemblés pour une seule fonction : présenter un lieu, ouvrir une rubrique, lister des ateliers.
Carte de lieu
Couleurs + mono + titre
Lieu 01
L’Octroi
47 boulevard d’Austrasie, Nancy
[Horaires]
Porte d’entrée
Étiquette + titre lien + phrase
Pour les photographes
Candidater, exposer
Appel à candidatures, résidence, bourse Jeune création Grand Est.
Liste à filets
Texte + filets
- Milieu scolaire : écoles, collèges, lycées
- Politique de la ville : structures de quartier
- EHPAD : ateliers intergénérationnels
Image légendée
Image + légende mono
Recherche
Champ + bouton
Appel à l’action
Pastille + titre + bouton
Appel en cours
Appel à candidatures 2027
03 — Atomic Design
Organismes
Des sections complètes, prêtes à poser dans une page. Ce sont les compositions du thème : on les insère depuis l’éditeur, rubrique « Compositions ». L’en-tête et le pied de page, en haut et en bas de cette page, sont aussi des organismes.
Organisme · composition nop/portes
Trois portes d’entrée
Trois publics, trois rubriques, séparées par des filets.
Pour les photographes
Candidater, exposer
Appel à candidatures, résidence, bourse Jeune création Grand Est.
Organisme · composition nop/appel
Bandeau appel en cours
Le seul endroit où le rouge s’affiche, avec la pastille et le bouton.
Appel en cours
Appel à candidatures 2027
Ouvert à tous les photographes, quels que soient l’âge, le statut et la nationalité. Sans frais de candidature, rémunération forfaitaire en droits d’auteur. Clôture le [date limite].
Organisme · composition nop/editions
Éditions précédentes
Une liste à filets : numéro, titre, lieu et dates.
Éditions précédentes
Organisme · composition nop/parcours
Le parcours
Les cartes de lieu assemblées en grille, pour les pages d’édition.
Le parcours
Lieu principal
L’Octroi Nancy
47, boulevard d’Austrasie, Nancy
[Horaires]
Exposition partenaire
Muséum-Aquarium de Nancy
[Adresse]
[Horaires]
Exposition partenaire
Musée des beaux-arts de Nancy
[Adresse]
[Horaires]
04 — Atomic Design
Modèles
Les gabarits de page : ils placent l’en-tête, le contenu et le pied de page. On les choisit dans la colonne de droite de l’éditeur.
- Page : titre, image à la une, contenu en colonne de lecture
- Page pleine largeur : sections bord à bord, comme l’accueil et cette page
- Article : titre, date, image à la une, contenu
- Archive : grille de vignettes au format 4/5, pagination
- Recherche : liste à filets avec extraits, nombre de résultats, pagination
- Page introuvable (404) : message et retour à l’accueil
05 — Atomic Design
Pages
Le dernier niveau : les modèles remplis avec les vrais contenus.
- Accueil · pleine largeur
- Artistes et appels
- Éducation à l’image
- Archives
- L’association
- Une recherche · modèle Recherche
- Mentions légales