Aperçu en direct
Page d’accueil de Bathys : une page bleu marine profond encadrée de fins crochets d’angle cyan, le titre en capitales The deep ocean, read in twelve milliseconds, ses deux derniers mots en cyan lumineux, à côté d’une sphère de points et de lignes cyan pâles, au-dessus d’un bouton cyan plein Deploy sensor array et d’une colonne de chiffres — 4,092 ocean buoys live, 12ms acoustic latency, 2.4B readings sampled / day
21 / THÈME ASTRO

Bathys

Pour une plateforme dont le produit est une mesure.

  • Deep tech
  • Climat et océan
  • Plateforme de données

La vingt-et-unième version Quaeris Design. Une plateforme d’intelligence océanique portant trois pages produit, des offres publiées, une page à propos et un journal avec auteurs et catégories — vingt-cinq routes, et toute la démo en ligne, ouverte à l’inspection.

MESURÉ SUR LA DÉMO
29.3 KB
JavaScript
25
Routes indexables
0
Feuilles de style bloquantes
3
Familles de polices
WebP
Images
Astro 7.3
Construit avec

Chaque chiffre provient de astro-design-bathys.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 plateforme qui vend ce qu’elle mesure. Un bleu marine abyssal, un seul cyan sonar, Rajdhani en capitales et en graisse légère pour les titres, Inter pour la lecture et JetBrains Mono pour chaque libellé, avec des angles vifs, des filets et des crochets d’angle à la place des cartes. La page d’accueil est une plongée : faire défiler la section des capacités descend à travers cinq zones de profondeur pendant qu’une console fixe suit le chapitre à l’écran — et le globe Three.js qui la précède n’est téléchargé qu’une fois la page au repos, sur un écran assez large pour l’afficher.

  • Plateformes de surveillance de l’océan, du climat et de l’environnement
  • Start-up deep tech qui vendent des capteurs, de la robotique ou des instruments
  • Produits de données et d’observabilité qui ont une console en direct à montrer
  • Programmes de recherche et agences qui présentent un système technique
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
  • Fonctionnalités
  • Réseau de capteurs
  • Déploiement
  • Tarifs
  • Journal
  • À propos
  • Contact
  • Mentions légales
  • Plan du site

Collections

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

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

La section des capacités est une plongée.

Cinq chapitres à gauche pilotent une seule console d’opérateur fixe à droite, chaque écran suivant le chapitre visible et changeant par un balayage sonar. Une jauge de profondeur suit la descente de la zone épipélagique à la zone hadale, la lumière baisse à mesure que la page s’enfonce et la neige marine dérive. Avec le mouvement réduit, les états sont fixes et la console se commande par onglets.

02

Le globe arrive après tout le reste.

Le hero est une sphère de 2 600 points dont quatorze mouillages émettent des pings sonar, dessinée en Three.js. Une affiche en CSS tient sa place d’abord, et la bibliothèque n’est demandée qu’une fois la page chargée et le navigateur au repos — jamais sur un téléphone, avec le mouvement réduit, avec Save-Data ou sans WebGL. Le globe plafonne sa densité de pixels, se met en pause hors de l’écran et est libéré quand on quitte la page.

03

Chaque surface est tracée d’un trait.

Aucune carte arrondie, aucune ombre pour tenir la mise en page. Des filets cyan translucides séparent les sections, des crochets d’angle encadrent l’en-tête et la console, une règle de profondeur longe le hero et chaque libellé est composé en JetBrains Mono, largement espacé. Ces quelques règles portent aussi les pages produit, les offres et le journal.

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é.

PALETTE
  • Abysse #020617 Fond de page et hero
  • Thermocline #06131b Le haut de la section de plongée
  • Écume #f8fafc Titres et chiffres
  • Limon #94a3b8 Texte secondaire et la ligne de titre atténuée
  • Sonar #22d3ee L’accent, le globe et les crochets
  • Cyan profond #06b6d4 Le bouton principal et les filets
POLICES
Titrage
Rajdhani 300, 400 et 500, en capitales à l’approche serrée
Texte
Inter 200 à 400, texte courant et résumé du hero
Libellés et données
JetBrains Mono 300 et 400, navigation, surtitres et relevés
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.

Bathys, 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.