Huly
한밤중 천문대의 오로라 - 주인공은 보라색에서 산호색으로 서서히 변해가는 수직 광선이며, 그 아래의 고요한 부분들은 모두 같은 두 가지 색조의 이야기를 더욱 차분한 분위기로 풀어낸다.
Huly는 우주 작업 공간의 분위기를 자아냅니다. 거의 검은색 바탕에 보라색과 황색이 어우러진 빛이 주요 요소를 가로지르며, 그 아래에는 생산성 향상을 위한 차분한 그리드가 배치되어 있습니다. 시스템은 제한된 색상 범위 내에서 작동합니다. 밝은 파란색과 산호색 두 가지 색상이 레이어드된 흑연 표면 위에서 브랜드 이미지를 구축하는 데 사용되어 다크 모드가 결코 밋밋하게 느껴지지 않습니다. 모든 기능 요소에는 Inter-style 서체가 사용되었고, 핵심 요소에는 맞춤형 폰트(Esbuild)가 사용되었으며, 자간은 80~84px, 네거티브 자간이 과감하게 적용되었습니다. 구성 요소는 캡슐 모양입니다. 컨트롤에는 9999px, 카드에는 12px의 곡률 반경이 적용되었고, 그림자는 최소화되었으며, 빛나는 그라데이션 선이 주요 장식 요소로 사용되었습니다. 페이지는 전체 페이지를 덮는 어두운 영역과 차분한 밝은 영역이 번갈아 나타나므로, 새 화면을 만들 때는 색상을 선택하기 전에 모드를 먼저 결정해야 합니다.
홈페이지는 전체 너비를 차지하며, 오로라의 세로 줄기 이미지와 왼쪽 정렬된 헤드라인, 그리고 오른쪽 하단에 제품 스크린샷이 배치되어 있습니다. 홈페이지 아래에는 최대 너비인 1200px의 콘텐츠 영역이 있으며, 어두운 색과 밝은 색 줄무늬가 번갈아 나타납니다. 각 섹션은 헤더와 96px 간격으로 배열된 3~4열의 카드 그리드로 구성된 단일 세로 블록 형태입니다. "MetaBrain" 섹션은 중앙에 위치한 헤드라인과 다양한 크기의 카드 모자이크(큰 메인 카드와 여러 개의 작은 보조 카드)를 사용하여 그리드 구조를 깨뜨립니다. 페이지는 SaaS 표준에 따라 콘텐츠가 풍부하지만, 어두운 색과 밝은 색 줄무늬를 교차시켜 각 섹션에 여백을 제공합니다. 내비게이션은 스크롤할수록 불투명해지는 투명한 상단 바 형태로 되어 있습니다.
핵심 요소는 사진이 전혀 사용되지 않은 순수한 오로라 그라데이션입니다. 모든 일러스트는 제품 UI(다크 모드 칸반, 받은 편지함, 캘린더)의 실제 스크린샷이며, 증거이자 장식 역할을 하는 카드 프레임으로 둘러싸여 있습니다. 라이프스타일 사진, 스톡 이미지, 3D 렌더링은 일절 사용되지 않았습니다. UI와 관련 없는 유일한 시각적 요소는 오로라 하단에 따뜻한 햇살이 퍼져나가는 듯한 효과를 CSS 그라데이션으로 표현한 것입니다. 아이콘은 #95979 색상 또는 흰색의 단색 라인 아이콘이며, 다색 아이콘은 사용하지 않았습니다. 이 시스템은 자체 다크 UI를 핵심 요소로 다루고 있으며, 제품은 사진 그 자체입니다.
팔레트
상표
- Electric Iris
#5683da— 메인 배경, 활성 내비게이션 표시기, 그리고 강렬한 보라색과 파란색이 어우러진 북극광 액센트(짙은 검정색 배경)는 기업 활동보다는 참여적인 인상을 만들어냅니다. - Ember Pulse
#ff8964— 보조적인 강조 요소이자 따뜻한 오로라 영역, 알림 지점, 그리고 일러스트레이션의 하이라이트인 황색은 파란색의 차분함을 깨고 빛에 따뜻함을 더합니다.
중립적
- Obsidian Canvas
#303236— 페이지 배경, 즉 가장 눈에 띄는 부분은 약간의 따뜻한 느낌이 가미된 거의 검은색으로, 모든 콘텐츠에 적용되는 표준적인 환경입니다. - Void
#090a0c— 메인 화면, 모달 배경 및 캔버스에 자연스럽게 녹아들어야 하는 프레임의 그라디언트에 사용되는 가장 깊은 표면 레이어입니다. - Charcoal Card
#111111— 캔버스보다 한 단 높게 배치된 골판지와 패널로 만든 돌출된 표면. - Slate Edge
#4a4b50— 어두운 표면의 미묘한 경계선과 구분선 - Iron Veil
#6b6c6d— 태그, 목록 항목 채우기 및 비활성화된 채우기의 배경을 흐리게 처리합니다. - Smoke
#95979e— 아이콘 윤곽선, 추가 텍스트 및 비활성화된 컨트롤은 중간 회색으로 표시되는 주요 작업 요소입니다.
타이포그래피
11픽셀에서 80픽셀로 · 8단계
- Inter — 대사: DM Sans · 요점 300, 400, 500, 600, 700 · 사용자 인터페이스의 모든 기능 텍스트(본문, 탐색 메뉴, 버튼, 목록 항목, 레이블 및 작은 제목)는 강조를 위해 500~600, 본문에는 400, 눈에 잘 띄지 않는 메타데이터에는 300의 글꼴 두께를 사용합니다.
- Esbuild — 대사: Sora · 요점 400, 500, 600 · 표시 전용: 시작 화면 제목, 섹션 제목, MetaBrain 기사 제목. 압축된 기하학적 형태와 좁은 자간은 84px가 SaaS 프로젝트보다는 편집 작업에 더 적합하다는 인상을 줍니다. 28px 미만은 절대 사용하지 마십시오.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 넓은 |
| 기본 단계 | 12px |
| 버튼 반경 | 9999px |
| 카드 반경 | 12px |
| 그림자 | 부드러운 그림자 |
| 구간 사이 | 96px |
| 페이지 너비 | 1200px |
AI가 Huly 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- monday — 파스텔톤 스티커로 꾸며진 하얀 작업실
- Slack — 무대는 가지색 바탕에 흰색 스포트라이트가 비추고 있다. 어두운 부분은 짙은 자두색으로 물들어 있고, 연한 흰색 배경은 크고 전위적인 제목들이 자유롭게 드러나도록 해준다.
- Base44 — 햇살이 비치는 노트에 라임색 마커로 쓴 글
- Supahub — 보랏빛 능선에 부드러운 햇살이 비춘다. 대부분 하얗고 산뜻한 캔버스에 밝은 보라색 태양 하나가 빛을 비추고, 장식적인 그라데이션 구체들이 여백에 색을 쏟아붓고, 풍성하고 둥근 기하학적 형태들이 각 표면에 기분 좋고 촉감이 느껴지는 무게감을 더한다.
- Raycast — 미드나잇 커맨드 센터, 코랄 네온
- Dimension — 은은한 조명이 비추는 작업 공간, 불투명 유리 패널
- Wiza — 황혼녘, 연보라빛 안개에 휩싸인 광물 탐사 관측소.
- Paste — 흰색 대리석 위에 놓인 황색 등불—브랜드의 따뜻한 그라데이션 로고가 눈 덮인 건물에서 유일하게 불이 켜진 창문처럼 드넓은 흰 공간에 떠 있는 듯하다.
- Reworkd — 제품 이미지의 부드러운 햇빛은 그 자체로만 존재감을 드러내는 유일한 색상이며, 바로 그 위에 있는 실행 버튼과 그라데이션 헤드라인이 그렇습니다.
- Reflect Notes — 별빛이 빛나는 보라색 공간은 어두운 천문대와 같으며, 그곳에서 음표들은 거의 검은색에 가까운 남색의 공허함을 배경으로 별자리처럼 떠다닙니다.
- Ameba — 한밤중의 제어실 – 불투명 유리 패널 안쪽에 선명한 파란색 빛이 번쩍인다.
- Todoist — 햇살이 가득한 작업 공간에는 종이 다이어리가 놓여 있다. 따뜻한 크림색 책상, 잉크로 쓴 메모, 빨간 펜 하나가 있다.