큐레이션 · 오픈 · 무료

Hashicorp

클라우드 인프라 및 보안 관리를 위한 깨끗하고 권위 있는 플랫폼

01

디자인 DNA

클라우드를 위한 산업 제어 패널

02

컬러

단일 지배적인 기업 블루 악센트를 사용하는 고대비 다크 모드

03

타이포그래피

humanist-sans · monospace

• display52px · 600

대부분의 본문 텍스트에 system-ui sans-serif 사용 · 주요 제목 및 브랜딩에 맞춤 humanist sans 사용 · 코드 스니펫 및 기술 레이블에 mono 사용

04

여백

섹션 간 넉넉한 여백을 둔 엄격한 4px 기본 격자

05

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

1px solid rgb(213, 215, 219)

0px 1px 1px 0px rgba(97, 104, 117, 0.05) · 0px 2px 2px 0px rgba(97, 104, 117, 0.05) · 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)

06

레이아웃

유연한 격자 열을 가진 표준 중앙 정렬 컨테이너

07

모션과 인터랙션

hover 시 빠른 색상 및 배경 전환 · focus 및 상호작용 시 미묘한 투명도 변경

0.15s ease-in 내의 색상 및 background-color 변경 · 미묘한 scale 또는 색상 변화로 즉각적인 시각적 반응

08

컴포넌트

• button 미묘한 1px border 또는 4px radius를 가진 깨끗한 단색 배경. '시작하기'에는 기본 블루를, 다른 액션에는 보조 화이트/블랙을 사용합니다.
• card 미묘한 border 또는 shadow를 가진 단순한 컨테이너로, 종종 분류를 위한 gradient 배경을 특징으로 합니다.
• chip 상태 또는 레이블을 위한 연한 border의 알약 모양 배지.
• input 1px solid border와 focus 시 미묘한 내부 shadow를 가진 표준 폼 필드.
• hero 전체 폭의 다크 배경과 큰 타이포그래피, 그리고 두드러진 gradient mesh 또는 추상적인 조명 효과.

09

보이스와 금지 목록

• 톤 전문적이고 권위 있으며 기술적인
• 헤드라인 짧고 강렬하며 선언적인 (예: '클라우드를 올바르게 하세요')
• CTA 행동 지향적이고 직접적인 (예: '인프라 클라우드 만나보기', '시작하기')

• 복잡한 격자 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백을 둔 단순한 중앙 정렬 컨테이너를 보여줍니다.
• 다양한 색상을 사용하지 마세요 — 스크린샷은 흰색, 검은색, 그리고 단일 기본 블루 악센트로 구성된 팔레트를 보여줍니다.
• 장식용이나 필기체 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 깨끗하고 전문적인 sans-serif 타이포그래피를 보여줍니다.
• 가늘지 않은 두꺼운 border를 사용하지 마세요 — 스크린샷은 매우 낮은 투명도나 색상 대비의 미묘한 1px border를 보여줍니다.
• 무겁고 어두운 shadow를 사용하지 마세요 — 스크린샷은 거의 shadow가 없거나 깊이감을 위한 매우 미묘한 shadow를 보여줍니다.
• 크고 밝은 악센트 색상을 과도하게 사용하지 마세요 — 스크린샷은 기본 액션에 대해 블루 악센트가 매우 절제되어 사용되는 것을 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 비속어적인 언어
• 피하기: 화려하거나 지나치게 묘사적인 형용사
• 피하기: 공격적이거나 지나치게 판매적인 구두점
• 피하기: 과도한 느낌표

10

팩 안의 실제 스크린샷

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

11

System Prompt

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