Column
ciemnoniebieska księga pod chłodnym świtem
Column wykorzystuje głęboki, instytucjonalny granat na niemal białym tle: strona sprawia wrażenie przede wszystkim solidnej powierzchni produktu bankowego, a dopiero potem placu zabaw dla deweloperów. Kolor marki nie jest pojedynczy, ale stanowi skoordynowaną parę – granatowy #111a4a dla poważnej struktury, miętowy zielony #44b48b dla danych i kodu – z pojedynczym ciepłym pomarańczowym (#ec652b) zarezerwowanym dla powierzchni akcentujących o wysokiej intensywności, takich jak karta Brex. W typografii dominuje SuisseIntl, geometryczna czcionka bezszeryfowa używana w całym zakresie grubości od 300 (linki) do 600 (wyświetlanie), nadając systemowi wyrafinowany, redakcyjny styl, którego brakuje większości firm fintech. Karty unoszą się na dużych, białych powierzchniach z subtelnymi, warstwowymi cieniami; większość elementów interfejsu jest płaska, a głębia pojawia się tylko tam, gdzie karta powinna sprawiać wrażenie fizycznego obiektu (widżety transakcyjne, makiety produktów). Kod i dane finansowe przedstawiono w monochromatycznym, morskim kolorze – jest to wizualny sygnał, że jest to bank zbudowany przez inżynierów dla inżynierów.
Struktura strony jest pełnej szerokości, wyśrodkowana z szerokimi marginesami bocznymi (64–15 cm na pulpicie). Ekran główny ma układ podzielony: nagłówek i wezwania do działania są wyrównane do lewej strony na 25 cm, a pływający widżet transakcji jest umieszczony po prawej stronie na 55 cm na tle mapy półtonowej. Poniżej ekranu głównego sekcje naprzemiennie są białe (4 cm) i jasne (5 cm) z pionowymi odstępami 6 cm. Treść jest ułożona zgodnie z pojedynczą siatką 6-kolumnową: bloki tekstu zajmują 4 kolumny (7 cm), karty obrazów/produktów zajmują 5–6 kolumn, z celowym przesunięciem od siatki. Sekcje opisujące funkcje używają układu 2-kolumnowego: tekst po lewej stronie, produkt po prawej. Sekcja statystyk zaufania jest podzielona na 4-kolumnową siatkę na całej szerokości strony. Loga klientów znajdują się w jednym wyśrodkowanym wierszu z odstępami 48 px. Stopka ma kompaktowy układ 2-kolumnowy. Nawigacja to stały, przezroczysty pasek o wysokości 62 pikseli nad ekranem głównym, z rozmytym tłem, które stopniowo zmienia kolor na biały podczas przewijania. Nie ma paska bocznego ani megamenu – menu rozwijane to proste menu w stylu strzałek.
Styl wizualny jest minimalistyczny i funkcjonalny — Column całkowicie unika fotografii stockowych. Język wizualny opiera się na trzech źródłach: (1) ilustracjach danych SVG, a konkretnie na mapie świata w kropkowanym półtonie, renderowanej z gradientem od indygo przez pomarańczowy do turkusowego, tworzącej atmosferę globalnej skali za głównym elementem; (2) układach kart produktów — pływających widżetach wyświetlających salda kont, szczegóły przelewów i fragmenty kodu JSON na białych kartach z efektownymi cieniami; (3) wizualizacjach wykresów — turkusowych wykresach świecowych lub słupkowych z cienkimi liniami łączącymi, używanych w sekcji zaufania/statystyk. Mapa półtonów jest charakterystycznym elementem wizualnym — jej gradienty przechodzą od #d65620 (pomarańczowy) przez fioletowy, niebieski, lazurowy, turkusowy i żółty, tworząc spektrum, które łączy całą paletę barw marki na jednej dekoracyjnej powierzchni. Ikony mają jednolitą grubość konturu 1,5–2 px w wariantach #232730 lub #a9acb6, z wypełnieniem dla stanów aktywnych. Żadnych zdjęć lifestylowych, żadnych abstrakcyjnych wizualizacji 3D — ta powściągliwość jest celowa, aby skupić uwagę na produkcie i danych.
Paleta
Marka
- Indigo Navy
#111a4a— Główny kolor marki jest używany w pełnych wezwaniach do działania, aktywnych elementach nawigacji, nagłówku i logo. Głęboki fioletowo-niebieski kolor nadaje witrynie jednolity, a zarazem intensywny odcień czerni; w połączeniu z białym tekstem tworzy najbardziej wyrazisty przycisk na stronie. - Seafoam 600
#44b48b— Kolor kodu i danych to kolor marki dla kluczy JSON, identyfikatorów i wartości finansowych we fragmentach kodu. Jest on również używany do oznaczania punktów danych na wykresach i wizualizacjach wzrostu. - Seafoam 700
#167e6c— Ciemniejszy odcień piany morskiej dla konturu, linii wykresu i akcentów ikon w kontekście danych. Dzięki temu skala piany morskiej jest osadzona na ciemniejszym tle. - Seafoam 400
#94efb7— Podświetlony fragment kodu zawiera wartości ciągów znaków, adresy URL i punkty końcowe API w blokach kodu. Najjaśniejszy kolor „morskiej piany” to czcionka o stałej szerokości i zielonkawym odcieniu. - Deep Sea
#023247— Dekoracyjny kontur i kolor akcentujący wykresu to intensywny turkus, stosowany w ilustracjach SVG i wizualizacjach danych, wraz ze skalą kolorów morskiej piany.
Neutralny
- Midnight Ink
#011821— Ciemna powierzchnia i wyróżniony tekst – tło karty produktu, tekst główny o wysokim kontraście. Bliżej szarości z chłodnym niebiesko-zielonym odcieniem; używany jako baza dla trybu ciemnego, gdy sekcja wymaga odwrócenia. - Slate Ink
#3b3e47— Tytuł drugorzędny i tekst główny są nieco cieplejsze niż w przypadku Midnight Ink, zastosowane tam, gdzie czysta czerń wydawałaby się zbyt ostra na jasnym płótnie. - Steel
#7c7f88— W tekście głównym i linku dominuje stonowany kolor (użyty 245 razy w tekście głównym). To neutralny, szaro-niebieski kolor, który jest odbierany jako spokojny, a nie wyblakły. - Fog
#a9acb6— Kontury ikon, obramowania trzeciorzędne i tekst zastępczy. Średnio szary kolor, który oddziela tekst, ale z nim nie konkuruje. - Mist
#cbcccf— Główny tekst — podpisy, zastrzeżenia i drobny druk — jest czytelny na białym tle, ale mniej widoczny. - Silver Lining
#e3e4e8— Obramowania kart, obramowania pól wprowadzania danych, linie podziału. Ten strukturalny, subtelny kolor jest używany tam, gdzie dwie powierzchnie muszą być oddzielone bez cieni.
Typografia
od 10 do 60px · 10 kroków
- SuisseIntl — wymiana: Inter · wytyczne 300, 400, 500, 600 · Czcionka podstawowa – używana we wszystkich nagłówkach, tekście głównym, przyciskach, nawigacji, linkach i tekście kart. Unikalna, geometryczna czcionka bezszeryfowa nadaje Column charakterystyczny styl redakcyjny, wyróżniając go na tle innych firm fintech współpracujących wyłącznie z Inter-only. Grubość wynosi 600 pikseli przy szerokości 52–60 pikseli dla nagłówków, 500 pikseli dla podtytułów, 400 pikseli dla tekstu głównego i 300 pikseli dla linków o niskim poziomie nacisku.
- SuisseIntlMono — wymiana: JetBrains Mono · wytyczne 400 · Czcionka o stałej szerokości, podobna do SuisseIntl, używana do etykiet technicznych, identyfikatorów API i danych osadzonych w elementach interfejsu użytkownika. Zachowuje te same proporcje co SuisseIntl, dzięki czemu tekst o stałej szerokości i proporcjonalny jest poprawnie wyrównywany w kontekstach mieszanych.
- SFMono — wymiana: Fira Code · wytyczne 400 · Wyświetlanie fragmentów kodu – wyświetlane w przykładach JSON i blokach dokumentacji API. Odcień piany morskiej służy do wizualnego odróżnienia kodu od tekstu interfejsu użytkownika.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 8px |
| Promień przycisku | 8px |
| Promień karty | 8px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 72px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Column i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- dope.security — Terminal północny z fioletowymi sygnalizatorami
- Leonardo — Odwrócona galeria redakcyjna. Muzeum o czarnych ścianach, gdzie fioletowe nagłówki pełnią funkcję instalacji ściennych, a portrety generowane przez sztuczną inteligencję wiszą w gęstej siatce poniżej.
- VEED — Biała ściana galerii z neonowozielonymi przyciskami świetlnymi
- Craft Docs — Cyfrowy kolaż do scrapbookingu. Projekt przypomina przemyślany, namacalny album, w którym uporządkowane cyfrowe notatki łączą się z miękkimi, organicznymi fakturami.
- Letter — Prywatna galeria z lśniącymi artefaktami z magazynów. Przestrzeń wystawowa o czarnych ścianach, gdzie szeryfowe nagłówki unoszą się nad chromowanymi rzeźbami na przyciemnianych ścianach galerii.
- Railway — Kosmiczny Ekspres Północy. Spokojna, ekscytująca podróż przez ciemną, rozgwieżdżoną przestrzeń, prowadzona wyraźnymi sygnałami.
- Garden Eight — Monumentalny artykuł redakcyjny na kremowym papierze. Nagłówek o szerokości 215 pikseli, z szeryfami w środku, widnieje samotnie na ciepłym pergaminie, otoczony unoszącymi się w powietrzu rzeźbiarskimi formami i pustą przestrzenią przywodzącą na myśl morskie powietrze – strona bardziej przypomina okładkę monografii artystycznej niż deskę rozdzielczą.
- Steep — Analiza czcionek szeryfowych na papierze ciepłym
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- AI for Business — Brutalny showroom redakcyjny w ciepłych odcieniach szarości