Superpower
생물발광 건강 관리 센터
Superpower는 영화 같은 분위기의 사용자 인터페이스를 통해 진지한 임상적 가능성을 보여줍니다. 어두운 색상의 전체 너비 사진이 선명한 흰색 콘텐츠 영역으로 매끄럽게 전환되는 한편, 생동감 넘치는 일출 오렌지색이 시스템 전체에 은은하게 빛납니다. 브랜드의 특징을 반영하는 타이포그래피는 최소한의 네거티브 자간을 사용한 시그니처 기하학적 산세리프체로, 메타데이터의 경우 11px에서 디스플레이의 경우 66px까지 크기가 조절되며, 줄 간격은 크기가 커질수록 좁아집니다(디스플레이 1.00, 본문 1.40~1.50). 어두운 색상의 캡슐 모양 내비게이션 바가 이미지 위에 떠 있고, 캡슐 모양의 클릭 유도 버튼은 임상적인 정확성과 따뜻하고 생동감 넘치는 에너지 사이의 긴장감을 조성합니다. 표면은 대부분 평평하며, 시스템은 강한 입체감 대신 풍부한 여백, 은은한 아연색 구분선, 그리고 미묘한 그림자 패턴에 의존합니다. 색상은 최소한으로 사용되어 거의 모든 것이 검정색, 흰색 또는 아연 회색이며, 오렌지색은 동작 및 브랜딩에서 기능적인 강조 표시로만 나타납니다.
메인 이미지는 화면 전체를 차지하는 영화 같은 사진으로, 짙은 청록색 하늘을 배경으로 한 인물의 실루엣이 중심을 이룹니다. 의도적으로 어둡고 분위기 있는 이미지는 건강에 대한 약속과 대비를 이루며 감정적인 무게감을 더합니다. 보조 이미지는 라이프스타일 사진이 아닌, 제품 사진 스타일의 깔끔하고 좁은 이미지(주황색 대리석 무늬 멤버십 카드, 앱 스크린샷)를 사용합니다. 일러스트레이션, 3D 렌더링, 추상적인 그래픽은 전혀 사용하지 않았으며, 사진의 대비 자체가 시각적 정체성을 구성합니다. 멤버십 카드는 일출 색조의 유기적인 대리석 패턴/용암 램프로 장식되어 있으며, 유일한 시각적 장식 요소입니다. 아이콘은 7.5픽셀의 선 반경(부드러운 둥근 사각형)에 검은색 카본 소재의 은은한 테두리가 더해져 있습니다.
팔레트
상표
- Sunrise Coral
#fc5f2b— 주황색은 장식적인 디테일을 강조하거나 드물게 나타나는 단서를 부각하는 데 보조적인 색상으로 사용됩니다. 행동을 유도하는 주요 색상으로 사용해서는 안 됩니다. - Coral Glow
#ff8b64— 멤버십 카드의 장식적인 디자인을 위해 그라데이션 끝점과 선라이즈 코랄 색상을 조합했습니다.
중립적
- Carbon Black
#18181b— 본문, 플로팅 내비게이션 바 채우기, 제목, 아이콘 윤곽선. - Pure Black
#000000— 로고, 텍스트 기호, 대비가 뚜렷한 프레임 - Zinc Gray
#71717a— 본문, 추가 설명, 숨겨진 메타데이터, 보조 텍스트. - Ash Gray
#a1a1aa— 3차 텍스트, 비활성화된 경계, 비활성화된 상태 - Mist Gray
#e4e4e7— 섬세한 테두리선, 카드 윤곽선, 구분선, 단추 테두리. - Fog Gray
#f4f4f5— 표면의 미묘한 불규칙성, 차분한 배경, 메쉬 바탕 위에 겹쳐진 이미지.
타이포그래피
11픽셀에서 66픽셀로 · 8단계
- NB International Pro — 대사: Inter Tight · 요점 400, 700 · 디자인, 제목, 본문, 사용자 인터페이스, 내비게이션 등 모든 요소가 완벽하게 통합되어 있습니다. 핵심 솔루션은 크기에 따라 조절 가능한 (작은 본문의 경우 -0.025em에서 66px까지) 매우 좁은 음수 자간과 크기가 커질수록 압축되는 줄 간격입니다. 이를 통해 제목은 마치 포스터처럼 밀도 높은 인상을 주며, 의료 기술 분야의 경쟁사들과 차별화되는 독특한 위치를 차지합니다.
- NB International Mono Pro — 대사: JetBrains Mono · 요점 400 · 표 형식의 메타데이터, 마이크로텍스트 주석, 기술 레이블은 임상/기기적 접근 방식이 필요한 상황에서 최소한으로 사용됩니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 11px |
| 버튼 반경 | 9999px |
| 카드 반경 | 15px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 75px |
| 페이지 너비 | 1200px |
AI가 Superpower 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Visitors — 흰색 엔지니어링 도면
- Dock — 선릿 크림 페이퍼, 코발트 펄스
- Flying Papers — 토요일 아침 만화 속 고백
- Quizlet — 교실은 하얀 배경에 다양한 색깔로 장식되어 있다. 차분한 책상 뒤에는 파스텔톤 카드 네 장이 놓여 있고, 차가운 회색 벽과 남색 마커로 그어진 한 줄의 자국만이 유일하게 밝은 포인트를 이루고 있다.
- ON.energy — 미드나잇 스틸에 있는 노란색 고전압 경고 표지판
- Navigate — 게시판에 붙어 있는 커다란 스티커 세트: 크고 기괴한 글꼴, 모두 태블릿 형태, 그리고 로고처럼 반복되는 다섯 가지 색상의 아이콘
- Linear — 한밤중 정밀 기기
- Pop Site — 강렬한 타이포그래피 갤러리 – 흰 벽 위에 거대한 검은색 헤드라인이 떠 있고, 하나의 파란색 점이 의도를 표현하고 있다.
- Hyperstudio — 이 디자인은 흑요석에 새겨져 있습니다. 글자와 가는 선들이 순수한 검은색의 흰색 공간을 둘러싸고 있으며, 간간이 금색 나침반 표시가 방향을 알려줍니다.
- Pa'lais — 꿀에 흠뻑 적신 듯한 식물 스케치북. 크림색 종이, 푸른색 토일 드 주이 라인 일러스트, 따뜻한 색감이 어우러져 손으로 만든 요리책을 연상시키지만, 굵고 촘촘한 글꼴과 넉넉한 여백은 현대적이고 세련된 느낌을 자아낸다.
- Raus — 크림색 종이에 쓰인 아늑한 일기장 - 페이지마다 숲에서 온 엽서 같은 그림이 담겨 있다.
- Privy — 대리석 위에 잉크로 인쇄된 사설. 흰색 대리석 바탕에 촘촘하게 압축된 검은색 세리프체 헤드라인, 상단을 가로지르는 하나의 보라색 배너—절제된 권위를 표현한다.