ElevenLabs
따뜻한 크림색 톤의 사진 에세이에 은은한 제목이 더해졌습니다. 바우하우스 스타일의 노트는 달걀 껍질색 종이에 검정 잉크를 사용하고, 보라색과 주황색으로 포인트를 주어 제품을 돋보이게 합니다.
ElevenLabs는 따뜻한 화이트 톤의 미니멀리즘 스타일을 추구합니다. 계란 껍질색 바탕(#fdfcfc)에 검정색 타이포그래피와 따뜻한 회갈색(#f5f3f1) 레이어가 한 겹으로 어우러져 있습니다. 브랜드 아이덴티티는 차분하면서도 자신감 넘치는 분위기를 자아냅니다. 거의 눈에 띄지 않는 Waldenburg 300 서체는 헤드라인을 극도의 명료함(-0.02em)으로 강조하고, Inter 400/500 서체는 나머지 요소에 차분한 중립성을 부여합니다. 생생한 보라색(#0447ff)과 주황색(#ff4704) 두 가지 포인트 색상은 제품의 시각적 요소(오디오스피어, 제품 아이콘)에만 사용되며, UI의 크롬 효과로는 전혀 사용되지 않습니다. 구성 요소는 1px 두께의 얇은 테두리, 카드에는 20px 반경의 넓은 곡률 반경, 9999px 크기의 버튼 등 평면 또는 약간 볼록한 형태로 디자인되었습니다. 이러한 디자인은 마치 크림색 종이 위에 놓인 바우하우스 스튜디오를 연상시킵니다. 절제되고, 세련되며, 기술적으로 정밀한 느낌을 줍니다.
전체 너비의 섹션들은 1280px의 바깥쪽 여백을 두고 최대 너비의 중앙 열 하나에 세로로 배열됩니다. 메인 섹션은 비대칭 구조로, 제목은 48px의 발덴부르크 정렬 수준으로 왼쪽 정렬되고, 설명 텍스트는 오른쪽 정렬되며, 제목 아래에는 알약 모양의 버튼 두 개가 있습니다. 메인 섹션 아래에는 전체 콘텐츠 너비를 차지하는 큰 탭형 내비게이션 바가 있습니다. 각 섹션은 연한 갈색과 회갈색 배경이 번갈아 사용되며, 세로 여백은 96~125px입니다. 푸터는 간결한 단일 스트립 형태입니다. 내비게이션은 고정된 동작이나 메가 메뉴 없이 최소한의 요소만 포함하는 상단 바입니다. 콘텐츠의 흐름은 편집 스타일과 일치합니다. 충분한 여백, 각 섹션당 하나의 주요 시각적 요소, 그리고 "신뢰" 섹션 아래에는 카드 그리드가 없습니다.
시각 디자인은 색채 구성이 주를 이루는데, 부드러운 오디오 스피어 형태의 큰 그라데이션(보라색에서 주황색, 분홍색으로 방사형으로 변하는 200픽셀 이상의 원형)이 주요 그래픽 요소로 사용됩니다. "신뢰" 섹션의 로고는 무광 캔버스 배경에 저대비 회색조로 표시됩니다. 사진은 최소화되어 있으며, 라이프스타일 사진이나 제품 사진은 없습니다. 아이콘은 간결하고 단색입니다(검은색 윤곽선 또는 채워진 아이콘, 컬러 아이콘 없음). 전체적인 시각 시스템은 제품 카탈로그보다는 디자인 출판물을 연상시키며, 마케팅 효과보다는 편집상의 절제미가 우선시됩니다.
팔레트
상표
- Violet Spark
#0447ff— 제품 시각적 강조 - 오디오 영역 일러스트레이션 및 장식용 제품 아이콘에만 사용되며 인터페이스 요소에는 절대 사용되지 않습니다.
중립적
- Eggshell
#fdfcfc— 페이지 캔버스, 버튼 표면 및 카드 표면은 눈부신 흰색이 아닌 따뜻하고 약간 크림색을 띠어 디지털 눈부심을 방지하고 사이트에 종이책과 같은 차분함을 선사합니다. - Warm Taupe
#f5f3f1— 구분선, 장식 카드, 그리고 무광 표면보다 한 단계 더 깊은 추가 표면층은 깔끔하고 테두리 없는 분리감을 만들어냅니다. - Stone
#ebe8e4— 얇은 테두리, 구분선 및 아이콘 배경은 차가운 느낌 없이 연한 갈색과 중간 회색의 중간색에 해당하는 따뜻한 회색입니다. - Ink
#000000— 본문 텍스트, 채워진 버튼, 탐색 메뉴 또는 링크 등 무엇이든 간에 순수한 검정색은 따뜻한 색상 팔레트의 기반이 되며 시스템에서 유일하게 선명한 대비를 만들어냅니다. - Graphite
#44403b— 본문 및 섹션 제목 - 검정색처럼 강렬하지 않으면서도 임팩트 있는 느낌을 주어야 하는 텍스트에는 은은하고 따뜻한 느낌의 어두운 회색을 사용합니다. - Smoke
#777169— 본문, 간략한 설명 및 캡션은 따뜻한 중간 톤의 회색으로 되어 있으며, 카드와 주제별 텍스트는 전반적으로 읽기 쉬우면서도 차분한 스타일을 유지하고 있습니다.
타이포그래피
10에서 48px로 · 8단계
- Waldenburg — 대사: Inter (300) or Söhne Light · 요점 300 · 제목 및 디자인 요소에만 사용하세요. 48/36/32px 크기에 글꼴 두께 300으로 설정되어 있습니다. 초경량 글꼴은 흔하지 않으며, 대부분의 웹사이트에서는 600~700 두께를 사용합니다. 이 섬세한 글꼴은 절제미를 통해 권위 있는 느낌을 전달합니다. -0.02em의 좁은 자간은 확대 시 글자 간 간격을 좁게 만듭니다. 대안으로는 300 두께의 "Inter" 또는 프리미엄 대안으로 경량 두께의 "Söhne"가 있습니다.
- Inter — 대사: Inter or system-ui · 요점 400, 500 · 본문 텍스트, 탐색 메뉴, 버튼, 링크, 레이블, 입력 필드, 카드 등 모든 것이 화면 밖에 있습니다. 기본 글꼴 두께는 400이고, 500은 버튼과 강조 표시된 링크에 사용됩니다. 글자 크기는 10에서 10까지이며, 줄 간격은 1.47~1.6으로 줄여 단락에 여유 공간을 제공합니다. 글자 크기가 14에서 3 사이일 때는 작은 글자 간격을 +1(2)로 설정하여 작은 크기에서도 가독성을 향상시켰습니다.
- Geist Mono — 대사: JetBrains Mono or IBM Plex Mono · 요점 400 · 코드나 기술 텍스트 옆에 13px 간격으로 배치된 마이크로텍스트로, 기술 레이블이나 메타데이터에 드물게 사용됩니다(빈도 = 28). 단일 레이어이며, 줄 높이는 1.69로 큽니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8-16px |
| 버튼 반경 | 9999px |
| 카드 반경 | 20px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 96-125px |
| 페이지 너비 | 1280px |
AI가 ElevenLabs 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Awesomic — 편집용 아연 메시 소재에 색종이 조각을 연상시키는 주황색 구두점이 있습니다.
- Monad — 따뜻한 양피지에 대한 편집 기술 저널
- Dub — 링크의 무광택 쌀 종이 재질 컨트롤 패널
- Seline Analytics — 따뜻한 종이 위에 놓인 조용한 분석표
- Notion — 한낮의 따스한 햇살 아래 따뜻한 종이 노트
- Anthropic — 따뜻한 느낌의 양피지에 인쇄된 과학 분야 저널—차분한 상아색 표면, 세리프체로 쓰인 편집 제목, 그리고 필요한 순간에만 나타나는 단 하나의 점토색 포인트.
- Calendly — 차가운 대리석 위에 진한 파란색 잉크
- Augen Pro — 애플의 하얀색 프레젠테이션은 단색 공간에 깔끔하고 가벼운 느낌의 강렬한 파란색을 유일한 포인트 색상으로 사용했습니다.
- Antimetal — 크림색 종이에 인쇄된 편집 기록 - 절제가 자신감을 드러내고 세리프체가 중요한 역할을 하는 과학 저널의 조용한 아침.
- Perk — 따뜻한 양피지 위에 전기 석회
- Ditto — 햇살 가득한 작업실에서 야생화 샘플을 제작하고 있습니다. 따뜻한 크림색 표면에 생생한 노란색 바탕색, 짙은 남색 잉크, 작품 뒤편으로 피어나는 유기적인 색채의 형태들이 어우러져 있습니다.
- Officevibe — 따뜻한 크림색 종이에 인쇄된 잡지. 인사 관리에 대한 심도 있는 에세이가 하나의 상품처럼 담겨 있다고 상상해 보세요. 모던한 파란색 인터페이스를 배경으로 부드러운 필기체 글꼴이 은은하게 흘러나옵니다.