Caldera
따뜻한 석회암 위에 불을 지펴라. 바탕은 거칠고 따뜻한 회반죽이고, 각각의 주황색 요소는 표면에 눌러 붙은 타오르는 불씨처럼 보인다.
칼데라는 녹아내린 오렌지색으로 물든 따뜻한 석회암 캔버스 위에 펼쳐지는 듯한 느낌을 줍니다. 인터페이스는 평면적이고 그림자가 없어, 거의 건축물 규모에 가까운 (최대 189px) 굵고 압축된 서체가 전체적인 구조적 무게감을 지탱합니다. 생생한 오렌지색(#fc5000)은 단색의 따뜻한 회색 배경에 강렬한 색채 포인트를 더하며, 플라즈마 퍼플은 메인 하프톤 이미지에, 유황 노란색은 태그에 사용됩니다. 시각적 언어는 화산을 연상시킵니다. 압축되고 굵은 글자, 하프톤 도트 패턴, 카드와 버튼의 40px 반경, 800px 알약 모양의 컨트롤 등, 부드럽고 종이 같은 표면에 따뜻함이 담겨 있습니다.
시각적 구성은 미니멀하면서도 세심하게 고려되었습니다. 메인 창에는 사진 대신 추상적인 하프톤 도트 패턴(보라색에서 주황색으로 그라데이션된 배경에 주황색 점들)이 사용되었는데, 이는 단순한 장식이 아니라 브랜드의 예술적 표현입니다. 제품 정보 및 공지 사항 카드에는 단색 엠버 블록 또는 하프톤 플라즈마 바이올렛 이미지가 채워져 통일된 그래픽 시스템을 제공합니다. 파트너/통합 로고는 밝은 배경에 흑백 아이콘으로 표시됩니다. 사진, 3D 렌더링 또는 라이프스타일 이미지는 전혀 사용되지 않았습니다. 아이콘은 작고 흑백이며 미니멀합니다. Discord, X, Telegram 내비게이션 메뉴에 단순한 글리프 형태로 배치되어 있습니다. 시각적 언어는 사진이 아닌 그래픽적이고 편집적인 느낌을 주며, 스톡 이미지보다는 포스터 디자인에 가깝습니다.
팔레트
상표
- Ember
#fc5000— 주요 동작 버튼, 통계 카드 및 핵심 시각적 강조 요소만이 강렬한 색상으로 강조되어 있으며, 따뜻한 회색 톤과의 대비를 통해 추가적인 장식 요소 없이도 긴박감을 조성합니다. - Plasma Violet
#524ae9— 메인 하프톤 그라디언트 베이스, 추가 카드 표면 1개 - 주로 메인 도트 패턴과 전용 카드 1개에 사용되며, 컨트롤에는 전혀 사용되지 않습니다.
중립적
- Sulfur
#f5f28e— 태그 및 카테고리 아이콘(작은 강조 표시)의 배경은 블로그 게시물 카테고리와 프로그램 공지를 나타내는 데 사용되는 부드러운 노란색입니다. - Limestone
#f7f6f2— 카드 표면, 콘텐츠 블록 배경 및 추가 버튼 채우기는 더 밝고 따뜻한 흰색 계열로 되어 있어 페이지 배경과 대비되어 요소들이 돋보입니다. - Pumice
#e2e2df— 페이지의 주요 배경은 따뜻한 중간 회색으로, 각 섹션의 기초가 됩니다. 이 배경은 카드지 표면보다 약간 더 어두워 그림자 없이 인물과 배경을 미묘하게 구분할 수 있습니다. - Obsidian
#070607— 본문, 제목, 링크 텍스트 및 버튼 프레임은 캔버스의 따뜻한 색상과 어울리는 아주 미미한 따뜻한 색조가 가미된 거의 검은색입니다. - Chalk
#ffffff— 어두운 영역의 텍스트, 어두운 배경의 입력 텍스트, 고대비 오버레이 - 순백색은 어두운 표면과의 최대 대비가 필요한 경우에만 사용됩니다.
타이포그래피
12픽셀에서 189픽셀로 · 10단계
- PP Neue Corp Compact — 대사: Bebas Neue · 요점 400 (Ultrabold cut) · 모든 제목과 본문 텍스트에 맞춤 디자인된 압축된 초굵은 글꼴을 사용하여 제목에 산업적이고 간판 같은 무게감을 부여했습니다. 본문의 189px 크기는 브랜드 고유의 스타일, 즉 타이포그래피보다는 구조적인 느낌에 가까운 압축적인 스타일을 반영합니다. "ss06" 및 "ss10" 설정은 대체 자간과 간격을 활성화하여 더욱 강렬하고 압축적인 리듬감을 만들어냅니다. 디스플레이 크기에서는 흔하지 않은 양의 자간(+0.02em)을 사용하여 80~189px 크기에서 텍스트가 답답하게 느껴지지 않도록 했습니다.
- DM Sans — 대사: Inter · 요점 500 (Medium only — never Regular or Bold) · 본문, 내비게이션 링크, 버튼 레이블 및 보조 제목의 크기는 최대 30px입니다. 중간 굵기의 글꼴을 선택한 것은 의도적인 것으로, 일반 굵기는 매우 굵은 제목 글꼴과 대비되어 너무 얇아 보이고, 굵은 굵기는 제목 글꼴과 서로 경쟁하는 느낌을 줄 수 있기 때문입니다. DM Sans는 산업적인 제목 글꼴에 비해 인간적이고 약간 기하학적인 느낌을 주는 대조를 이룹니다.
- System sans-serif — 대사: Inter · 요점 400 · 캡션, 메타텍스트, 날짜, 마이크로태그. 크기 절약이 굵기 및 브랜드 인지도보다 중요할 때만 12px 크기로 사용됩니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 16px |
| 버튼 반경 | 40px |
| 카드 반경 | 40px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1280px |
AI가 Caldera 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- teenage engineering — 스튜디오 조명 산업 카탈로그에서는 제품이 페이지에서 유일하게 중요한 요소이며, 나머지 모든 내용은 그 주변에서 논의됩니다.
- basement — 새벽 3시의 텅 빈 인쇄기 - 거대하고 압축된 글꼴들이 칠흑 같은 어둠 속에 펼쳐져 있고, 내비게이션 바에 희미한 주황색 불빛 하나만 빛나고, 나머지는 모두 하얗거나 희미한 회색이다.
- amra — 흰 배경 위에 무지갯빛 구체가 놓여 있다. 연보라색 포인트는 거의 완벽한 무채색 페이지에서 유일한 색채 요소이며, 이 하나의 그라데이션 구체는 보통 메인 일러스트레이션이 하는 역할을 대신한다.
- Stink Studios — 한밤중의 영화 스튜디오 - 영사기가 윙윙거리고, 방은 어둡고, 오직 필름만 빛을 발하고 있다.
- Andrei Rybin — 흑백 스케치북은 휴대폰 화면을 컨택트 시트처럼 흰 벽에 붙여 놓은 디자이너 노트입니다.
- Uniswap Cup — e스포츠 대회는 가상 경기장에서 방송되는데, 분홍색 마커로 흰색 사각형과 가는 선으로 이루어진 격자 무늬가 그려져 있다.
- Freytag Anderson — 영화관 막이 오르면 단 하나의 단어가 화면에 나타납니다. 거대한 움직이는 영상이 화면 전체를 가득 채우고, 브랜드 이름은 제목처럼 화면 한쪽 구석에 자리 잡고 있으며, 그 외에는 아무것도 시선을 분산시키지 않습니다.
- Integrated Biosciences — 한밤중 생물발광 실험실
- Vercel — 흰 종이에 인쇄된 터미널
- Mintlify — 유리 테이블 위에 펼쳐진 구름 정원. 손으로 그린 하늘과 다큐멘터리 영상이 한데 어우러져, 색채와 개념이 충돌하는 유일한 순간이자, 페이지가 금욕적인 순백색으로 사라지는 곳이다.
- Gleap — 따뜻한 크림색 톤에 흑연색으로 포인트를 준 작업 공간. 무광 검정 잉크 점들이 린넨 소재의 구조물 위에 떠 있는 듯한 스튜디오.
- ClickUp — 흰색 대리석 위에 펼쳐진 강력한 대시보드. 이 페이지는 생산성 도구의 제품 브로셔이므로, 시각적 언어는 제품 자체에서 차용되었습니다. 빽빽한 목록, 상태 표시기, 아바타 그룹, 그리고 마치 제품 사양서를 전시해 놓은 듯한 대담한 서체 문구들이 그 예입니다.