Dala
une constellation planant sur du velours noir
Dala présente un espace sombre où des vides noirs côtoient une unique touche de violet vibrant, ponctuée d'éclats ambrés. La typographie, monolithique et aérienne, utilise la police PPNeueMontreal (400 g/m²) pour chaque titre. Démesurée (78 à 113 px), elle est associée à un espacement négatif marqué, conférant aux titres une dimension sculpturale plutôt qu'informative. Au centre, une constellation de minuscules particules triangulaires multicolores dessine la forme organique d'un cerveau, signature de la marque: la connaissance visualisée comme une intelligence distribuée plutôt que comme des données hiérarchisées. La mise en page s'organise sur deux colonnes aérées: des titres surdimensionnés, alignés à gauche, côtoient des textes longs et fluides, flottant sur un fond noir épuré, sans encadrés ni cartes. Les éléments sont volontairement réduits à l'essentiel: un bouton en forme de pilule violette, des liens hypertextes dissimulés et de larges blocs de texte.
Les sections pleine largeur sont disposées sur un fond noir uni, avec une largeur de contenu maximale d'environ 1280 px centrée. La section principale présente une mise en page asymétrique à deux colonnes: un grand titre aligné à gauche (113 px) avec le texte principal et l'appel à l'action sur la moitié gauche, tandis qu'une visualisation de type « cerveau particulaire» occupe la moitié droite à une échelle imposante. Les sections suivantes alternent entre deux colonnes (visuel à gauche/texte à droite, puis texte à gauche/visuel à droite), créant un rythme de lecture en zigzag. Les gouttières entre les sections sont généreuses (60 à 120 px verticalement). Il n'y a ni grilles de cartes, ni tableaux de prix, ni descriptions de fonctionnalités sur plusieurs colonnes: le contenu est organisé dans des blocs texte-visuel spacieux sur deux colonnes. La navigation est assurée par une barre supérieure transparente minimaliste, sans barre latérale ni méga-menu. La densité des éléments est extrêmement élevée: un ou deux éléments par fenêtre, sans jamais surcharger l'interface d'informations.
Le design visuel est entièrement procédural et abstrait: aucune photographie, hormis les portraits d’équipe. L’identité visuelle de la marque est un nuage dense de milliers de minuscules particules triangulaires aux contours nets, rendues dans un spectre complet et vibrant (violet, ambre, turquoise, pourpre, bleu), formant une silhouette organique évoquant un cerveau ou un neurone. Ce champ de particules est animé et sert à la fois d’image principale et d’élément d’identité de marque. Des particules environnantes, de densité inférieure, se déplacent sur le fond de la page. Les triangles sont dotés de contours précis, d’une épaisseur de trait de 1 à 2 px, d’arêtes vives et de couleurs riches et chromatiques – jamais en niveaux de gris. Les portraits d’équipe sont affichés sous forme de grands rectangles arrondis (rayon de 124 px) sans bordures ni chevauchements. Pas de captures d’écran de produits, pas de photos lifestyle, pas de rendus 3D: le système de particules est l’essence même de la marque.
Palette
Marque
- Electric Iris
#8052ff— Les principaux boutons d'action, le logo et les éléments graphiques de la marque sont d'une seule et riche couleur violette, signalant l'interactivité et l'identité de la marque sur un fond noir.
Neutre
- Void
#000000— La toile de la page, les arrière-plans des sections, l'espace négatif — la surface dominante est d'un noir pur, et non gris foncé, créant un vide qui permet aux accents chromatiques de flotter librement. - Bone White
#ffffff— Titres, texte principal, remplissage des icônes, état de navigation actif: la seule couleur typographique qui assure une hiérarchie maximale sur fond noir. - Ash Gray
#9a9a9a— Le texte de navigation discret, la couleur translucide des liens et les étiquettes supplémentaires sont masqués par le texte principal sans pour autant devenir invisibles. - Silver Mist
#bdbdbd— Texte supplémentaire, informations au niveau de la légende - la couleur grise la plus discrète et la plus lisible, pour appuyer le contexte. - Saffron Spark
#ffb829— La mise en valeur du texte, l'accentuation des liens et l'utilisation de signes de ponctuation pour attirer l'attention – un jaune chaud sur fond violet – créent une tension chromatique pour la marque. - Deep Verdant
#15846e— La coloration secondaire de surface, un arrêt de logo en dégradé, se manifeste par un bord plus foncé du dégradé de la marque et sous la forme de transitions d'accentuation à peine perceptibles.
Typographie
de 12 à 113 px · 10 étapes
- PPNeueMontreal — remplacement: Inter · grandes lignes 200, 400, 600, 700 · Une police uniforme est utilisée dans tous les contextes de l'interface utilisateur. Les titres affichés (78 à 113 px) utilisent une police de 400 g/m² avec un interlignage de -0,04 em, soit la même graisse que le corps du texte, mais l'échelle plus importante crée une hiérarchie visuelle. Une police de 200 g/m² (très légère) est réservée au corps du texte de 18 px; il s'agit d'un choix spécifique à la marque: la plupart des sites d'IA/SaaS utilisent une police de 400 g/m² pour le corps du texte, mais Dala réduit cette graisse pour conserver des paragraphes aérés et agréables à lire. Une police de 600 g/m² avec un interlignage de 14 px et 0,025 em, et en majuscules, est utilisée pour la navigation et les petits titres. L'utilisation de la police de 400 g/m² à la fois pour les titres de 113 px et le corps du texte de 15 px est inhabituelle; cela suggère que la marque privilégie l'échelle à la graisse pour créer une hiérarchie visuelle.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 6-18px |
| Rayon du bouton | 24px |
| Rayon de la carte | 24px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 60-120px |
| Largeur de la page | 1280px |
L'IA construira votre site web dans le style Dala 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
- Linear — instrument de précision de minuit
- Resend — velours noir avec une couleur néon violette
- 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.
- 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.