Aperçu en direct
Page d’accueil de Synora sur papier crème : une grille fine de douze colonnes annotée en mono — Line 3 · 131 px · 82% · 441 px wide — avec une bande de colonne citron vert pâle, derrière les très grandes capitales condensées We build what we design., la ligne du milieu tracée en contour seulement ; à droite, Strategy, design and engineering under one roof au-dessus d’un bouton pilule citron vert Start a project, sous une navigation avec le logotype Synora. et un bouton noir Start a project ; en bas, Fig. 01 · Construction, rendered live et Lighthouse 100 · 100 · 100 · 100 on every launch
25 / THÈME ASTRO

Synora

Pour une agence dont le propre site est le premier livrable.

  • Agence web
  • Studio de design
  • Éditorial

La vingt-cinquième version Quaeris Design. Une agence web indépendante portant quatre disciplines, trois études de cas, une méthode en quatre étapes, trois formules publiées, une page studio avec équipe et chronologie, et un journal avec auteurs et catégories — vingt-sept routes indexables, et toute la démo en ligne, ouverte à l’inspection.

MESURÉ SUR LA DÉMO
6.5 KB
JavaScript
27
Routes indexables
0
Feuilles de style bloquantes
2
Familles de polices
AVIF / WebP
Images
Astro 7.3
Construit avec

Chaque chiffre provient de astro-design-synora.pages.dev. Ouvrez la démo et vérifiez par vous-même.

Un site publié. TVA comprise ; le travail client relève de la licence studio. Rétractation sous 14 jours, jusqu’au premier téléchargement.

LE BRIEF

À quoi il sert, et à qui il convient.

Une direction visuelle pour une agence web indépendante qui veut que son propre site fasse la preuve du métier. Un papier crème, une seule encre et un seul accent citron vert, Archivo condensé, en capitales et en graisse forte à l’échelle de l’affiche, IBM Plex Mono pour chaque libellé, et des filets fins avec des ombres portées franches à la place des cartes adoucies. La décision qui compte est de montrer la construction : le hero trace sa propre grille, ses lignes de base et ses cotes par-dessus le vrai titre, annotées en mono, si bien que la mise en page se présente comme construite plutôt que décorée.

  • Agences web et digitales indépendantes
  • Studios de design et de front-end qui vendent stratégie, design et développement
  • Collectifs de freelances qui se présentent comme une seule équipe
  • Studios qui publient leurs formules et leur méthode au lieu de les cacher
LE JEU DE PAGES

Les routes que vous obtenez, et d’où elles viennent.

Chaque route ci-dessous est générée à la compilation et servie comme un fichier statique.

Pages

Écrites une fois, modifiées sur place.
  • Accueil
  • Services
  • Réalisations
  • Tarifs
  • Studio
  • Contact
  • Journal
  • Auteurs
  • Catégories
  • Recherche
  • Mentions légales
  • Plan du site

Collections

Un fichier Markdown devient une route, une entrée d’index et une liste.
  • Article × 6
  • Auteur × 4
  • Catégorie × 5

Système

Générées, jamais maintenues à la main.
  • 404
  • sitemap.xml
  • robots.txt
NOTES DE CONCEPTION

Les décisions derrière le style.

01

Le hero trace sa propre construction.

Derrière le titre, un canvas dessine la grille, les lignes de base et la colonne que la mise en page utilise vraiment, mesurées sur le texte rendu, et les annote en mono — ligne, corps, largeur, colonne — comme une figure dans un spécimen typographique. Il se charge après la page, reste hors du chemin critique, et n’est pas lancé du tout en mouvement réduit, où un lavis citron vert en CSS le remplace.

02

Une linéale, toutes les chasses.

Archivo est chargée avec son axe de chasse, si bien qu’une seule famille couvre toute la gamme : resserrée à 78 % pour les numéros de chapitre et les grands chiffres, 82 pour le hero, élargie à 118 pour les libellés espacés. Une ligne de chaque titre est composée en contour plutôt qu’en plein, et chaque chapitre porte derrière lui un numéro détouré — l’accent typographique, sans seconde fonte de titrage.

