큐레이션 · 오픈 · 무료

Doppler

엔지니어링 팀을 위한 안전한 시크릿 관리

01

디자인 DNA

디지털 시크릿을 위한 요새화된 금고

02

컬러

다크 배경 위의 고대비 네온과 은은한 퍼플 그라데이션

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display56px · 500
• display-sm32px · 500
• body16px · 400

헤드라인에는 기하학적 sans-serif 사용 · 본문에는 휴머니스 sans-serif 사용 · 큰 디스플레이 텍스트에는 좁은 자간 유지

04

여백

32px 기본 증가 단위를 가진 8px 그리드 시스템

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(255, 255, 255, 0.08)

0 4px 12px rgba(0, 0, 0, 0.15) · 0 8px 24px rgba(0, 0, 0, 0.2)

06

레이아웃

중앙 정렬된 콘텐츠와 풀-width 히어로, 2컬럼 기능 섹션

07

모션과 인터랙션

인터랙티브 요소의 부드러운 색상 전환 · focus 상태를 위한 미세한 transform 애니메이션 · 히어로 섹션의 그라데이션 흐름

0.3초 지속 시간의 색상 전환 · 미세한 scale 또는 opacity 변경

08

컴포넌트

• button 다크 텍스트의 솔리드 네온 그린 (#00F575), 둥근 모서리, hover 상태
• card 은은한 테두리와 둥근 모서리를 가진 다크 글래스 패널
• chip 둥근 모서리의 작은 상태 표시기
• input 다크 배경, 은은한 테두리, 검색 기능
• hero 플로팅 UI 목업과 굵은 헤드라인이 있는 큰 그라데이션 배경

09

보이스와 금지 목록

• 톤 보안 중심의 자신감 있고 기술적인 어조
• 헤드라인 보안에 대한 직접적이고 행동 지향적인 문구
• CTA 그린 포인트 버튼을 사용한 명확한 가치 제안

• 밝은 배경 사용 금지 — 스크린샷은 다크 퍼플/블랙 테마를 보여줌
• 여러 포인트 색상 사용 금지 — 스크린샷은 단일 네온 그린 포인트를 보여줌
• 세리프 폰트 사용 금지 — 스크린샷은 기하학적/휴머니스 sans-serif 폰트를 보여줌
• 좁고 빡빡한 간격 사용 금지 — 스크린샷은 여유로운 패딩 (32-70px)을 보여줌
• 날카로운 모서리 사용 금지 — 스크린샷은 둥근 모서리 (8-20px radius)를 보여줌
• 무뎌진 저대비 색상 사용 금지 — 스크린샷은 다크 위의 고대비 네온을 보여줌
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 일반적인 기업용 표현
• 피하기: 공포 조장

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko