Slash
금박 장부가 있는 한밤중의 금고
Slash는 마치 한밤중의 갤러리처럼 어두운 배경에 흰색 활자와 따뜻한 구리색 포인트가 구두점 역할을 합니다. 헤드라인은 아이비 프레스토(Ivy Presto)라는 고대비 디돈 세리프체로 극단적인 크기(최대 88px)로 표시됩니다. 세리프체와 산세리프체의 이러한 대비는 시스템의 특징이며, 전통적인 은행처럼 딱딱한 느낌을 주지 않으면서도 금융 시장의 무게감을 더합니다. 나머지 사용자 인터페이스는 의도적으로 절제된 디자인을 채택했습니다. 얇은 테두리, 알약 모양의 컨트롤, 16px 크기의 간결한 본문 텍스트, 그리고 활자가 숨 쉴 수 있도록 은은하게 위로 솟은 획이 사용되었습니다. 차트 라인과 미세한 포인트에 적용된 단 하나의 금색 그라데이션은 단색 시스템에 따뜻함을 더하며, 디자인 전문가들을 위해 제작된 블룸버그 터미널의 따뜻한 분위기를 연상시킵니다.
콘텐츠는 가로 1216px, 가운데 정렬, 세로 160px의 여백으로 구성됩니다. 홈 화면은 어두운 색상의 전체 너비 캔버스로, 왼쪽 정렬된 세리프 서체 헤더(가로 64~88px) 아래에 이메일 주소 입력란이 있고, 오른쪽에는 가로 50% 크기의 대형 제품 UI 카드(대시보드 스크린샷)가 있는 분할 구성입니다. 이후 섹션은 가운데 정렬된 단일 열 헤더(세리프 서체, 가로 44~64px)와 Inter 서체로 된 부제목, 그리고 기능 설명/고객 후기/블로그를 위한 3단 그리드 형식의 카드 배열로 이루어져 있습니다. 내비게이션은 고정된 상단 바 형태로, 왼쪽에는 로고, 가운데 메뉴(회사, 제품, 솔루션, 고객, 가격, FAQ), 오른쪽에는 눈에 잘 띄지 않는 로그인 버튼, 그리고 흰색으로 채워진 '시작하기' 버튼이 있습니다. 바닥글에는 회사 정보와 법적 고지 사항이 빽빽하게 배열된 5단 그리드 형식의 링크가 있습니다. 페이지는 콘텐츠가 풍부한 그리드 섹션과 전체 화면 통계가 번갈아 나타나는데, 배경색이 바뀌는 대신 열 사이의 넉넉한 여백이 리듬감을 만들어냅니다(페이지 전체가 하나의 통일된 캔버스처럼 보입니다).
사진은 마치 편집 잡지처럼 자연스럽고 따뜻한 분위기를 자아냅니다. 창업자와 팀원들이 실제 업무 환경(사무실, 거실, 건설 현장)에서 찍은 인물 사진들이 사용되었으며, 여백 없이 카드 프레임을 꽉 채웁니다. 사용 후기 카드 하단에는 텍스트 가독성을 높이기 위해 어두운 그라데이션을 적용했습니다. "LinkedIn과 잡지의 만남"이라는 콘셉트는 캐주얼하고 인간적이며, 스톡 사진처럼 인위적으로 꾸미지 않고 은은한 느낌을 줍니다. 기사 썸네일은 사진과 함께 일러스트로 표현된 콘셉트 이미지(미로 속 사람, 돈 가방이 놓인 벽난로 등)를 활용했습니다. 제품 UI는 다크 모드로 표시되며, 페이지 상단의 은은한 어두운 배경 위에 떠 있는 듯한 효과를 줍니다. 아이콘은 #2e3038 또는 #777a88 색상의 1px 두께의 흑백 이미지이며, 브랜드 색상으로 채워지지 않습니다.
팔레트
중립적
- Bone
#e2e3e9— 주요 텍스트에는 큰 글꼴 크기를 사용하고, 데이터 레이블은 상세하게 표시하며, 대부분의 UI 요소에서 텍스트 색조를 일관되게 유지합니다. - Obsidian
#08080a— 페이지 캔버스, 바닥글 배경, 가장 어두운 부분은 미묘한 푸른빛이 감도는 거의 검은색입니다. - Onyx
#040406— 카드의 표면, 즉 추가 배경은 시각적 효과를 위해 페이지보다 한 단계 더 두껍게 제작되었습니다. - Carbon
#121317— 돌출형 패널과 눈에 거슬리지 않는 UI 채우기 - 서피스 스택의 진화에서 눈에 띄게 가벼워진 첫 번째 단계 - Graphite
#1c1d22— 테두리, 구분선, 아이콘 컨테이너, 컨트롤 슬라이더 등 구조를 정의하는 가장 미묘한 색상까지. - Slate
#2e3038— 추가 테두리, 은은한 아이콘 선, 콘텐츠 블록 사이의 미묘한 구분선.
타이포그래피
13px에서 88px로 · 9단계
- Ivy Presto — 대사: Playfair Display · 요점 400, 500 · 제목과 소제목에 사용되는 세리프체로, 28px 이상의 크기로 제목 및 섹션 제목에만 사용됩니다. 얇은 세리프와 높은 대비를 이루는 디돈 획은 고급스러운 느낌을 자아내며, 0.01em의 작은 자간은 독특하여 인쇄물이나 회계 서적과 같은 느낌을 줍니다. 이 세리프체는 브랜드의 핵심적인 특징이며, 기하학적 산세리프체를 기본적으로 사용하는 다른 SaaS 핀테크 기업들과 Slash를 차별화하는 요소입니다.
- Inter — 대사: Inter (self-hosted via Google Fonts) · 요점 300, 400, 500, 600, 700 · UI Sans는 본문, 내비게이션, 버튼, 레이블, 링크, 폼 필드 및 소제목에 사용됩니다. 본문에는 눈에 잘 띄지 않는 보조 텍스트에 300포인트 글꼴을 사용하고, 중간 강조 텍스트와 버튼 레이블에는 500포인트 글꼴을 사용하며, 소문자로 작성된 카테고리 레이블에는 600포인트 글꼴을 사용합니다. 음수 자간은 2(-3)부터 시작하여 크기가 작아질수록 감소하는데, 이는 Inter 글꼴의 시각적 크기 조정 방식에서 흔히 볼 수 있는 특징입니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 넓은 |
| 기본 단계 | 8px |
| 버튼 반경 | 9999px |
| 카드 반경 | 10px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 160px |
| 페이지 너비 | 1216px |
AI가 Slash 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Modal — 어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- GitHub — 생물 발광 제어 장치가 있는 우주 지휘 패널 - 어둡고 분위기 있는 작업 공간에서 하나의 녹색 빛이 앞길을 가리킨다.
- Doppler — 한밤중 금고의 보랏빛 조명. 거의 검은색에 가까운 캔버스에는 연보라색 신호등과 녹색 확인등이 은은하게 빛나고, 모든 표면은 손으로 잡을 수 있을 만큼 곡선으로 되어 있다.
- Basedash — 무광택 글꼴이 사용된 한밤중의 데이터 단말기. 어두운 천문대처럼, 측정값들은 보라색과 초록색으로 빛나고, 세리프체로 쓰인 헤드라인은 소음 위로 떠다니며, 하얀 알약 모양 버튼만이 부드러운 검은색 표면으로 둘러싸인 방 안에서 유일하게 밝게 빛나는 물체다.
- Superwhisper — 북극광이 한밤중의 유리창 위로 사라져 간다.
- Better Stack — 미드나잇 SRE 콘솔
- Langbase — 미드나잇 노던 라이츠 콘솔
- Astro — 성운에서 나오는 보라색 빛 하나가 심우주 관제센터에 비치는 모습
- Wayfinder — 검은색 영화 화면에 거의 들리지 않는 제목이 생동감 넘치는 일러스트 위에 떠 있습니다. 인터페이스는 제어판이 아닌 밝기 조절 슬라이더입니다.
- HashiCorp — 한밤중 보라색 네온 불빛이 비추는 제어실은 어둡고 기술적인 공간이며, 빛나는 육각형 정육면체가 유일한 색상 기준점 역할을 한다.
- Umbrel — 야간 서버실에 있는 아늑한 모닥불—어두운 방 안에서 은은한 복숭아빛 불빛 하나가 진정으로 중요한 것을 부각시킨다.