Dub

링크의 무광택 쌀 종이 재질 컨트롤 패널

Dub의 시각 시스템은 절제되고 거의 편집자적인 SaaS 미학을 지니고 있습니다. 거의 흰색에 가까운 캔버스는 돌출된 요소 대신 얇은 테두리로 둘러싸여 있으며, 촘촘한 단색 타이포그래피가 구조적 기반을 제공하고 밝은 파란색(#2563eb) 하나가 강렬한 인상을 남깁니다. 표면은 언뜻 보기에 평평하고 프레임이 없는 것처럼 보이지만, 각 컨테이너에는 1px의 #e5e5e5 여백이 있어 인쇄된 문서와 같은 느낌을 줍니다. 개성은 중립적인 색상 팔레트 위에 떠 있는 작은 "알약" 모양의 포인트(주황색, 녹색, 보라색)와 화려하지 않으면서도 자신감 있고 현대적인 느낌의 헤더를 통해 표현됩니다. 구성 요소는 간결하고 밀도 있게 설계되었습니다. 8px의 여백, 12px의 카드 반경, 9999px 높이의 알약 모양 레이블, 그리고 무겁고 채워진 버튼 대신 보이지 않는 컨트롤이 사용되었습니다.

이 페이지는 최대 너비 약 1200px의 중앙 정렬 레이아웃으로 구성되어 있습니다. 주요 요소는 중앙 정렬된 텍스트 블록이며, 세 개의 플로팅 요소(제휴 프로그램, 전환 분석, 단축 링크)가 큰 제품 레이아웃 위에 가로로 배치되어 있습니다. 섹션들은 일정한 64px 간격의 여백을 두고 세로로 배열되어 있으며, 흰색 캔버스와 #f5f5f5 페이퍼 헤이즈 색상이 번갈아 사용되어 명암 대비를 이루고 있습니다. 하단 섹션은 Z자형 레이아웃을 사용합니다. 편집 텍스트는 중앙 1/3 부분에 배치되고, 플로팅 UI 카드는 좌우 여백에 고정되어 비대칭적인 잡지 같은 리듬감을 만들어냅니다. 로고 클라우드는 페이지 중앙에 위치한 간단한 5x2 그리드입니다. 내비게이션은 고정 메뉴나 메가 메뉴 없이, 왼쪽에는 로고, 중앙에는 내비게이션 메뉴, 오른쪽에는 두 개의 버튼(로그인 버튼과 회원가입 버튼)으로 구성된 미니멀한 상단 바 형태로 되어 있습니다. 메인 창의 대시보드 레이아웃은 고정된 사이드바(약 240px)와 방문자가 스크롤을 시작하기 전에 제품 정보의 밀도를 결정하는 콘텐츠 영역으로 구성된 고전적인 2단 앱 레이아웃을 보여줍니다.

시각적 요소는 라이프스타일이 아닌 제품 중심적입니다. 메인 화면은 실제 제품 모형을 보여주는 대형 대시보드 스크린샷을 중심으로 구성되어 있으며, 사이드바 탐색, 데이터 테이블, 플로팅 UI 요소들이 흰색 캔버스 위에 평면 패널 형태로 배치되어 있습니다. 클라이언트 로고(beehiv, superpower, Chatbase 등)는 소셜 미디어에서의 성과를 강조하기 위해 채도가 낮은 회색조 그리드 형태로 표시되며, 페이지의 유일한 포인트 색상인 파란색이 돋보이도록 색상이 제거되었습니다. 하단의 편집 텍스트 블록 주변에는 파트너 카드(작은 프로필과 수익/결제 데이터가 포함된 타일)가 움직이며, 텍스트 자체에 그림자를 사용하지 않고도 깊이감을 표현합니다. 점선 그리드 배경 패턴은 이 사이트의 시그니처 특징입니다. 매우 낮은 투명도의 작은 점들이 촘촘히 배열되어 질감과 디자인 시스템/드로잉 표면의 느낌을 만들어내며, 사이트가 "현대적인 링크 어트리뷰션 플랫폼"임을 강조합니다. 아이콘은 윤곽선과 채우기만으로 최소화되었으며, 기능 태그에는 포인트 색상(탠저린 오렌지, 라벤더 퍼플, 민트 그린)이 사용되었습니다. 사진, 삽화 또는 3D 모델은 전혀 사용되지 않았습니다. 제품의 사용자 인터페이스 자체가 시각적 언어입니다.

순수 SaaS 미니멀리즘 사설

https://dub.co

팔레트

상표

Electric Blue #2563eb — 브랜드의 주요 색상인 로고, 링크, 핵심 성과 지표, 활성 상태 및 아이콘 강조 색상이 사용됩니다. 흰색 배경에 진한 파란색이 시스템의 유일한 시각적 매력을 만들어냅니다.
Deep Sapphire #1e40af — 액션 버튼의 배경색과 콜 투 액션의 굵은 글씨체(액션을 나타내는 유일한 색상)는 시선을 사로잡기 위해 절제된 방식으로 사용되었습니다.

중립적

Canvas White #ffffff — 페이지 배경, 카드 표면, 팝업 패널은 모든 화면의 절대적인 기본 요소입니다.
Paper Mist #f5f5f5 — 중첩된 카드, 추가 패널 및 채우기에 대해 마우스 오버 시 색상이 미묘하게 변경됩니다.
Ash #e5e5e5 — 카드, 입력 커넥터 및 칸막이의 얇은 테두리는 시스템을 하나로 묶어주는 구조적 선입니다.
Smoke #d4d4d4 — 선택한 컨테이너의 테두리를 더 선명하게 하고 버튼 윤곽선을 추가합니다.
Pebble #c8c8c8 — 테두리, 컨트롤 윤곽선 및 구조적 구분선에 중간 정도의 대비를 주는 색상입니다. 이 색상은 클릭 유도 버튼의 기본 색상으로 사용해서는 안 됩니다.
Midnight Ink #0a0a0a — 버튼의 본문, 강조 표시된 버튼 및 탐색 텍스트는 대비를 극대화하기 위해 거의 검은색입니다.

타이포그래피

11픽셀에서 48픽셀로 · 9단계

Satoshi — 대사: Inter (weight 500 · 요점 500 · 제목 표시 - 제목 및 섹션 제목에만 36~48px 너비로 사용합니다. 글꼴 두께 - 500(중간, 굵지 않음): 제목은 자신감 있고 현대적인 느낌을 주지만 결코 과하지 않습니다. 사토시의 기하학적 비율은 Inter의 본문에서는 재현할 수 없는 약간 편집적이고 현대적인 느낌을 이 서체에 부여합니다.
Inter — 대사: Inter (native) · 요점 400, 500, 600 · 본문, UI 레이블, 내비게이션, 소제목 및 보조 제목에 사용됩니다. Inter는 11px 마이크로 레이블부터 30px 보조 제목까지 모든 것을 처리하는 핵심적인 역할을 합니다. 본문의 기본값은 400이고, 강조 표시된 요소와 버튼 레이블은 500, 중요한 UI 레이블은 600으로 예약되어 있습니다. 16px 크기에 줄 간격 1.5는 가장 자주 나타나는 단일 크기(1220회)로, 16px가 본문의 표준 크기임을 확인시켜 줍니다.
Geist Mono — 대사: JetBrains Mono or IBM Plex Mono · 요점 400, 500 · 코드 블록에서는 12~14px 크기로, 큰 코드 표시 요소에서는 24px 크기로 코드 스니펫, 기술 메타데이터 및 임베디드 고정폭 토큰이 사용됩니다. 이는 Dub의 제품 포지셔닝에 부합하는 개발자 도구의 신뢰성을 보장합니다.

간격과 형태

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

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

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

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

비슷한 스타일

ElevenLabs — 따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
Monad — 따뜻한 양피지에 대한 편집 기술 저널
Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.
Calendly — 차가운 대리석 위에 진한 파란색 잉크
Augen Pro — 애플의 하얀색 프레젠테이션은 단색 공간에 깔끔하고 가벼운 느낌의 강렬한 파란색을 유일한 포인트 색상으로 사용했습니다.
Antimetal — 크림색 종이에 인쇄된 편집 기록 - 절제가 자신감을 드러내고 세리프체가 중요한 역할을 하는 과학 저널의 조용한 아침.
Perk — 따뜻한 양피지 위에 전기 석회
Ditto — 햇살 가득한 작업실에서 야생화 샘플을 제작하고 있습니다. 따뜻한 크림색 표면에 생생한 노란색 바탕색, 짙은 남색 잉크, 작품 뒤편으로 피어나는 유기적인 색채의 형태들이 어우러져 있습니다.
Officevibe — 따뜻한 크림색 종이에 인쇄된 잡지. 인사 관리에 대한 심도 있는 에세이가 하나의 상품처럼 담겨 있다고 상상해 보세요. 모던한 파란색 인터페이스를 배경으로 부드러운 필기체 글꼴이 은은하게 흘러나옵니다.