Authkit
한밤중의 서리가 내린 유리 성당
AuthKit은 마치 밤에 제품을 발표하는 듯한 분위기를 연출합니다. 거의 검은색 바탕에 불투명한 유리 표면, 희미하게 보이는 선으로 이루어진 격자, 그리고 유리층을 통해 빛을 받아 빛나는 텍스트가 어우러져 있습니다. 글꼴은 어두운 배경에 거의 흰색이며, 유일하게 눈에 띄는 보라색 포인트가 기능적인 요소로 사용되었습니다. 각 인터랙티브 표면은 딱딱한 프레임 대신 부드럽고 얇은 청백색 선으로 둘러싸여 있습니다. 구성 요소들은 은은한 빛 위에 반투명 레이어로 배치되어 있으며, 카드는 종이 패널이 아닌 아래에서 조명을 받는 유리판처럼 보입니다. 여백은 넓고 리드미컬하며, 메인 요소는 기존의 분할 화면 레이아웃 대신 페이지 전체 너비를 차지하는 하나의 빛나는 로고이며, 그 주변을 떠 있는 듯한 유리 카드들이 둘러싸고 있습니다.
최대 너비 1200px의 전체 너비 어두운 캔버스에 중앙에 콘텐츠 컨테이너가 배치되어 있습니다. 메인 요소는 중앙에 위치한 빛나는 로고("AuthKit", 그라데이션 글꼴) 하나이며, 그 아래에는 눈썹 모양의 작은 텍스트가 있습니다. 로고 뒤/아래에는 로그인 양식이 있는 세 개의 플로팅 유리 카드가 부채꼴 모양으로 펼쳐집니다(왼쪽 카드는 왼쪽으로 기울어지고, 가운데 카드는 최대화되고, 오른쪽 카드는 오른쪽으로 기울어짐). 메인 요소 아래 중앙에는 밝은/어두운 테마 전환 버튼이 있습니다. 기능 행은 원형 아이콘 6개가 얇은 연결선으로 연결된 가로 타임라인입니다. 섹션 구성: 각 섹션은 중앙에 위치한 눈썹 모양의 텍스트로 시작하며, 텍스트는 흐릿한 가로선으로 둘러싸여 있습니다. 그 다음에는 중앙에 위치한 큰 제목(44-48px)이 오고, 마지막으로 은은한 본문(16-18px) 한 줄이 이어집니다. 본문의 최대 너비는 약 640px입니다. '사용자 정의' 섹션에는 중앙에 로그인 카드가 있고 그 주변 모서리에 UI 검사 패널(색상 팔레트, 반경 슬라이더, 로고 아이콘 선택기, 버튼 텍스트 필드, 페이지 배경 필드)이 배치된 브라우저 창 모형이 표시됩니다. 마치 디자인 도구 작업 공간과 같습니다.
시각적 디자인은 "유리 형태" 스타일로 제작된 로그인 폼 목업(이메일/비밀번호 입력란, 소셜 미디어 로그인 버튼, 비밀번호 없는 코드 입력)이 주를 이루며, 어두운 배경 위에 떠 있는 반투명 카드 형태로 표현됩니다. 기능 아이콘은 원형 무광 타일 안에 #d1e4fa 색상의 단색 선형 글리프로 구성되어 있습니다. 은은한 그리드(rgba(186,215,247,0.06)의 1px 간격 선)가 페이지 전체를 덮어 분위기를 조성하고, 원뿔형 그라데이션 스포트라이트가 주요 요소 상단에서 반짝입니다. 사진, 라이프스타일 이미지, 제품 스크린샷은 전혀 사용되지 않았으며, 제품 자체가 시각적 요소입니다. 로그인 필드는 어두운 스튜디오에 유리 프로토타입처럼 배치되어 있습니다.
팔레트
상표
- Void Violet
#663af3— 클릭 유도 버튼(CTA)의 기본 색상은 로그인 양식 내 "계속/제출" 버튼에만 사용되는 유일한 강조 색상입니다. 거의 검정색에 가까운 배경에 선명한 보라색이 사용되어 단색 계열의 색상 구성을 해치지 않으면서도 긴급성을 조성합니다.
중립적
- Midnight Canvas
#05060f— 페이지 배경, 카드의 가장 두꺼운 표면, 배지의 채워진 부분까지—모든 것이 떠 있는 듯한 거의 검은색의 바탕입니다. - Steel Plate
#2f343e— 돌출된 표면, 가상/보조 동작 버튼, 눈에 띄지 않는 패널 뒷면. - Fog Veil
#9da7ba— 카드에 적힌 본문은 읽을 수 있지만, 제목에 비해 배경으로 밀려나 있습니다. - Moon Mist
#c7d3ea— 본문, 추가 레이블, 음소거된 보조 텍스트 - Frost Glow
#d1e4fa— 본문 및 링크 텍스트, 아이콘 텍스트, 아이콘 채우기의 기본 색상은 기본적으로 빛나는 전경색입니다. - Ice Highlight
#d8ecf8— 어두운 배경에 밝은 텍스트, 반전된 레이블, 그리고 높은 대비의 헤드라인을 사용하세요. 클릭 유도 문구의 주요 색상으로는 사용하지 마세요. AuthKit 로고와 주요 헤드라인에는 밝은 파란색에서 연한 파란색으로 부드럽게 전환되는 그라데이션이 적용되었습니다.
타이포그래피
12px에서 48px로 · 8단계
- Untitled Sans — 대사: Inter · 요점 400, 500, 600, 700 · 본문, 사용자 인터페이스, 버튼, 입력 필드, 아이콘, 작은 제목 등 모든 기능적인 요소에 사용할 수 있는 범용 글꼴입니다.
- aeonikPro — 대사: Space Grotesk · 요점 400, 500 · AuthKit 브랜딩, 섹션 제목 및 본문 텍스트와 같은 제목만 표시하고 44-48px 크기에 500포인트 글꼴을 사용하면 브랜딩이 화려한 강조보다는 넓고 절제된 느낌을 줍니다.
- dotDigital — 대사: JetBrains Mono · 요점 400 · 모두 대문자로 된 텍스트("소개합니다", "확장 가능한 디자인", "밝게 빛나세요") - 0.10em 간격의 고정폭 대문자 텍스트는 본문 텍스트와 제목 사이를 은은하게 구분하는 역할을 합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 넓은 |
| 기본 단계 | 16px |
| 버튼 반경 | 999px |
| 카드 반경 | 16px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 120px |
| 페이지 너비 | 1200px |
AI가 Authkit 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Resend — 보라색 네온 컬러가 들어간 검은색 벨벳
- Gsap — 디자인 스튜디오의 움직이는 화이트보드. 거의 검은색 벽에 따뜻한 크림색 분필, 그리고 다섯 가지 색깔의 마커—애니메이션 분야별로 하나씩.
- Slash — 금박 장부가 있는 한밤중의 금고
- Raycast — 미드나잇 커맨드 센터, 코랄 네온
- Dimension — 은은한 조명이 비추는 작업 공간, 불투명 유리 패널
- Modal — 어두컴컴한 서버실 안의 형광 단말기 - 유일한 광원은 밝은 녹색이다.
- Reflect Notes — 별빛이 빛나는 보라색 공간은 어두운 천문대와 같으며, 그곳에서 음표들은 거의 검은색에 가까운 남색의 공허함을 배경으로 별자리처럼 떠다닙니다.
- LaunchDarkly — 네온사인으로 가득한 통제실은 칠흑 같은 패널 사이로 보라색 신호가 깜빡이는 어두운 조종실과 같다.
- Ameba — 한밤중의 제어실 – 불투명 유리 패널 안쪽에 선명한 파란색 빛이 번쩍인다.
- AgentQL — 밤에 터미널 위로 오로라가 보입니다.
- Neon — 어둠이 내린 서버실. 칠흑 같은 어둠 속에서 데이터와 사용자 상호작용에서만 빛이 새어 나온다.
- N8n — 한밤중의 워크플로우 엔진 – 어두운 서버실에서 상태 표시기와 데이터 스트림으로 밝혀진 실시간 자동화 캔버스의 느낌