Column
un registre bleu foncé sous l'aube fraîche
Column utilise un bleu marine profond et institutionnel sur un fond presque blanc: la page donne d’abord l’impression d’être une interface robuste pour un produit bancaire, puis un espace de développement. La couleur de la marque n’est pas unique, mais composée de deux teintes coordonnées: le bleu marine #111a4a pour la structure formelle et le vert menthe #44b48b pour les données et le code. Une touche d’orange chaud (#ec652b) est réservée aux éléments à forte intensité, comme la carte Brex. La typographie est dominée par SuisseIntl, une police sans serif géométrique utilisée sur toute la gamme de graisses, de 300 (liens) à 600 (affichage), conférant au système un style éditorial raffiné, rare chez les fintechs. Les cartes flottent sur de grandes surfaces blanches, subtilement ombrées. La plupart des éléments d’interface sont plats, la profondeur n’apparaissant que là où la carte doit évoquer un objet physique (widgets de transaction, maquettes de produits). Le code et les données financières sont présentés en monochrome, couleur écume de mer, signal visuel qu’il s’agit d’une banque conçue par des ingénieurs pour des ingénieurs.
La page occupe toute la largeur, est centrée et présente de larges marges latérales (64 à 15 cm sur ordinateur). L'écran principal est divisé en deux parties: le titre et les appels à l'action sont alignés à gauche à 25 cm, tandis qu'un widget de transaction flottant est positionné à droite à 55 cm sur un fond de carte en demi-teintes. Sous l'écran principal, des sections alternent entre blanc (4 cm) et toile claire (5 cm), avec des gouttières verticales de 6 cm. Le contenu est organisé selon une grille unique à 6 colonnes: les blocs de texte occupent 4 colonnes (7 cm), les fiches images/produits occupent 5 à 6 colonnes, avec un décalage volontaire par rapport à la grille. Les sections décrivant les fonctionnalités utilisent une mise en page à 2 colonnes: texte à gauche, produit à droite. La section des statistiques de confiance est divisée en une grille à 4 colonnes sur toute la largeur de la page. Les logos des clients sont placés sur une seule ligne centrée avec des gouttières de 48 px. Le pied de page présente une mise en page compacte à deux colonnes. La navigation se présente sous la forme d'une barre supérieure fixe et transparente de 62 pixels de haut, superposée à l'écran principal. Son fond flou s'estompe en blanc au défilement. Il n'y a ni barre latérale ni méga-menu; les menus déroulants sont de simples menus fléchés.
Le style visuel est minimaliste et fonctionnel: Column évite totalement les photos d'illustration. Le langage visuel repose sur trois éléments: (1) des illustrations de données SVG, notamment une carte du monde en demi-teintes pointillées, rendue avec un dégradé indigo-orange-turquoise, créant une impression d'échelle mondiale en arrière-plan de l'élément principal; (2) la mise en page des fiches produits: des widgets flottants affichant les soldes de compte, les détails des transferts et des extraits de code JSON sur des cartes blanches aux ombres marquées; (3) des visualisations graphiques: des graphiques en chandeliers ou à barres turquoise avec de fines lignes de connexion, utilisés dans la section « Confiance/Statistiques». La carte en demi-teintes est un élément visuel emblématique: son dégradé passe de l'orange (#d65620) au violet, au bleu, à l'azur, au turquoise et au jaune, créant un spectre qui unifie toute la palette de la marque sur une seule surface décorative. Les icônes ont une épaisseur de contour uniforme de 1,5 à 2 px dans les variantes #232730 ou #a9acb6, avec un remplissage pour les états actifs. Pas de photos de style de vie, pas de rendus 3D abstraits: cette sobriété est intentionnelle afin de concentrer l’attention sur le produit et les données.
Palette
Marque
- Indigo Navy
#111a4a— La couleur principale de la marque est utilisée pour les appels à l'action, les éléments de navigation actifs, l'en-tête et le logo. Ce bleu-violet profond confère au site une teinte noire à la fois riche et profonde; associé à un texte blanc, il crée le bouton le plus percutant du site. - Seafoam 600
#44b48b— La couleur du code et des données est la couleur de marque utilisée pour les clés JSON, les identifiants et les valeurs financières dans les extraits de code. Elle est également utilisée pour les points de données dans les graphiques et les visualisations de croissance. - Seafoam 700
#167e6c— Une teinte vert d'eau plus foncée pour le contour, les lignes du graphique et les icônes dans le contexte des données. Cela permet de bien ancrer l'échelle vert d'eau sur le fond plus sombre. - Seafoam 400
#94efb7— L'extrait de code mis en évidence contient des chaînes de caractères, des URL et des points de terminaison d'API au sein de blocs de code. La couleur vert d'eau la plus claire correspond à une police à chasse fixe avec une teinte verdâtre. - Deep Sea
#023247— Le contour décoratif et la couleur d'accentuation du graphique sont d'un turquoise riche, utilisé dans les illustrations SVG et les visualisations de données, ainsi que dans l'échelle de couleurs écume de mer.
Neutre
- Midnight Ink
#011821— Surface sombre et texte en surbrillance: fond de la fiche produit, texte principal à contraste élevé. Teinte bleu-vert froide tirant sur le gris; sert de base au mode sombre lorsqu’une section doit être inversée. - Slate Ink
#3b3e47— Le titre secondaire et le texte principal sont d'une teinte légèrement plus chaude que Midnight Ink, utilisée là où le noir pur semblerait trop dur sur la toile claire. - Steel
#7c7f88— Le texte principal et les liens sont dominés par une couleur discrète (utilisée 245 fois dans le texte principal). Il s'agit d'un gris-bleu neutre, perçu comme apaisant, et jamais délavé. - Fog
#a9acb6— Contours des icônes, bordures secondaires et texte d'espace réservé. Une couleur gris moyen qui sépare le texte sans le concurrencer. - Mist
#cbcccf— Le texte principal (signatures, mentions légales et petits caractères) est lisible sur fond blanc, mais visuellement moins visible. - Silver Lining
#e3e4e8— Bordures de cartes, bordures de champs de saisie, lignes de séparation. Cette couleur structurelle et discrète est utilisée pour séparer deux surfaces sans ombres.
Typographie
de 10 à 60 px · 10 étapes
- SuisseIntl — remplacement: Inter · grandes lignes 300, 400, 500, 600 · Police principale – utilisée pour tous les titres, le corps du texte, les boutons, la navigation, les liens et le texte des cartes. Son style sans serif géométrique unique confère à Column un style éditorial distinctif, la démarquant des autres entreprises fintech qui utilisent exclusivement Inter-only. La graisse est de 600 pour les titres (52–60 px), 500 pour les sous-titres, 400 pour le corps du texte et 300 pour les liens discrets.
- SuisseIntlMono — remplacement: JetBrains Mono · grandes lignes 400 · Police à chasse fixe similaire à SuisseIntl, utilisée pour les libellés techniques, les identifiants d'API et les données intégrées aux éléments d'interface utilisateur. Elle conserve les mêmes proportions que SuisseIntl, assurant ainsi un alignement correct des textes à chasse fixe et proportionnelle dans des contextes mixtes.
- SFMono — remplacement: Fira Code · grandes lignes 400 · Affichage d'extraits de code – affichés dans les exemples JSON et les blocs de documentation de l'API. Une teinte vert d'eau est utilisée pour distinguer visuellement le code du texte de l'interface utilisateur.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 8px |
| Rayon du bouton | 8px |
| Rayon de la carte | 8px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 72px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Column 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
- dope.security — Terminal de minuit avec balises violettes
- Leonardo — Une galerie éditoriale inversée. Un musée aux murs noirs où des titres violets font office d'installations murales, et où des portraits générés par IA sont accrochés en une grille dense en dessous.
- VEED — Mur de galerie blanc avec boutons lumineux vert néon
- Craft Docs — Un collage numérique pour le scrapbooking. Son design évoque un album de scrapbooking réfléchi et tactile, où des notes numériques structurées se mêlent à des textures douces et organiques.
- Letter — Une galerie privée présentant des objets précieux conservés en réserve. Un espace d'exposition aux murs noirs où des titres à empattement flottent au-dessus de sculptures chromées sur les murs teintés de la galerie.
- Railway — Le Cosmic Midnight Express. Un voyage paisible et palpitant à travers l'espace obscur et étoilé, guidé par des signaux clairs.
- Garden Eight — Un éditorial monumental sur papier couleur crème. Le titre en caractères serif de 215 px se détache seul sur un parchemin aux tons chauds, entouré de formes sculpturales flottantes et d'espaces négatifs évoquant l'air marin; la page ressemble davantage à la couverture d'une monographie d'art qu'à un tableau de bord.
- Steep — Analyse des polices à empattements sur papier chaud
- ElevenLabs — Un reportage photo aux tons crème chauds, avec des titres discrets. Un carnet de style Bauhaus: papier couleur coquille d’œuf, encre noire et une touche de violet et d’orange pour la présentation du produit.
- Awesomic — Grille éditoriale en zinc avec des signes de ponctuation orange évoquant des confettis
- Monad — revue technique éditoriale sur parchemin chaud
- AI for Business — Showroom éditorial brutaliste aux tons gris chauds