Superlist
산호빛 불꽃이 타오르는 밤의 작업 공간 - 고요한 가지색 앱 화면에서 따뜻한 오렌지색 불꽃 하나가 모든 동작을 알립니다.
Superlist는 깊은 가지색과 따뜻한 산호색을 주요 색상으로 사용하고, 전체적인 분위기를 담아내는 크고 선명한 산세리프체 헤드라인을 통해 생산성을 강조하는 디자인을 선보입니다. 인터페이스는 마치 늦은 밤 집중해서 작업하는 듯한 차분하고, 입체적이며, 자신감 넘치는 느낌을 자아냅니다. 색상은 행동 유도 버튼, 활성 상태, 핵심 요점 등 기능적인 요소에만 사용됩니다. 표면은 은은한 보라색 톤(#181824 → #26253b)을 사용하여 레이어링하고, 순수한 검정색을 피함으로써 깊이감이 느껴지도록 했습니다. 구성 요소는 둥근 형태(20px 카드, 알약 버튼)와 부드러운 그림자를 특징으로 하며, 촘촘한 그리드 대신 10~16px의 편안한 간격으로 여백을 두어 시각적인 효과를 극대화했습니다. 헤드라인의 어조는 매우 중요합니다. 70~88px 너비에 600포인트 굵기, -0.02em의 좁은 자간을 사용하여 텍스트를 UI 요소가 아닌 타이포그래피 요소로 활용했습니다. 마치 SaaS 웹사이트의 편집 기사처럼 느껴지는 것입니다.
페이지 전체 너비에 걸쳐 어두운 영역이 펼쳐지며, 중앙에 최대 너비의 콘텐츠 컨테이너가 배치됩니다. 메인 섹션은 세로로 중앙에 위치하며 헤드라인, 부제목, 행동 유도 버튼(CTA)을 포함하고, 그 뒤에는 다음 섹션과 겹치는 큰 제품 스크린샷이 있습니다. 이후 섹션들은 중앙에 배치된 텍스트 블록과 카드 그리드가 번갈아 나타납니다. 리뷰 섹션은 리뷰 카드와 16인치 간격의 3단 그리드를 사용합니다. 내비게이션은 상단 바 하나로 구성되며, 왼쪽에는 로고, 중앙에 배치된 링크, 오른쪽에는 로그인 버튼이 있습니다. 고정된 사이드바나 메가 메뉴는 없습니다. 섹션 사이의 간격은 넉넉하여(16인치) 빽빽한 제품 그리드보다는 여유롭고 편집적인 리듬감을 만들어냅니다.
시각적 공간은 제품 스크린샷으로 가득 차 있습니다. 둥근 모서리의 커다란 프레임이 실제 앱 인터페이스를 보여주며 메인 및 보조 섹션을 채웁니다. 사진은 최소한으로 사용되며, 사용자 아바타나 앱 내 미디어 미리보기(예: 제품 목업 오른쪽 패널의 콘서트 이미지)에만 사용됩니다. 신뢰 표시줄의 로고는 평면적이고 차분한 흰색 텍스트 심볼입니다. 장식적인 일러스트레이션이나 추상적인 그래픽, 3D 렌더링은 없습니다. 시각적 전략은 제품을 확대하여 보여주고, 타이포그래피를 통해 감성적인 메시지를 전달하며, 산호색을 유일한 포인트 색상으로 사용하는 것입니다.
팔레트
상표
- Coral Ember
#ff4a36— 주황색은 장식적인 디테일을 강조하거나 드물게 나타나는 단서를 부각하는 데 보조적인 색상으로 사용됩니다. 행동을 유도하는 주요 색상으로 사용해서는 안 됩니다.
중립적
- Aubergine Canvas
#181824— 페이지 배경, 즉 메인 캔버스는 순수한 검정색 대신 따뜻하고 어두운 색조를 사용하여 사용자 인터페이스가 평면적인 느낌이 아니라 레이어드된 것처럼 보이게 합니다. - Elevated Plum
#26253b— 카드 표면, 입력 필드, 탐색 컨테이너 등 캔버스보다 한 단계 더 간편하게 눈에 보이는 경계 없이 깊이감을 표현할 수 있습니다. - Pure White
#ffffff— 주요 제목, 버튼 텍스트 및 아이콘 윤곽선은 어두운 배경에서 최대한의 대비를 이루도록 디자인되었습니다. - Fog Text
#696f81— 본문, 보조 제목, 그리고 은은한 테두리는 가지색 배경과 어우러져 편안한 가독성을 제공하는 7:1의 명암비를 갖습니다. - Ash Text
#8e8da0— 중립적인 색상은 보조 UI 요소, 구분선 및 차분한 레이블에 사용할 수 있습니다. 하지만 클릭 유도 버튼의 기본 색상으로는 사용해서는 안 됩니다. - Mist Highlight
#a3a3a7— 은은한 테두리, 구분선, 그리고 비활성화된 탐색 요소들이 캔버스 배경과 대비되면서도 돋보이는 차분한 중성적인 분위기를 만들어냅니다.
타이포그래피
12px에서 88px로 · 9단계
- sans-serif — 대사: Inter · 요점 400 · 산세리프체 - 추출된 데이터에서 발견되었지만 AI가 설명하지 못했습니다.
- Haffer XH SemiBold — 대사: Inter Tight · 요점 400, 600 · 주요 디스플레이 및 제목용 글꼴입니다. 히어로 제목에는 70~88px 크기, -0.02em 자간, 600 두께로 사용됩니다. 좁은 자간과 큰 자 높이는 제목에 편집적인 느낌을 주어 어두운 인터페이스가 대시보드보다는 잡지 표지처럼 보이게 합니다. 이 글꼴을 사용할 경우 Inter Tight 또는 General Sans의 굵은 글꼴로 대체할 수 있습니다.
- Jersey 10 — 대사: Anybody · 요점 400 · 숫자나 강조 표시에 적합한 크고 장식적인 글꼴입니다. 아주 큰 크기로 적절히 사용하여 타이포그래피적 포인트를 줄 수 있습니다. Anybody 또는 Cabinet Grotesk 글꼴로 대체하여 사용할 수 있습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 10-16px |
| 버튼 반경 | 100px |
| 카드 반경 | 20px |
| 그림자 | 부드러운 그림자 |
| 구간 사이 | 80px |
| 페이지 너비 | 1200px |
AI가 Superlist 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- DNA — 입자 렌즈를 통해 본 미드나잇 천문대
- Abetterlou — 안장 가죽 위의 불꽃 - 따뜻하고 부드러운 크림색 글꼴이 짙은 커피색 배경 위에서 빛나고, 황금빛 호박색 버튼은 마치 뜨거운 금속을 눌러 찍은 듯한 느낌을 줍니다.
- Galileo-ft — 전기처럼 푸른색 신호등이 있는 심우주 지휘실
- Decide AI — 자정 천문대 - 민트 신호
- Redis Agency — 근무 시간 이후에 문을 여는 편집 작업실은 칠흑같이 어두운 곳으로, 모든 브랜딩 작업은 세리프체 글꼴과 붉은 무 하나로 이루어진다.
- Spellbook — 산호빛 잉크로 밝혀진 한밤중의 법정—따뜻한 오렌지색 펜 획 소리만이 들리는 어두운 편집 공간
- Linear — 한밤중 정밀 기기
- Origin Financial — 고요한 화려함이 감도는 한밤중의 갤러리. 크고 선명한 세리프체 글꼴과 몇 개의 조명이 켜진 색색의 패널이 어우러져 금융이 세심하게 선별된 예술 작품이라는 느낌을 자아내는 조용하고 거의 어두운 공간.
- Hyperstudio — 이 디자인은 흑요석에 새겨져 있습니다. 글자와 가는 선들이 순수한 검은색의 흰색 공간을 둘러싸고 있으며, 간간이 금색 나침반 표시가 방향을 알려줍니다.
- Air — 조각 작품 "유리를 통해 본 한밤중의 하늘"
- Raycast — 미드나잇 커맨드 센터, 코랄 네온
- dope.security — 보라색 신호등이 있는 한밤중 터미널