Auros
Terminal abyssal avec boules de données bioluminescentes
Auros fonctionne comme un terminal fintech niché dans l'abîme: une toile turquoise presque noire parsemée d'orbes de données bioluminescentes et de dégradés de lumière allant du turquoise au rose, créant une impression de profondeur, de fluidité et de mouvement. L'interface, minimaliste et cinématographique, repose sur un unique écran utilisateur (Matter) d'épaisseur moyenne, doté d'un effet de perspective négatif prononcé qui donne une impression d'échelle sans être criard. Les couleurs sont réparties de manière homogène: des blancs et des argentés achromatiques sont utilisés pour la quasi-totalité du contenu, tandis que la palette chromatique est réservée aux dégradés atmosphériques, à la distinction des surfaces des cartes et à un bouton signature en forme de pilule dont la couleur passe du bleu turquoise au rose lavande. Les cartes semblent flotter sur de subtiles crêtes turquoise (rayon de 16 px, sans ombres) plutôt que sur la hauteur, de sorte que la hiérarchie est perçue comme la profondeur de l'eau plutôt que comme une ombre sur du papier. Les composants ont un aspect soigné et évoquent des instruments: des repères de navigation en majuscules, de fines icônes de flèches géométriques et de grands affichages numériques rose pâle.
Un canevas sombre occupant toute la largeur de l'écran, avec un contenu d'une largeur maximale de 1440 px. L'élément principal est un bloc de texte centré (ligne de navigation → titre → sous-titre → appel à l'action) qui couvre toute la hauteur de la fenêtre, avec une particule en arrière-plan. Les sections sont des bandes pleine largeur séparées par de larges espaces verticaux de plus de 68 px, alternant entre canevas et surfaces légèrement en retrait. La section « Explorer» utilise une mise en page asymétrique à deux colonnes: la colonne de gauche contient des fiches de fonctionnalités empilées, tandis que la colonne de droite présente une illustration moléculaire géométrique. Le contenu est centré dans des colonnes étroites (maximum d'environ 600 px) pour une lecture facilitée, plutôt que de s'étendre d'un bord à l'autre. Le pied de page est une cavité en retrait (#011d1c) avec une marge verticale de 120 px, créant l'effet d'une piscine profonde. La navigation est un panneau fin et transparent dont les éléments sont espacés de 16 à 24 px. Le rythme général est cinématographique et ample — chaque section respire, et la palette de couleurs profondes, évoquant l'eau, crée la sensation de s'enfoncer toujours plus profondément à chaque passage.
Le style visuel est minimaliste et atmosphérique. La page d'accueil présente une sphère de particules en trois dimensions: des milliers de minuscules points turquoise et blancs forment une sphère en rotation qui fait écho à la toile et aux accents rose lavande sur les bords, créant un effet bioluminescent évoquant un objet informationnel. Des diagrammes moléculaires géométriques plats (cercles blancs et fines lignes de connexion sur fond sombre) servent d'éléments décoratifs dans la colonne de droite. Pas de photographies, pas d'images de style de vie, pas de personnes: le langage visuel repose sur des graphiques de données épurés et des formes abstraites. La sphère de particules est l'élément visuel déterminant de l'identité de la marque; elle doit apparaître au moins une fois sur chaque page importante pour renforcer la métaphore des profondeurs marines.
Palette
Marque
- Liquid Abyss
#012624— L'arrière-plan principal, composé de la base de la page, de l'en-tête, de l'élément principal et d'un champ turquoise foncé dominant, crée une atmosphère marine profonde. - Liquid Deep
#011d1c— La surface en retrait correspond au fond et aux panneaux de carton plus épais. Elle est perçue comme légèrement plus foncée que la toile, créant ainsi un subtil dégradé de profondeur. - Liquid Kelp
#003734— Surface de carte et remplissage de bouton en relief: une surface légèrement surélevée, positionnée juste au-dessus du niveau de remplissage. Utilisée pour les cartes de présentation, les panneaux de contenu et comme point de départ d’un bouton à dégradé.
Neutre
- Liquid Mist
#edfffe— Un blanc froid met en valeur le corps du texte, les titres de section et une typographie claire et chaleureuse. Une subtile teinte bleue harmonise le corps du texte avec la palette turquoise. - Platinum
#ffffff— Le blanc pur est utilisé pour les titres, les éléments de navigation, les contours des icônes et les textes à fort contraste. C'est la couleur principale du texte à tous les niveaux de titres et pour la navigation principale. - Silver Mist
#bbc7c6— Le texte secondaire, les descriptions discrètes et la couleur des liens sont conservés dans leur état d'origine. Ils présentent une légère teinte verdâtre qui s'harmonise avec le fond turquoise. - Ash
#f2f2f2— Texte additionnel pour les citations et les avis. Une teinte gris neutre et froide, idéale lorsque la nuance turquoise de Silver Mist est jugée trop vive. - Slate Deep
#707777— Une teinte de surface subtile pour les fonds inactifs ou peu visibles. Elle se situe entre la toile et le carton, créant une différence de hauteur très discrète. - Lavender Phosphor
#fde9ff— Couleur du rétroéclairage pour les statistiques importantes, les compteurs et les indicateurs clés. La teinte rose du dégradé signature est utilisée avec parcimonie comme accent lumineux sur les surfaces sombres.
Typographie
de 10 à 96 px · 6 étapes
- Matter — remplacement: Inter · grandes lignes 400, 500 · La police principale pour les titres et le corps du texte est utilisée avec une épaisseur de 500 pour tous les titres (H1 à H3) et les textes dynamiques de grande taille (86 à 295 px). Une épaisseur de 400 est utilisée pour le corps du texte et les éléments d'interface. Elle se caractérise par un espacement négatif important des lettres pour les grandes tailles (-0,04 em à 61 px, -0,046 em à 86 px) et un espacement positif important pour les lettres capitales des titres (0,08 em à 20 px, 0,12 em à 12 px, 0,15 em à 10 px). Le choix d'une épaisseur moyenne uniquement pour les titres est une caractéristique distinctive – pas de gras ni de police légère – qui confère à la police une allure uniforme et affirmée.
- Arial — remplacement: system-ui · grandes lignes 400 · Un élément de repli secondaire pour les éléments d'interface utilisateur interactifs (navigation, boutons, texte d'en-tête et de pied de page). Il s'affiche uniquement en 14 px et sert de solution de repli sûre et universelle lorsque Matter n'est pas chargé. Il couvre les étiquettes de formulaire, le texte des boutons et les petits textes d'aide.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 20px |
| Rayon du bouton | 6px |
| Rayon de la carte | 16px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 68px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Auros et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Design Full-Time — un cinéma studio avec un projecteur chaleureux
- Air — sculpture « Ciel de minuit à travers le verre»
- Slash — Chambre forte de minuit avec des livres de comptes dorés
- Raycast — Centre de commandement de minuit, néon corail
- Dimension — un poste de travail éclairé au crépuscule avec des panneaux en verre dépoli
- Modal — Un terminal phosphorescent dans une salle serveur plongée dans l'obscurité - la seule source de lumière est d'un vert éclatant
- Giga — Horizon de minuit sur de l'obsidienne givrée
- Reflect Notes — L'espace violet étoilé est un observatoire obscur où des notes flottent comme des constellations sur un fond d'indigo presque noir et vide.
- Ameba — La salle de contrôle à minuit – une pulsation bleu électrique à l'intérieur de panneaux de verre dépoli
- AgentQL — Aurores boréales au-dessus du terminal la nuit
- Frame — Un cinéma pour les séances nocturnes. Une salle obscure où un simple projecteur bleu suffit à tout éclairer, l'interface utilisateur se fondant dans le décor pour laisser place à la projection de contenus créatifs.
- Harness — Centre de contrôle des missions à minuit avec des accents verts phosphorescents