03

Un seul citron vert, réservé à l’action.

Le citron vert est la seule couleur saturée : les boutons, les petits repères du hero, l’année active de la chronologie. Là où il doit se lire comme du texte sur le crème, il devient un vert fougère profond qui garde son contraste. Tout le reste est encre et filets, et un bouton répond au survol par une ombre portée franche plutôt que par un halo. Les catégories du journal sont désaturées dans la famille du papier, si bien qu’un sujet ne se lit jamais comme un second accent.

04

Rien de tiers par défaut.

Identité, formulaire de contact, mesure d’audience et newsletter vivent chacun dans un fichier sous src/config. D’origine, le thème ne livre aucun script tiers, ne dépose aucun cookie et ne demande aucun compte : le formulaire passe par mailto, l’audience et la newsletter sont désactivées. Un service choisi sans sa clé se replie avec un avertissement à la compilation au lieu d’être livré cassé, et le bandeau de consentement n’apparaît que pour un outil qui dépose des cookies.

PALETTE
  • Crème #fcfaf2 Fond de page, le papier sur lequel tout est tracé
  • Avoine #f4f4ef La seconde surface, pour les plaques des cartes et les panneaux
  • Encre #1a1c18 Titres, texte, filets et ombres portées franches
  • Gris mousse #5e6357 Le texte secondaire et les libellés mono
  • Citron vert #bef35e La seule couleur saturée : boutons, repères, lavis du hero
  • Fougère #3a6900 Le citron vert lisible sur le crème : point du logotype, prix, année active
POLICES
Titrage et texte
Archivo variable en chasse et en graisse : 800 en capitales, de 78 à 88 % de chasse, pour les titres, 600 à 118 % pour les libellés larges, chasse normale pour la lecture
Libellés
IBM Plex Mono 400 et 500, capitales espacées pour les libellés, les index et les cotes
CE QUI L’ACCOMPAGNE

Sachez ce que vous obtenez.

Une belle capture d’écran n’est qu’un début. Ce sont les détails qui vous aident à choisir.

01 / LES PAGES

Une vue du site entier.

Chaque version liste son jeu de pages, de la page d’accueil aux templates d’article, d’auteur et de catégorie dont votre projet a réellement besoin.

Liste des pages avec chaque version
02 / L’EXPÉRIENCE

Chaque écran compte.

Mises en page pour ordinateur et mobile, navigation, états de focus et interactions, vérifiés aux largeurs que les gens utilisent vraiment plutôt qu’à celle de la capture d’écran.

Comment fonctionne la personnalisation ↗
03 / LA LIVRAISON

Les détails, avant d’acheter.

Le code source, les prérequis d’installation, la licence et les conditions de support sont publiés sur la page du thème, pour que vous puissiez décider avant de dépenser quoi que ce soit.

Contenu exact avec chaque version
TARIFS

Un prix clair. Une offre claire.

Choisissez le design qui convient à votre projet. Une licence couvre un site publié ; le travail livré à des clients relève de la licence studio.

THÈMES À L’UNITÉ EN VENTE

Trouvez le vôtre.

59 € le thème

Une licence, un site publié. Le travail que vous livrez à des clients relève de la licence studio : 399 € pour toute la collection, et un an de tout ce qui paraît ensuite.

Une licence de thème
Un projet publié
Travail pour un client
Licence studio
Mises à jour et support
Indiqués par thème
CE THÈME

Tout ce qui précède, en un téléchargement.

Synora, sous forme de code source Astro complet. Modifiez ce que vous voulez, déployez où vous voulez en statique, et gardez-le.

Un site publié. TVA comprise ; le travail client relève de la licence studio. Rétractation sous 14 jours, jusqu’au premier téléchargement.

AILLEURS DANS LA COLLECTION

Trois autres directions.