← OpenDesign
큐레이션 · 오픈 · 무료
Yuga
거대한 타이포그래피에 기반한 고대비 브루탈리스트 디지털 존재감.
Bold Typography Dark Mode Minimal Aggressive Design Tools
01
디자인 DNA
대담한 미니멀한 거대한 디지털한 아방가르드한
절대적 어둠에서 조각된 거대한 디지털 존재.
02
컬러
#D3DE5DAccent
#FFFFFFInk
#000000BG
#131313BG quiet
rgba(255, 255, 255, 1)Line
엄격한 흑백 기반의 절대적 이진 대비.
03
타이포그래피
grotesque-sans
display 102px · 800heading 52px · 800body 14px · 400대형 디스플레이 텍스트에는 극도로 좁은 트래킹을 사용합니다. · 구조적 위계를 위해 무거운 두께를 유지합니다. · 대비를 위해 본문 텍스트는 작고 조밀하게 유지합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
엄격한 4px 그리드와 좁은 수직 간격입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
구조적 분리를 위한 얇고 고대비 테두리입니다.
06
레이아웃
1440 container
12 columns
24px gutter
768 / 1024 breakpoints
거대한 타이포그래피 앵커를 갖춘 넓은 어두운 캔버스입니다.
07
모션과 인터랙션
220ms micro
400ms small
700ms medium
cubic-bezier(0.19, 1, 0.22, 1) easing
매끄러운 불투명도 페이드 · 변환 가능한 구조적 변화
색상이나 불투명도 변화를 통한 시각적 상태 전환. · 즉각적인 구조적 피드백.
08
컴포넌트
button 극도로 둥근 고대비 알약 형태입니다. card 최소한의 패딩을 갖춘 매끄럽고 어두운 표면입니다. chip 분류를 위한 작고 알약 모양의 태그입니다. input 데이터 입력을 위한 깔끔하고 테두리가 있는 필드입니다. hero 거대한 타이포그래피와 중앙 로고를 갖춘 전체 화면 블랙 보이드입니다.
09
보이스와 금지 목록
톤 단호하고 직접적이며 타협하지 않는 어조. 헤드라인 거대한 글씨체로 짧고 임팩트 있는 문장. CTA 간결하고 행동 지향적. 대비를 줄이는 그레이를 사용하지 마세요 — 스크린샷은 대신 절대적인 블랙(#000000)과 화이트(#FFFFFF)를 보여줍니다 세리프 서체를 사용하지 마세요 — 스크린샷은 대신 무거운 기록산스(AK Monument Grotesk)를 보여줍니다 작은 디스플레이 크기를 사용하지 마세요 — 스크린샷은 대신 거대한 102px 헤더를 보여줍니다 넓은 트래킹을 사용하지 마세요 — 스크린샷은 대신 좁은 음수 자간(-4.8px)을 보여줍니다 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷은 대신 날카로운 모서리를 보여줍니다 미묘한 그래디언트를 사용하지 마세요 — 스크린샷은 대신 평평하고 고대비 블록을 보여줍니다 피하기: 친근하거나 캐주얼한 언어 피하기: 장식적이고 과도한 요소 피하기: 망설이거나 모호한 표현
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
대담한 디지털 에이전시나 스튜디오를 위한 미니멀하고 고대비 디자인 시스템입니다. 주요 배경은 절대적인 블랙(#000000)이며, 최대 임팩트를 위해 화이트(#FFFFFF) 텍스트를 사용합니다. 타이포그래피는 거대한 크기(최대 102px)와 좁은 자간을 사용하는 무거운 기록산스(AK Monument Grotesk)입니다. 레이아웃은 넓고 확장 가능하며, 구조적 명확성을 강조합니다. 주요 금지 사항: 부드러운 그레이나 저채도 톤을 절대 사용하지 마세요; 모든 대비를 이진적으로 유지하세요; 세리프 서체나 장식적 요소를 피하세요; 디스플레이 텍스트에는 극도로 좁은 트래킹을 유지하세요; 둥근 모서리 대신 날카로운 모서리를 사용하세요. 디자인은 공격적이고 타협하지 않으며, 부드러운 사용성보다 대담한 시각적 표현을 우선시합니다. 상호작용은 미묘하지만 매끄럽고, 불투명도와 변환 전환에 의존합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 스케일과 대비를 활용해 강력하고 기억에 남는 브랜드 존재감을 만드는, 브루탈리스트 디지털 디자인의 교과서적 사례입니다.