깊은 블랙 위에 날카로운 화이트 텍스트를 사용하고, 보조 정보에는 무난한 그레이를 사용하는, 단일 민트 그린 액센트가 있는 고대비 다크 모드.
03
타이포그래피
geometric-sans · monospace
display56px · 400
h240px · 400
body16px · 400
깔끔하고 현대적이며 가독성이 뛰어난 계층 구조를 유지하기 위해 모든 텍스트에 'The Future' (기하학적 sans-serif)를 사용합니다. · 가볍고 전문적인 느낌을 위해 폰트 두께를 400으로 일관되게 유지합니다. · 대형 디스플레이 텍스트에는 좁은 글자 간격을 사용하여 더 응집력 있고 강렬한 시각적 블록을 만듭니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
요소 간 균일한 간격을 보장하는 일관된 4px 기반 그리드 시스템으로, 주요 섹션과 레이아웃 컨테이너에는 더 큰 배수를 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 20px
pill · 9999px
내비게이션과 버튼의 구조적 정의를 위해 주로 1px 테두리를 사용하는 최소화되고 기능적인 스타일.
none
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
텍스트가 왼쪽, 일러스트레이션이 오른쪽에 있는 2열 분할 풀폭 히어로로 시작하여, 수평 카드가 있는 중앙 정렬 단일 열 콘텐츠 섹션이 이어짐.
07
모션과 인터랙션
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
인터랙티브 요소의 background-color, border-color, fill에 대한 부드러운 트랜지션. · 버튼과 링크의 hover 상태에 대한 Transform 기반 애니메이션(scale, translate). · 요소의 페이드 인/아웃을 위한 Opacity 트랜지션.
버튼 및 내비게이션 링크와 같은 인터랙티브 요소에 대한 미묘한 배경색 변화와 Transform 기반 스케일링. · 미세한 transform(scale)과 색상 트랜지션을 통한 즉각적인 피드백.
08
컴포넌트
button흰색 배경에 검정 텍스트, 작은 '+' 아이콘과 미묘한 둥근 모서리를 가진 알약 모양의 버튼.
card부드러운 오프화이트 배경, 둥근 모서리, 명확한 왼쪽에서 오른쪽 흐름(아이콘, 제목, 설명, 배지)을 가진 수평 카드.
chip밝은 회색 배경에 어두운 텍스트를 가진 작은 알약 모양의 태그로, 분류에 사용됨.
input명확한 타이포그래피와 넉넉한 패딩에 초점을 맞춘 미니멀한 스타일링의 단순한 텍스트 필드.
hero왼쪽에는 대규모 타이포그래피, 오른쪽에는 겹치는 선과 레이블이 있는 상세한 점선 지구 일러스트레이션이 포함된 고impact 다크 섹션.
09
보이스와 금지 목록
톤보안, 확장성, 글로벌 임팩트를 강조하는 권위적이고 전문적이며 미래 지향적인 어조.
헤드라인가치 제안을 명확히 진술하는 대담하고 대규모적이며 선언적인 문장.
CTA두드러진 알약 모양 버튼 내 '문의하기'와 같은 간결한 문구를 사용하는 직접적이고 행동 지향적인 스타일.
밝고 다채로운 그라디언트를 사용하지 않습니다 — 스크린샷은 단일 민트 그린 액센트가 있는 날카로운 고대비 다크 테마를 보여줍니다.
무겁고 화려한 타이포그래피를 사용하지 않습니다 — 스크린샷은 일관된 두께를 가진 깔끔한 기하학적 sans-serif 폰트를 보여줍니다.
버튼과 카드에 날카로운 사각형 모서리를 사용하지 않습니다 — 스크린샷은 부드럽고 둥글며 알약 모양의 요소를 보여줍니다.
히어로에 분주한 사진 배경을 사용하지 않습니다 — 스크린샷은 스타일화된 기술적인 점선 지구 일러스트레이션을 보여줍니다.
과도한 드롭 섀도우나 3D 효과를 사용하지 않습니다 — 스크린샷은 최소한의 깊이를 가진 평면적이고 표면 기반의 디자인을 보여줍니다.
좁고 밀폐된 간격을 사용하지 않습니다 — 스크린샷은 넉넉한 패딩과 요소 간 명확한 분리를 보여줍니다.
다양한 색상을 사용하지 않습니다 — 스크린샷은 블랙, 화이트, 그레이, 단일 액센트 컬러로 제한된 팔레트를 보여줍니다.
블록체인 회사를 위한 정교하고 기업 등급의 기술 웹사이트를 디자인하십시오. 깊은 블랙(#000000) 배경에 고대비 화이트(#FFFFFF) 텍스트와 보조 요소를 위한 무난한 그레이(#808080)를 사용하십시오. 핵심 하이라이트를 위한 단일 선명한 민트 그린(#22E6A8) 액센트를 통합하십시오. 깔끔한 기하학적 sans-serif 폰트(예: 'The Future')와 타이트하고 전문적인 스케일을 적용하십시오. 엄격한 4px 간격 그리드를 유지하고 부드러운 알약 모양 컴포넌트를 사용하십시오. 레이아웃은 기술 일러스트레이션이 포함된 강력한 2열 히어로와 수평 카드가 있는 명확한 1열 콘텐츠 섹션을 특징으로 해야 합니다. 모든 상호작용이 0.2초의 미묘한 트랜지션으로 부드럽도록 하십시오. 명확성, 권위, 그리고 프리미엄하고 미래지향적인 미학에 초점을 맞추십시오. 절대 무거운 섀도우, 날카로운 모서리, 또는 지나치게 복잡한 다채로운 팔레트를 사용하지 마십시오.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
