프리미엄 편집 미학과 장난기 넘치고 선명한 디자인 강조를 결합한 하이 프로필 기술 컨퍼런스 랜딩 페이지.
02
컬러
#FFFFFFInk
#000000BG
#E3E3E3Muted
rgba(255, 255, 255, 0.16)Line
선명한 기하학적 형태와 다채로운 인물 배경이 서로 주의를 끌지 않고 두드러질 수 있도록 하는, 극명한 고대비 다크 모드 기반.
03
타이포그래피
grotesque-sans · humanist-sans · monospace
display56px · 400
heading32px · 700
subhead24px · 400
body18px · 400
caption16px · 400
label13px · 400
작은 카테고리 라벨에는 명확한 계층을 만들기 위해 대문자 letterSpacing를 사용합니다. · 강렬한 존재감을 보장하기 위해 큰 디스플레이 텍스트에는 좁은 음의 letterSpacing를 유지합니다. · 다크 배경에서의 깔끔한 가독성을 위해 regular 및 medium 두께를 선호합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
120px
레이아웃은 주요 섹션(예: 수직 120px)에 넓은 패딩과 일관된 24px 거터 시스템을 결합하여 넓고 숨 쉴 듯한 구조를 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 0px
lg · 20px
pill · 999px
주요 액션 버튼과 구분선에는 미묘한 분리를 위해 종종 rgba(255, 255, 255, 0.16)를 사용하는 얇은 1px 테두리가 사용됩니다.
rgb(128, 128, 128) 0px 0px 5px 0px
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
페이지는 데스크톱용으로 넓고 중앙 정렬된 컨테이너를 사용하며, 모바일 우선 레이아웃으로 전환될 때 수평 패딩이 크게 줄어듭니다.
07
모션과 인터랙션
200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
인터랙티브 요소에 대한 0.2초 동안의 표준 background-color, border-color 및 color 전환. · hover 또는 focus 상태를 위한 0.3초 ease-in-out을 사용하는 Transform 기반 애니메이션.
즉각적인 시각적 피드백을 제공하기 위한 background-color, border-color 또는 color의 미묘한 0.2초 전환. · 포인터 커서가 있는 요소는 표준 0.2초에서 0.3초의 이징 전환을 트리거합니다.
08
컴포넌트
button흰색 테두리와 둥근 모서리를 가진 크고 투명한 고스트 버튼입니다.
card단색, 선명하고 채도 높은 색상 블록 위에 회색조 인물 사진이 겹쳐진 그리드 기반 발표자 카드입니다.
chip표시되는 것이 없습니다.
input표시되는 것이 없습니다.
hero거대한 타이포그래피, 최소한의 이벤트 상세 정보, 그리고 눈에 띄는 기하학적 일러스트레이션 스트립이 특징인 지배적인 다크 섹션입니다.
09
보이스와 금지 목록
톤전문적이고 권위적이면서도 친근하고 창의적인 어조.
헤드라인즉각적인 주의를 끄는 크고 굵고 강렬한 산세리프 텍스트.
CTAUI와 자연스럽게 어우러지는 크고 명확한 타이포그래피를 가진 미니멀리스트 투명 고스트 버튼.
흰색 배경을 사용하지 마세요. 스크린샷은 메인 레이아웃의 주요 배경이 검정(#000000)임을 보여줍니다.
복잡하거나 유기적인 형태를 사용하지 마세요. 스크린샷은 원, 사각형, 육각형과 같은 엄격한 기하학적 기본 도형을 보여줍니다.
밀집된 단락 텍스트를 사용하지 마세요. 스크린샷은 명확하고 짧으며 가독성이 높은 타이포그래피 블록을 보여줍니다.
인물 사진에 단색 흰색 배경을 적용하지 마세요. 스크린샷은 선명한 단색 블록 위에 겹쳐진 회색조 사진을 보여줍니다.
무거운 그림자 시스템을 사용하지 마세요. 스크린샷은 최대 하나의 미묘한 회색 그림자와 함께 거의 평면적인 최소한의 레이어링을 보여줍니다.
장난기 있거나 둥글고 통통한 타이포그래피를 사용하지 마세요. 스크린샷은 엄격하고 깔끔한 grotesque-sans 및 humanist-sans 폰트 카테고리를 보여줍니다.
피하기: 지나치게 기업적이거나 딱딱한 언어를 피합니다.
피하기: 지나치게 장식적이거나 산만한 세리프 서체 사용을 피합니다.
피하기: 과도한 보조 요소나 조밀한 텍스트 블록으로 인터페이스를 복잡하게 만드는 것을 피합니다.
Figma의 Schema를 위한 이벤트 랜딩 페이지를 프리미엄하고 편집적인 다��� 모드 미학으로 디자인합니다. 주요 배경은 순수한 검정(#000000)이며 선명한 흰색(#FFFFFF) 텍스트로 강렬한 대비를 만듭니다. 큰 디스플레이 요소에는 grotesque-sans, 본문에는 humanist-sans를 특징으로 하는 깔끔한 타이포그래피 계층을 활용합니다. 시각적 아이덴티티는 장난기 넘치고 고채도 기하학적 형태와 단색 블록(시안, 녹색, 보라색 등)을 도입하여 회색조 사진을 프레이밍함으로써 고조됩니다. 흰색 배경을 사용하지 마세요. 복잡한 유기적 형태를 사용하지 마세요. 밀집된 텍스트 블록으로 레이아웃을 복잡하게 만들지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
