Column

서늘한 새벽 아래 짙은 파란색 장부

Column은 거의 흰색에 가까운 배경에 깊고 권위 있는 남색을 사용하여, 견고한 금융 상품 인터페이스를 우선시하고 개발자 작업 공간으로서의 면모를 부각합니다. 브랜드 색상은 단일 색상이 아니라, 견고한 구조를 위한 남색(#111a4a)과 데이터 및 코드를 위한 민트 그린(#44b48b)의 조화로운 조합이며, Brex 카드와 같이 강렬한 강조를 위한 부분에는 따뜻한 오렌지색(#ec652b)이 사용됩니다. 서체는 기하학적 산세리프체인 SuisseIntl이 주를 이루며, 300(링크)부터 600(디스플레이)까지 모든 굵기에 적용되어 대부분의 핀테크 기업에서 찾아보기 힘든 세련되고 편집적인 스타일을 연출합니다. 카드는 은은한 그림자가 드리워진 넓은 흰색 배경 위에 떠 있는 듯한 느낌을 주며, 대부분의 인터페이스 요소는 평면적이고, 카드가 실제 사물처럼 보여야 하는 부분(거래 위젯, 제품 목업)에만 입체감이 나타납니다. 코드와 금융 데이터는 단색의 바다거품색으로 표시되어, 엔지니어를 위해 엔지니어가 만든 은행임을 시각적으로 강조합니다.

페이지 구조는 전체 너비의 중앙 정렬 방식이며, 양쪽 여백은 넓습니다(데스크톱 기준 64~15cm). 메인 화면은 분할 레이아웃으로, 헤드라인과 클릭 유도 버튼은 왼쪽 25cm 위치에 배치되고, 플로팅 거래 위젯은 오른쪽 55cm 위치에 하프톤 지도 배경 위에 배치됩니다. 메인 화면 아래에는 흰색(4cm)과 밝은 캔버스(5cm) 영역이 번갈아 나타나며, 세로 간격은 6cm입니다. 콘텐츠는 6단 그리드에 따라 배치됩니다. 텍스트 블록은 4단(7cm)을 차지하고, 이미지/제품 카드는 5~6단을 차지하며, 그리드에서 의도적으로 벗어나 배치됩니다. 기능 설명 섹션은 2단 레이아웃을 사용합니다. 왼쪽에는 텍스트, 오른쪽에는 제품 정보가 표시됩니다. 신뢰도 통계 섹션은 페이지 전체 너비에 걸쳐 4단 그리드로 나뉘어 있습니다. 고객 로고는 48px 간격의 중앙 정렬된 한 줄에 배치됩니다. 푸터는 간결한 2단 레이아웃입니다. 내비게이션은 메인 화면 위에 고정된 높이 62px의 투명한 상단 바 형태로 제공되며, 배경은 흐릿하게 처리되어 스크롤할수록 흰색으로 서서히 변합니다. 사이드바나 메가 메뉴는 없고, 드롭다운 메뉴는 화살표 모양의 간단한 메뉴입니다.

Column의 시각적 스타일은 미니멀하고 기능적이며, 스톡 사진은 전혀 사용하지 않습니다. 시각적 언어는 세 가지 요소에 기반합니다. (1) SVG 데이터 일러스트레이션, 특히 남색에서 주황색, 청록색으로 이어지는 그라데이션이 적용된 점선 하프톤 세계 지도는 주요 요소 뒤에 세계적인 규모의 분위기를 연출합니다. (2) 제품 카드 레이아웃은 계좌 잔액, 이체 내역, JSON 코드 스니펫을 흰색 카드에 드라마틱한 그림자를 더해 표시하는 플로팅 위젯으로 구성됩니다. (3) 차트 시각화는 신뢰도/통계 섹션에 사용되는 얇은 연결선이 있는 청록색 캔들스틱 또는 막대 차트입니다. 하프톤 지도는 Column의 대표적인 시각적 요소로, #d65620(주황색)에서 보라색, 파란색, 하늘색, 청록색, 노란색으로 이어지는 그라데이션이 브랜드 전체 색상 팔레트를 하나의 장식적인 표면에 통합합니다. 아이콘은 #232730 또는 #a9acb6 색상으로 1.5~2px의 균일한 윤곽선 두께를 가지며, 활성 상태는 채우기 색상으로 표시됩니다. 라이프스타일 사진이나 추상적인 3D 렌더링 이미지는 일절 사용하지 않았습니다. 이는 제품과 데이터에 집중하기 위한 의도적인 절제입니다.

순수 SaaS 사설 프리미엄

https://column.com

팔레트

상표

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 — 보조 제목과 본문은 미드나잇 잉크보다 약간 따뜻한 색감을 띠고 있는데, 이는 밝은 배경에서 순수한 검정색이 너무 강렬해 보일 경우에 사용하기 위함입니다.
Steel #7c7f88 — 본문과 링크 텍스트는 차분한 색상(본문에서 245회 사용)이 주를 이룹니다. 칙칙한 느낌을 주지 않으면서도 차분한 분위기를 자아내는 중성적인 회청색입니다.
Fog #a9acb6 — 아이콘 윤곽선, 보조 테두리 및 자리 표시자 텍스트. 텍스트와 조화를 이루면서도 서로 어우러지는 중간 회색입니다.
Mist #cbcccf — 본문(서명, 면책 조항 및 작은 글씨)은 흰색 배경에서도 읽을 수 있지만 시각적으로는 덜 눈에 띕니다.
Silver Lining #e3e4e8 — 카드 테두리, 입력 필드 테두리, 구분선. 이 구조적이고 은은한 색상은 그림자 없이 두 표면을 구분해야 하는 곳에 사용됩니다.

타이포그래피

10에서 60px로 · 10단계

SuisseIntl — 대사: Inter · 요점 300, 400, 500, 600 · 기본 글꼴 - 모든 제목, 본문, 버튼, 내비게이션, 링크 및 카드 텍스트에 사용됩니다. 독특한 기하학적 산세리프체는 Column에 차별화된 편집 스타일을 부여하여 Inter-only와만 협력하는 다른 핀테크 기업과 차별화됩니다. 글꼴 굵기는 제목의 경우 52~60px에서 600, 소제목의 경우 500, 본문의 경우 400, 강조가 낮은 링크의 경우 300입니다.
SuisseIntlMono — 대사: JetBrains Mono · 요점 400 · SuisseIntl과 유사한 고정폭 글꼴로, 기술 레이블, API 식별자 및 UI 요소의 내장 데이터에 사용됩니다. SuisseIntl과 동일한 비율을 유지하므로 고정폭 텍스트와 비례 글꼴이 혼합된 환경에서도 올바르게 정렬됩니다.
SFMono — 대사: Fira Code · 요점 400 · 코드 스니펫 표시 - JSON 예제 및 API 문서 블록에 표시됩니다. 코드와 UI 텍스트를 시각적으로 구분하기 위해 연한 녹색(seafoam) 색상이 사용됩니다.

간격과 형태

목적	의미
밀도	평균
기본 단계	8px
버튼 반경	8px
카드 반경	8px
그림자	아니요 - 그림자 대신 테두리를 사용합니다.
구간 사이	72px
페이지 너비	1200px

AI가 Column 스타일로 웹사이트를 구축하고 내용을 채워줍니다.

제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.

이런 스타일로 웹사이트를 만들어 보세요

비슷한 스타일

dope.security — 보라색 신호등이 있는 한밤중 터미널
Leonardo — 뒤집힌 편집 갤러리. 검은 벽으로 둘러싸인 박물관에서 보라색 헤드라인은 벽면 설치물 역할을 하고, 그 아래에는 AI가 생성한 초상화들이 촘촘한 격자 형태로 걸려 있다.
VEED — 흰색 갤러리 벽에 네온 그린색 버튼이 달려 있습니다.
Craft Docs — 스크랩북을 위한 디지털 콜라주입니다. 이 디자인은 정성스럽게 정리된 디지털 메모와 부드럽고 자연스러운 질감이 어우러진, 촉감이 느껴지는 스크랩북을 연상시킵니다.
Letter — 수장고에서 꺼낸 반짝이는 유물들이 전시된 개인 갤러리. 검은 벽으로 둘러싸인 전시 공간에는 크롬 조각품 위로 세리프체로 쓰인 헤드라인이 떠다니고 있다.
Railway — 우주 한밤중 특급열차. 명확한 신호에 따라 어둡고 별빛 가득한 우주를 가로지르는 고요하면서도 스릴 넘치는 여정.
Garden Eight — 크림색 종이에 인쇄된 기념비적인 사설. 215픽셀 세리프체 제목은 따뜻한 양피지 위에 홀로 자리 잡고 있으며, 주변에는 떠다니는 듯한 조각적 형태와 바닷바람을 연상시키는 여백이 둘러싸고 있다. 이 페이지는 자동차 대시보드라기보다는 미술 작품집 표지처럼 느껴진다.
Steep — Warm Paper에서 세리프 글꼴 분석
ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
Monad — 따뜻한 양피지에 대한 편집 기술 저널
AI for Business — 따뜻한 회색 톤의 브루탈리즘 양식 편집 쇼룸