Column
un llibre de comptes blau fosc sota la fresca alba
Column utilitza un blau marí institucional profund sobre un fons gairebé blanc: la pàgina sembla primer una superfície robusta de producte bancari i després un parc infantil per a desenvolupadors. El color de la marca no és un sol color, sinó un parell coordinat: blau marí #111a4a per a una estructura seriosa, verd menta #44b48b per a dades i codi, amb un únic taronja càlid (#ec652b) reservat per a superfícies d'accent d'alta intensitat com la targeta Brex. La tipografia està dominada per SuisseIntl, una sans serif geomètrica utilitzada en tot el rang de pes, de 300 (enllaços) a 600 (pantalla), cosa que dóna al sistema un estil editorial refinat que la majoria d'empreses fintech no tenen. Les targetes suren sobre grans superfícies blanques amb ombres subtils i en capes; la majoria dels elements de la interfície són plans, i la profunditat només apareix on la targeta hauria de semblar un objecte físic (widgets de transacció, maquetes de productes). El codi i les dades financeres es presenten en monocrom, de color escuma de mar, un senyal visual que aquest és un banc construït per enginyers per a enginyers.
L'estructura de la pàgina és d'amplada completa, centrada amb marges laterals amples (64–15 cm a l'escriptori). La pantalla principal té un disseny dividit: el títol i les crides a l'acció estan alineats a l'esquerra a 25 cm, mentre que un widget de transacció flotant es troba a la dreta a 55 cm sobre un fons de mapa de semitons. Sota la pantalla principal, les seccions alternen entre llenç blanc (4 cm) i llenç clar (5 cm) amb marges verticals de 6 cm. El contingut s'organitza segons una única quadrícula de 6 columnes: els blocs de text ocupen 4 columnes (7 cm), les targetes d'imatge/producte ocupen de 5 a 6 columnes, amb un desplaçament deliberat respecte a la quadrícula. Les seccions que descriuen les característiques utilitzen un disseny de 2 columnes: text a l'esquerra, producte a la dreta. La secció d'estadístiques de confiança està dividida en una quadrícula de 4 columnes que recorre tota l'amplada de la pàgina. Els logotips dels clients es troben en una única fila centrada amb marges de 48 px. El peu de pàgina té un disseny compacte de dues columnes. La navegació és una barra superior fixa, transparent i de 62 px d'alçada sobre la pantalla principal amb un fons borrós que es torna blanc a mesura que us desplaceu. No hi ha cap barra lateral ni megamenú: els menús desplegables són menús simples amb forma de fletxa.
L'estil visual és minimalista i funcional: Column evita completament la fotografia de stock. El llenguatge visual es basa en tres fonts: (1) il·lustracions de dades SVG, concretament un mapa del món de semitons punts, renderitzat amb un degradat d'indi a taronja i turquesa, creant una atmosfera d'escala global darrere de l'element principal; (2) dissenys de targetes de producte: widgets flotants que mostren saldos de comptes, detalls de transferències i fragments de codi JSON en targetes blanques amb ombres dramàtiques; (3) visualitzacions de gràfics: gràfics de canelobres o barres turqueses amb línies de connexió primes utilitzades a la secció de confiança/estadístiques. El mapa de semitons és un element visual característic: el seu degradat fa transicions de #d65620 (taronja) a través del violeta, blau, atzur, turquesa i groc, creant un espectre que uneix tota la paleta de la marca en una sola superfície decorativa. Les icones tenen un gruix de contorn uniforme d'1,5 a 2 px a les variants #232730 o #a9acb6, amb un farciment per als estats actius. Sense fotos d'estil de vida, sense renders 3D abstractes: la restricció és intencionada per centrar l'atenció en el producte i les dades.
Paleta
Marca
- Indigo Navy
#111a4a— El color principal de la marca s'utilitza per a les crides a l'acció plenes, els estats de navegació actius, la capçalera i el logotip. El color blau violeta intens dóna al lloc web un to negre sòlid però intens; combinat amb text blanc, crea el botó més assertiu del lloc web. - Seafoam 600
#44b48b— El color del codi i les dades és el color de marca per a les claus JSON, els identificadors i els valors financers en fragments de codi. També s'utilitza per a punts de dades en gràfics i visualitzacions de creixement. - Seafoam 700
#167e6c— Un to més fosc d'escuma de mar per al contorn, les línies del gràfic i els accents de les icones dins del context de les dades. Això ancora l'escala d'escuma de mar contra el fons més fosc. - Seafoam 400
#94efb7— El fragment de codi ressaltat conté valors de cadena, URL i punts finals de l'API dins de blocs de codi. El color escuma de mar més clar es llegeix com una font monoespaiada amb un to verdós. - Deep Sea
#023247— El contorn decoratiu i el color d'accent del gràfic és un color turquesa intens que s'utilitza en il·lustracions SVG i visualitzacions de dades, juntament amb l'escala de colors escuma de mar.
Neutral
- Midnight Ink
#011821— Superfície fosca i text ressaltat: fons de la targeta del producte, text principal d'alt contrast. Més proper al gris amb un to blau verdós fred; s'utilitza com a base per al mode fosc quan cal invertir una secció. - Slate Ink
#3b3e47— El títol secundari i el text principal són una mica més càlids que els de Midnight Ink, utilitzats on el negre pur semblaria massa dur sobre el llenç clar. - Steel
#7c7f88— El text principal i el text de l'enllaç estan dominats per un color apagat (utilitzat 245 vegades al text principal). Un color blau grisenc neutre que es percep com a tranquil, mai com una imatge descolorida. - Fog
#a9acb6— Contorns d'icones, vores terciaries i text de marcador de posició. Un color gris mitjà que separa el text sense competir-hi. - Mist
#cbcccf— El text principal (signatures, exempcions de responsabilitat i lletra petita) és llegible sobre un fons blanc, però visualment menys perceptible. - Silver Lining
#e3e4e8— Vores de cartes, vores de camps d'entrada, línies divisòries. Aquest color estructural i subtil s'utilitza quan cal separar dues superfícies sense ombres.
Tipografia
de 10 a 60 px · 10 passos
- SuisseIntl — reemplaçament: Inter · esquemes 300, 400, 500, 600 · Font principal: s'utilitza per a tots els encapçalaments, el text del cos, els botons, la navegació, els enllaços i el text de la targeta. La singular font geomètrica sans serif dóna a Column un estil editorial distintiu, cosa que la diferencia d'altres empreses fintech que treballen exclusivament amb Inter-only. El pes és de 600 a 52–60 px per als encapçalaments, 500 per als subencapçalaments, 400 per al text del cos i 300 per als enllaços de baixa èmfasi.
- SuisseIntlMono — reemplaçament: JetBrains Mono · esquemes 400 · Una font monoespaiada similar a SuisseIntl, utilitzada per a etiquetes tècniques, identificadors d'API i dades incrustades en elements d'IU. Manté les mateixes proporcions que SuisseIntl, de manera que el text monoespaiat i proporcional s'alineen correctament en contextos mixtos.
- SFMono — reemplaçament: Fira Code · esquemes 400 · Visualització de fragments de codi: es mostra en exemples JSON i blocs de documentació de l'API. S'utilitza una ombra escuma de mar per distingir visualment el codi del text de la interfície d'usuari.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 8px |
| Radi del botó | 8px |
| Radi de la targeta | 8px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 72px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Column i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- dope.security — Terminal de mitjanit amb balises morades
- Leonardo — Una galeria editorial invertida. Un museu amb parets negres on els titulars morats actuen com a instal·lacions murals i els retrats generats per IA pengen en una densa quadrícula a sota.
- VEED — Galeria de paret blanca amb botons de llum verda neó
- Craft Docs — Un collage digital per a scrapbooking. El disseny s'assembla a un àlbum de scrapbooking reflexiu i tàctil, on les notes digitals estructurades es combinen amb textures suaus i orgàniques.
- Letter — Una galeria privada amb artefactes brillants de magatzems. Un espai d'exposició amb parets negres on els titulars amb serigrafia suren sobre escultures cromades a les parets tintades de la galeria.
- Railway — L'Exprés Còsmic de la Mitjanit. Un viatge tranquil i emocionant a través d'un espai fosc i estrellat, guiat per senyals clars.
- Garden Eight — Un editorial monumental sobre paper de color crema. El titular amb serif de 215 px reposa sol sobre un pergamí càlid, envoltat de formes escultòriques flotants i un espai negatiu que recorda l'aire marí; la pàgina sembla més la portada d'una monografia d'art que un quadre de comandament.
- Steep — Anàlisi de fonts serif sobre paper càlid
- ElevenLabs — Un assaig fotogràfic en tons crema càlids amb titulars subtils. Un quadern d'estil Bauhaus: paper color closca d'ou, tinta negra i un únic detall morat i taronja per a la presentació del producte.
- Awesomic — Malla de zinc editorial amb signes de puntuació taronges que recorden confeti
- Monad — revista tècnica editorial en pergamí calent
- AI for Business — Sala d'exposició editorial brutalista en tons grisos càlids