Ciridae
Une pièce vide où palpite la chaleur des braises – une cathédrale presque noire où le seul son chaud est un fin filet de rouille, et où chaque surface est définie par de fines lignes plutôt que par des ombres.
Ciridae évolue dans un vide: un canevas #0b0b0b, des commandes en forme de pilule aux contours à peine perceptibles et une typographie figée en Pragmatica Cond majuscules, graisse 400 – ni gras, ni majuscules/minuscules, ni éléments décoratifs. La seule note chromatique est #cc6437, une teinte rouille chaude et incandescente, utilisée pour les traits les plus fins et les petits signes de ponctuation, jamais en remplissage. Les cartes flottent sur #272a2a avec un rayon de 10 px et sans ombres; le système fait l'impasse sur le relief, définissant les surfaces par le contraste tonal et des bordures d'un pixel. Les photographies, fortement floues et atmosphériques – marbre liquide, fumée, feu – sont placées derrière le texte en mode plein écran, conférant à l'image une dimension plus atmosphérique qu'illustrative.
La mise en page occupe toute la largeur, le contenu étant centré sur une largeur maximale d'environ 1400 px. L'en-tête est une composition sombre occupant toute la largeur, avec un logo représentant une constellation et encadré de micro-étiquettes à gauche et à droite. Les sections alternent: en-tête sombre → bande claire avec sous-couches (Os) → texte sombre → grille sombre de cartes système → pied de page sombre. La seule section claire crée une transition tonale nette et directe. La grille de cartes utilise quatre colonnes, la première carte étant environ deux fois plus large que les trois autres, créant ainsi une mise en page asymétrique qui met l'accent sur le contenu. L'espacement vertical entre les sections est généreux (plus de 80 px). La navigation est minimaliste: une barre d'actualités en haut, un bouton « Commencer maintenant» aligné à gauche et un bouton « Menu» aligné à droite dans la barre supérieure. Pas de barre latérale, pas de méga-menu.
Des photographies atmosphériques, occupant toute la surface de la page, dominent l'écran d'accueil et les fiches. Ces images, fortement floues (avec des valeurs de flou d'arrière-plan de 50 et 40 px), présentent un contraste élevé et représentent du marbre liquide aux tourbillons bleu-rouge, de la fumée, des silhouettes sombres de paysages et des textures de feu et de braises. Sombres et mystérieuses, elles se fondent dans la gamme tonale de la page blanche au lieu de s'en détacher. On n'y trouve ni photos de produits, ni personnes, ni captures d'écran d'interface. Ces images créent une atmosphère plutôt que de servir de contenu illustratif. La grille de fiches associe chaque système à une scène atmosphérique différente, permettant ainsi aux photographies de fonctionner comme des identifiants visuels abstraits plutôt que comme de simples images de produits.
Palette
Marque
- Ember Rust
#cc6437— Dans un système monochrome, seuls les traits d'accentuation, les lignes des icônes et les petits surlignages de texte présentent une couleur chromatique, apparaissant davantage comme une tache pulsante à peine perceptible que comme un remplissage.
Neutre
- Void Black
#0b0b0b— Images de fond pour la page principale et les sections; la base de l’ensemble du système. - Charcoal Surface
#272a2a— Les images de fond en carton et les panneaux sur les zones sombres sont d'un ton plus clair que la toile afin de créer une séparation des surfaces sans ombres. - Bone
#edebe7— Les zones claires de l'arrière-plan et de la surface sont de couleur crème, là où le système passe du foncé au clair. - Bone Darker
#dfddd9— Une teinte délicate appelée « Os» pour les surfaces claires multicouches et les éléments d'une couleur chaude, presque blanche. - Pure White
#ffffff— Tous les textes principaux et les titres, les bordures fantômes des boutons et les éléments de navigation sont dans la couleur primaire avec un rapport de contraste de 19,7:1 sur un fond noir Void. - Abyss
#050505— Fond en relief pour la bande d'actualités (bande d'actualités supérieure) - une teinte plus foncée que la toile principale pour faire ressortir la bande.
Typographie
de 11 à 32 px · 5 étapes
- Pragmatica Cond — remplacement: Oswald · grandes lignes 400 · La police principale d'affichage et d'interface utilisateur est une police condensée étroite, avec des majuscules de 14 px pour le corps du texte, de 20 px pour les titres de section et de 32 px pour le texte courant. Cette police extrêmement étroite, avec des majuscules de 14 px pour le corps du texte, est la solution la plus caractéristique du système: le texte courant se lit comme le murmure d'une police architecturale plutôt que comme une prose ordinaire. Remplacez-la par Oswald ou Barlow Condensed si Pragmatica Condensed n'est pas disponible.
- Pragmatica — remplacement: Inter · grandes lignes 400 · Police secondaire utilisée pour les longs textes (par exemple, la description de la carte « Système d'exploitation IA» est en 24 px, le texte des paragraphes en 15 px). Légèrement plus large que Pragmatica Cond pour faciliter la lecture des grands blocs, mais toujours en graisse 400 — jamais en gras. À remplacer par Inter ou Söhne.
- Roboto Mono — remplacement: Roboto Mono (free · grandes lignes 400 · Police de caractères à chasse fixe pour un bandeau d'actualités (« ACTUALITÉS • 15 JUIN 2026 • ACCÈS ANTICIPÉ À CRUCIBLE DÉSORMAIS OUVERT»). Cette police à chasse fixe est utilisée uniquement ici, afin de bien distinguer les données système, et non l'identité visuelle de l'entreprise.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 16-20px |
| Rayon du bouton | 1440px |
| Rayon de la carte | 10px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 80px |
| Largeur de la page | 1400px |
L'IA construira votre site web dans le style Ciridae 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
- Dala — une constellation planant sur du velours noir
- Linear — instrument de précision de minuit
- Resend — velours noir avec une couleur néon violette
- Dovetail — Un plan sous une lune noire — des lignes graphiques à peine visibles, une police blanche, une étincelle violette
- Neon — Une salle serveur à la nuit tombée. L'obscurité totale, où la seule lumière provient des données et des interactions des utilisateurs.
- Discord — Le monde du jeu est caché derrière une fenêtre de chat contextuelle; chaque section est un environnement autonome avec son propre éclairage et son ensemble de personnages.
- Aaru — Observatoire de champ de particules à minuit
- Atlas Card — La Voûte de Minuit, avec son unique rayon de saphir, est une étendue d'un noir absolu où seule compte le bleu électrique profond.
- Midjourney — Un terminal bioluminescent dans les profondeurs océaniques. Un monde sous-marin où l'intelligence se génère visuellement en flux ASCII, et où les commandes apparaissent sous forme de motifs faiblement lumineux.
- Checkly — Centre de contrôle des missions en orbite lointaine
- Krea — galerie noir à minuit
- Wope — Wope est une interface à horizon violet. Imaginez une table d'observatoire sombre avec une lumière violette qui jaillit de sous le verre.