
Steep
Warm Paper에서 세리프 글꼴 분석
Steep은 분석 정보를 편집 콘텐츠처럼 제시합니다. Signifier 세리프 서체의 헤드라인이 거의 단색에 가까운 흰색 배경 위에 떠 있고, 따뜻한 복숭아색(#fbe1d1) 포인트가 무채색 시스템을 강조합니다. 페이지는 마치 제품 잡지처럼 보입니다. 크고 필기체 같은 서체, 넉넉한 텍스트 공간, 부드러운 24px 반경의 모서리를 가진 큰 카드, 그리고 표면과 평평하게 배치된 알약 모양의 컨트롤이 특징입니다. 구성 요소들은 차분하고 가볍게 느껴집니다. 그림자는 은은하고 테두리는 얇으며, 색상은 기능적 강조를 위해 사용됩니다(복숭아색 강조 표시, 복숭아색 배경에 짙은 갈색 글자). 제품 표면(영역 테이블, 활성화 다이어그램, AI 빌더)은 대시보드 셸 내부에 중첩되는 대신 헤더 주변에 떠 있는 요소처럼 표시됩니다.
페이지 레이아웃은 최대 너비 1200px로 중앙에 배치되어 있으며, 주요 섹션은 컨테이너 내부에 있으면서 페이지 너비의 거의 전체를 차지합니다. 메인 레이아웃은 중앙에 위치한 큰 세리프 글꼴의 헤더, 서브 헤더, 그리고 두 개의 필 버튼(Pil Button)으로 구성되어 있으며, 그 주변에는 네 개의 플로팅 제품 설명 카드(왼쪽 상단 지역 표, 오른쪽 등록 카드, 왼쪽 하단 활성화 다이어그램, 중앙 하단 AI 편집기)가 다양한 간격으로 흰색 캔버스 위에 겹쳐 배치되어 있습니다. 각 섹션은 페이퍼 화이트와 카드 미스트 배경을 번갈아 사용하여 강한 대비 없이 차분한 분위기를 연출합니다. 기능 섹션은 텍스트와 UI를 80px의 넓은 세로 여백을 두고 두 열로 구성했습니다. 내비게이션은 로고가 왼쪽에, 내비게이션 링크가 중앙에, 그리고 두 개의 클릭 유도 버튼(텍스트 링크 + 채워진 필 버튼)이 오른쪽에 있는 투명한 상단 바(배경, 테두리, 그림자 없음)로 이루어져 있습니다. 전체적인 레이아웃 밀도는 여유롭고, 페이지는 각 섹션 사이에 여백이 있으며, 콘텐츠가 가장자리를 가득 채우지 않습니다.
시각 디자인은 라이프스타일 중심이 아닌 제품 중심입니다. 플로팅 UI 요소(5행 데이터가 포함된 지역별 표, 8월~11월 활성화 현황을 보여주는 선 그래프, 방사형 진행률 링, AI 입력 필드)는 편집 제목 주변에 잘린 스크린샷 형태로 배치되어 있습니다. 사진, 삽화 또는 추상적인 그래픽은 사용되지 않았습니다. 모든 시각적 제품 요소는 얇은 테두리와 부드러운 그림자가 있는 흰색 플로팅 카드 위에 배치됩니다. 아바타 원에는 작은 커서 방향 표시기가 있어 실시간 상호 작용을 나타내는 시각적 모티프 역할을 합니다. 메인 구성은 스톡 사진이 있는 중앙 제목 대신 텍스트와 UI 요소의 콜라주 형태로 이루어져 있습니다.
팔레트
중립적
- Ink Black
#17191c— 본문, 채워진 버튼 배경, 내비게이션 로고만이 시스템에서 어두운 부분이며, 본문의 모든 클릭 유도 문구와 제목은 거의 검은색에 가까운 배경 위에 표시됩니다. - Paper White
#ffffff— 페이지 캔버스, 버튼 텍스트 및 양각 카드 표면은 약 76 주파수 포인트를 갖는 주요 배경색입니다. - Mist Gray
#f2f2f3— 카드 표면, 추가 배경, 입력 필드 채우기 등 종이 아래에 콘텐츠를 내장하는 보이지 않는 레이어가 있습니다. - Fog White
#fafafb— 마우스 커서를 올렸을 때 페이지 배경이 번갈아 가며 여러 부분과 표면에 나타나도록 추가 기능을 제공합니다. 용지보다 한 단계 위로 이동하여 미묘한 줄무늬 변화를 만들어냅니다. - Slate Gray
#777b86— 링크 색상, 차분한 보조 텍스트, 바닥글 텍스트 - 본문 텍스트와 포함할 수 없는 텍스트 사이에 차분하고 채도가 낮은 회색을 배치합니다. - Ash Gray
#979799— 추가 레이블, 카테고리 태그(마케팅, 재무, 영업) - 링크 색상보다 한 단계 밝게 표시됩니다.
타이포그래피
15픽셀에서 90픽셀로 · 8단계
- Signifier — 대사: GT Sectra · 요점 400 · 제목 및 표제에 사용되는 세리프체로, H1/H2 태그에만 세 가지 크기로 제공됩니다. 글꼴 두께는 모든 크기에서 400(일반)으로 고정되어 있는데, 이는 세리프체가 굵은 글꼴처럼 강렬하게 강조되기보다는 은은하게 메시지를 전달하는 특징적인 디자인 요소입니다.
- Sohne — 대사: Inter · 요점 400, 430, 450, 480, 500 · 메인, 인터페이스 및 탐색 글꼴은 메타데이터부터 소제목까지 모든 것을 아우르는 다재다능한 글꼴입니다. 430, 450, 480과 같은 단계적 굵기는 갑자기 굵어지지 않고 미묘한 계층 구조를 만들어냅니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 8px |
| 버튼 반경 | 9999px |
| 카드 반경 | 24px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1200px |
AI가 Steep 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Newformcap — 탈의실에 있는 편집 신문
- Claude — 따뜻한 양피지에 인쇄된 유물—뼈로 만든 종이에 잉크로 인쇄된 것, 점토만이 유일한 색채의 흔적이다.
- 11x– Digital workers — 영화 같은 편집의 황무지—풍경의 파노라마 사진과 고급 잡지 화보처럼 읽히는 웅장한 세리프체 헤드라인이 어우러져 있다.
- Revolut — 구름 사진을 바탕으로 한 흑백 편집 디자인 - 흰색 잉크, 약통 단추, 회색조의 세상 속에 돋보이는 단 하나의 파란색 줄무늬.
- Scheduling — 크림색 종이에 인쇄된 편집용 잉크
- Titan — 따뜻한 색조의 흑백 아카이브
- Programa — 정오의 스위스 디자인 스튜디오. 하얀 갤러리 벽은 노란색 테이블 램프 하나로 환하게 밝혀져 있다. 모든 것이 회색 톤으로 이루어져 있다가 버튼, 아이콘, 또는 포인트가 눈길을 사로잡으면 그 하나의 노란색이 공간 전체의 분위기를 결정짓는다.
- Sana Agents — 흰색 배경에 라임 스파클이 있는 화보
- Visual — 따뜻한 느낌의 사미즈다트(비밀 출판물). 크림색 종이, 세리프체 포스터, 흑백 여백 메모, 노란색 마커 한 개.
- Midday — 양피지 재질의 편집 브로셔 - 따뜻한 돌색 배경에 72px 세리프체 제목, 산세리프체 본문(간격 조정), 알약 모양 컨트롤, 그림자 없음
- Chat for impact — 숲처럼 푸른색으로 꾸며진 병원, 파스텔톤의 방들
- Handhold — 따뜻한 양피지 표면 아래 거의 들리지 않는 세리프체—색채 잡음 없이 수작업으로 조판된 편집 페이지. 가장 섬세한 200포인트 세리프체가 모든 감정을 전달합니다.