Column
салкын таң астындагы куе зәңгәрсу дәфтәр
Колонка ак төскә якын фонда тирән, институциональ зәңгәрсу төс куллана: бит башта ныклы банк продукты өслеге, икенчедән, эшкәртүче уен мәйданчыгы кебек тоела. Бренд төсе бер генә түгел, ә координацияләнгән пар - зәңгәрсу #111a4a җитди структура өчен, яшел #44b48b мәгълүматлар һәм код өчен - Brex картасы кебек югары интенсивлыклы акцент өслекләре өчен сакланган бер җылы кызгылт сары төс (#ec652b). Типографиядә SuisseIntl өстенлек итә, ул 300 дән (сылтамалар) 600 гә кадәр (дисплей) авырлык диапазонында кулланыла торган геометрик sans serif, бу системага күпчелек финтех компанияләрендә булмаган нәфис, редакция стиле бирә. Карталар зур ак өслекләрдә нечкә, катламлы күләгәләр белән йөзә; интерфейс элементларының күбесе яссы, тирәнлек карта физик объект кебек тоелырга тиешле урыннарда гына күренә (транзакция виджетлары, продукт макетлары). Код һәм финанс мәгълүматлары монохром, диңгез күбеге төсендә тәкъдим ителә - бу инженерлар тарафыннан инженерлар өчен төзелгән банк булуын күрсәтүче визуаль сигнал.
Бит структурасы тулы киңлектә, үзәктә киң кырлар белән урнаштырылган (эш өстәлендә 64–15 см). Төп экран бүленгән макеттан тора: башлык һәм чакырулар сул якка 25 см ераклыкта урнаштырылган, ә йөзүче транзакция виджеты уң якта ярты төсле карта фонында 55 см ераклыкта урнаштырылган. Төп экран астында, бүлекләр ак (4 см) һәм ачык холст (5 см) арасында чиратлашып, 6 см вертикаль науалары белән бирелә. Эчтәлек бер 6 баганалы челтәрчә урнаштырылган: текст блоклары 4 багананы (7 см) били, рәсем/продукт карталары 5–6 багананы били, челтәрдән махсус тайпылыш белән. Функцияләрне тасвирлаучы бүлекләр 2 баганалы схеманы куллана: текст сул якта, продукт уң якта. Ышаныч статистикасы бүлеге битнең тулы киңлеге буенча 4 баганалы челтәрчәгә бүленгән. Клиент логотиплары 48 пиксель науалары белән бер үзәктә урнашкан. Аскы колонтитул ике баганалы компакт схемага ия. Навигация - төп экран өстендәге 62 пиксель биеклектәге, үтә күренмәле өске панель, сез скроллинг ясаганда акка әйләнә торган тонык фон. Ян панель яки мега-меню юк - ачылучы менюлар гади ук стилендәге менюлар.
Визуаль стиль минималист һәм функциональ - Column сток фотографиясеннән тулысынча кача. Визуаль тел өч чыганакка нигезләнгән: (1) SVG мәгълүмат иллюстрацияләре, аерым алганда, нокталы ярты төсле дөнья картасы, индигодан кызгылт сарыга һәм зәңгәрсуга градиент белән күрсәтелгән, төп элемент артында глобаль масштаб атмосферасы тудыра; (2) продукт картасы макетлары - счет балансларын, күчерү мәгълүматларын һәм JSON код фрагментларын ак карточкаларда драматик күләгәләр белән күрсәтүче йөзүче виджетлар; (3) диаграмма визуализацияләре - ышаныч/статистика бүлегендә кулланыла торган нечкә тоташтыручы сызыклары булган зәңгәрсу шәм яки баганалы диаграммалар. Ярым төсле карта - үзенчәлекле визуаль элемент - аның градиенты #d65620 (кызгылт сары) төсеннән шәмәхә, зәңгәр, зәңгәрсу, зәңгәрсу һәм сарыга күчә, брендның бөтен палитрасын бер декоратив өслектә берләштерә торган спектр булдыра. Иконкаларның #232730 яки #a9acb6 вариантларында 1,5–2 пиксель калынлыгында бердәм контур калынлыгы бар, актив халәтләр өчен тутыру белән. Тормыш рәвеше фотолары, абстракт 3D рендерлар юк — чикләү продуктка һәм мәгълүматларга игътибарны җәлеп итү өчен махсус эшләнгән.
Палитра
Бренд
- Indigo Navy
#111a4a— Төп бренд төсе тулы чакырулар, актив навигация халәтләре, башлык һәм логотип өчен кулланыла. Тирән шәмәхә-зәңгәр төс сайтка ныклы, ләкин бай кара төс бирә; ак текст белән бергә, ул сайттагы иң ышанычлы төймәне булдыра. - Seafoam 600
#44b48b— Код һәм мәгълүмат төсе - код фрагментларындагы JSON ачкычлары, идентификаторлары һәм финанс кыйммәтләре өчен бренд төсе. Ул шулай ук диаграммаларда һәм үсеш визуализацияләрендә мәгълүмат нокталары өчен кулланыла. - Seafoam 700
#167e6c— Контур, диаграмма сызыклары һәм мәгълүмат контекстындагы иконалар өчен диңгез күбегенең караңгырак төсе. Бу диңгез күбеге масштабын караңгырак фонга беркетә. - Seafoam 400
#94efb7— Аерылган код фрагменты код блоклары эчендәге юл кыйммәтләрен, URL адресларын һәм API оч нокталарын үз эченә ала. Иң ачык диңгез күбеге төсе яшел төстәге бер аралыклы шрифт буларак укыла. - Deep Sea
#023247— Диаграмманың декоратив контуры һәм акцент төсе - SVG иллюстрацияләрендә һәм мәгълүмат визуализацияләрендә кулланыла торган бай зәңгәрсу төс, шулай ук диңгез күбеге төс шкаласы.
Нейтраль
- Midnight Ink
#011821— Караңгы өслек һәм яктыртылган текст – продукт картасы фоны, югары контрастлы төп текст. Соры төскә якынрак, салкын зәңгәр-яшел төсмер белән; өлешне кирегә күчерергә кирәк булганда караңгы режим өчен нигез буларак кулланыла. - Slate Ink
#3b3e47— Икенчел исем һәм төп текст Midnight Inkка караганда бераз җылырак, ул ачык холстта саф кара төс артык каты күренгән урыннарда кулланыла. - Steel
#7c7f88— Төп текст һәм сылтама текстында тонык төс өстенлек итә (төп текстта 245 тапкыр кулланылган). Тыныч дип кабул ителгән нейтраль соры-зәңгәр төс, беркайчан да юылган рәсем түгел. - Fog
#a9acb6— Иконка контурлары, өченчел чикләр һәм тутыргыч текст. Текст белән көндәшлек итмичә аерып торган уртача соры төс. - Mist
#cbcccf— Төп текст — имзалар, кисәтүләр һәм вак шрифтлар — ак фонда укып була, ләкин визуаль яктан азрак сизелә. - Silver Lining
#e3e4e8— Карта чикләре, кертү кыры чикләре, бүлү сызыклары. Бу структураль, нечкә төс ике өслекне күләгәләрсез аерырга кирәк булганда кулланыла.
Типография
10нан 60 пиксельгә кадәр · 10 адым
- SuisseIntl — алыштыру: Inter · контурлар 300, 400, 500, 600 · Төп шрифт – барлык башлыклар, төп текст, төймәләр, навигация, сылтамалар һәм карточка тексты өчен кулланыла. Уникаль геометрик sans serif шрифты Column-га үзенчәлекле редакция стиле бирә, аны башка финтех компанияләреннән аерым аерып тора. Башлыклар өчен 52–60 пиксель булганда авырлыгы 600, аскы башлыклар өчен 500, төп текст өчен 400 һәм аз басымлы сылтамалар өчен 300 пиксель.
- SuisseIntlMono — алыштыру: JetBrains Mono · контурлар 400 · SuisseIntl шрифтына охшаш бер аралыклы шрифт, ул техник ярлыклар, API идентификаторлары һәм UI элементларына кертелгән мәгълүматлар өчен кулланыла. Ул SuisseIntl белән бер үк пропорцияләрне саклый, шуңа күрә бер аралыклы һәм пропорциональ текст катнаш контекстларда дөрес тигезләнә.
- SFMono — алыштыру: Fira Code · контурлар 400 · Код фрагментын күрсәтү – JSON мисалларында һәм API документлары блокларында күрсәтелә. Диңгез күбеге төсе кодны UI текстыннан визуаль аеру өчен кулланыла.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | уртача |
| Төп адым | 8px |
| Төймә радиусы | 8px |
| Карта радиусы | 8px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 72px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Column стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- dope.security — Шәмәхә төстәге маяклар белән төнге терминал
- Leonardo — Төп редакция галереясе. Кара диварлы музей, анда шәмәхә төстәге баш язмалар стена инсталляцияләре булып хезмәт итә, ә аста ясалма интеллект тарафыннан тудырылган портретлар тыгыз рәшәткәдә эленеп тора.
- VEED — Неон яшел ут төймәләре белән ак галерея стенасы
- Craft Docs — Скрапбукинг өчен цифрлы коллаж. Дизайн уйланылган, тактиль скрапбукка охшаган, анда структуралаштырылган цифрлы ноталар йомшак, органик текстуралар белән берләштерелгән.
- Letter — Саклау урыныннан ялтыравыклы артефактлар куелган шәхси галерея. Галереянең төсле стеналарында хром сыннар өстендә серифлар язылган башлыклар йөзеп торган кара диварлы күргәзмә мәйданы.
- Railway — Космик төнге экспресс. Ачык сигналлар белән идарә ителгән караңгы, йолдызлы киңлек аша тыныч, дулкынландыргыч сәяхәт.
- Garden Eight — Каймак төсле кәгазьдәге монументаль мәкалә. 215 пиксельле сериф башлык җылы пергаментта ялгыз тора, аның тирәсендә йөзүче скульптура формалары һәм диңгез һавасын хәтерләткән негатив киңлек бар - бит панельдән күбрәк сәнгать монографиясенең тышлыгы кебек тоела.
- Steep — Җылы кәгазьдәге Serif шрифтларын анализлау
- ElevenLabs — Җылы каймак төсендәге фотоэссе, нечкә башлыклар белән. Баухаус стилендәге дәфтәр — йомырка кабыгы төсендәге кәгазь, кара буяу һәм продуктны күрсәтү өчен бер шәмәхә һәм кызгылт сары төстәге бизәк.
- Awesomic — Конфеттины хәтерләткән кызгылт сары тыныш билгеләре белән редакция цинк челтәре
- Monad — җылы пергаменттагы редакция техник журналы
- AI for Business — Җылы соры төсләрдәге бруталист редакциясенең күргәзмә залы