큐레이션 · 오픈 · 무료

Config Figma

장난스러운 추상 예술과 고대비 다크 모드를 특징으로 하는 대담하고 실험적인 컨퍼런스 이벤트 사이트입니다.

01

디자인 DNA

대담한 타이포그래피와 고대비 추상 예술을 사용하는 장난스럽고 실험적인 디자인 컨퍼런스 사이트입니다.

02

컬러

생생하고 채도 높은 그래픽 포인트가 있는 고대비 다크 모드 기반입니다.

03

타이포그래피

grotesque-sans · monospace

• display80px · 400
• h132px · 400

네비게이션 및 UI 요소의 텍스트는 일반적으로 대문자로 표시됩니다. · 큰 텍스트 크기에는 강한 음수 자간이 적용됩니다.

04

여백

패딩과 간격에 4px 기본 단위를 일관되게 사용합니다.

05

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

인터랙티브 테두리에는 1px solid rgba(255, 255, 255, 0.24)를 사용합니다.

06

레이아웃

좌측 정렬된 텍스트 콘텐츠와 우측 정렬된 추상적 그래픽 구성을 조합합니다.

07

모션과 인터랙션

표준 색상 및 배경 변경을 위한 150ms 부드러운 트랜지션. · 복잡한 요소를 위한 500ms의 더 긴 transform 트랜지션.

표준 CSS 트랜지션을 통한 색상 변경. · 표준 포인터 인터랙션.

08

컴포넌트

• button 1px 테두리가 있는 대문자 텍스트 링크 또는 반전된 단색 버튼입니다.
• card 장식 요소로 사용되는 겹쳐진 추상 그래픽 블록입니다.
• chip 대문자 스타일의 텍스트 기반 내비게이션 링크입니다.
• input 미니멀하고 평평한 텍스트 입력 필드입니다 (크게 부각되지 않음).
• hero 좌측에 큰 타이포그래피 에러 메시지, 우측에 쌓인 추상 예술을 배치한 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 직접적이고 명확하며 겸손하지 않은 톤입니다.
• 헤드라인 크고 대문자이거나 굵은 무게의 산세리프 구절입니다.
• CTA 대문자 텍스트 링크이며, 종종 테두리가 있습니다.

• 부드럽고 흐릿한 팔레트를 사용하지 마세요 — 스크린샷은 생생한 시안, 녹색, 주황색, 노란색 그래픽이 있는 고대비 검정 배경을 보여줍니다.
• 세리프 또는 장식용 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 그로테스크산스 타이포그래피를 보여줍니다.
• 부드러운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 깊이 효과 없이 평평하게 겹쳐진 그래픽 요소를 보여줍니다.
• 네비게이션에 소문자를 사용하지 마세요 — 스크린샷은 AGENDA와 SPEAKERS 같은 메뉴 항목에 모든 텍스트가 대문자임을 보여줍니다.
• 모든 콘텐츠를 중앙 정렬하지 마세요 — 스크린샷은 좌측 정렬된 텍스트 레이아웃과 우측 정렬된 그래픽의 조합을 보여줍니다.
• 복잡하고 다단계 양식을 사용하지 마세요 — 스크린샷은 미니멀하고 직접적인 텍스트 링크와 버튼을 보여줍니다.
• 피하기: 과장된 마케팅 카피
• 피하기: 지나치게 복잡한 문장 구조
• 피하기: 세리프 타이포그래피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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