핵심 브랜드 메시지를 위한 단일 고채도 시안 악센트가 포함된 고대비 단색 다크 모드입니다.
03
타이포그래피
geometric-sans · monospace
display88px · 300
h156px · 300
body-lg24px · 400
body18px · 400
caption14px · 400
overline12px · 600
표시용 텍스트에는 우아함을 유지하기 위해 얇은(300-400) 웨이트를 사용합니다 · 카테고리 레이블에는 자간을 넓힌 대문자 오버라인을 사용합니다 · 모든 텍스트 블록은 완벽한 좌측 정렬을 따릅니다 · 다크 배경에서 긴 글 읽기 편의성을 위해 큰 line-height를 사용합니다
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
128px
콘텐츠의 무게감을 강조하기 위해 큰 padding 블록(예: 40.5px)과 섹션 간 넉넉한 간격으로 이끄는 넉넉한 수직 리듬입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 6px
lg · 12px
pill · 9999px
극도로 미니멀합니다. 활성 요소의 미묘한 1px 하단선을 제외하고는 눈에 띄는 테두리보다는 색상 대비와 간격에 의존합니다.
rgba(0,0,0,0.3) 0px 32px 68px 0px
06
레이아웃
1200container
12columns
24pxgutter
768 / 1024breakpoints
대규모 타이포그래피 블록 다음에 깔끔한 2x2 사진 그리드가 이어지는 전체 너비의 다크 캔버스입니다.
07
모션과 인터랙션
150msmicro
300mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 시 부드러운 색상 및 투명도 전환 · 인터랙티브 요소의 미묘한 transform 변화 · 대규모 콘텐츠 블록을 위한 확장된 페이드 인
빠른 150ms 전환으로 미묘한 색상 변화 또는 배경 투명도 변화를 제공합니다. · 약간의 scale이나 투명도 감소로 즉각적인 피드백을 줍니다.
08
컴포넌트
button주로 pill형(9999px 반지름) hover 상태나 미묘한 배경 변화가 있는 텍스트 기반 링크입니다.
card배경에 의해 구분되는 깔끔하고 테두리 없는 사진 카드입니다.
chip드물게 사용됩니다. 주로 텍스트 기반의 내비게이션 요소입니다.
input미묘한 하단선이 있는 미니멀한 다크 테마 입력 필드입니다.
hero전체 뷰포트 높이를 차지하는 대규모 타이포그래피 중심의 히어로 섹션입니다.
09
보이스와 금지 목록
톤권위 있고 비전 지향적이며 매우 전문적입니다.
헤드라인영향력을 전달하기 위해 '동사 + 명사' 구조를 사용하는 굵고 선언적인 문장입니다.
CTA직접적이고 행동 지향적이며, 종종 'APPROACH'와 같은 대문자 오버라인으로 시작합니다.
장식용 테두리나 box shadow를 사용하지 마세요 — 스크린샷은 테두리 없고 어두운 평면 표면을 보여줍니다.
굵은 display 웨이트를 사용하지 마세요 — 스크린샷은 큰 헤더에 얇은(300-400) 웨이트를 사용합니다.
레이아웃을 여러 악센트 색상으로 복잡하게 만들지 마세요 — 스크린샷은 단일 시안 악센트(#1CB6E0)를 보여줍니다.
복잡한 다단계 애니메이션을 사용하지 마세요 — 스크린샷은 빠르고 미묘한 150ms 마이크로 인터랙션을 보여줍니다.
긴 문단에 중앙 정렬 텍스트를 사용하지 마세요 — 스크린샷은 완벽한 좌측 정렬 타이포그래피를 보여줍니다.
밝거나 라이트 모드 테마를 사용하지 마세요 — 스크린샷은 순수 검정(#000000) 배경을 보여줍니다.
이것은 프리미엄 다크 모드 바이오테크놀로지 및 AI 기업 웹사이트입니다. 순수 검정(#000000) 배경과 레이아웃 전체 너비에 걸친 크고 얇은(300-400) 기하학적 sans-serif 타이포그래피로 정의됩니다. 단일 고채도 시안 악센트(#1CB6E0)는 '아하' 순간과 같은 핵심 브랜드 구절을 강조하기 위해 절제되게 사용됩니다. 레이아웃은 넉넉한 수직 간격으로 완벽한 좌측 정렬을 따르며, 에디토리얼하고 권위 있는 느낌을 줍니다. 중요 금지 사항: 장식용 테두리나 그림자를 절대 사용하지 마세요, 표시용 텍스트에 굵은 웨이트를 절대 사용하지 마세요, 보조 악센트 색상을 절대 도입하지 마세요. 인터랙션 모델은 미니멀하며, 복잡한 모션보다는 빠른(150ms) 색상 및 투명도 전환에 의존합니다. 이 사이트는 기업용 다크 모드 디자인에 대한 '스튜디오급' 접근법을 보여줍니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
