← OpenDesign
큐레이션 · 오픈 · 무료
Idheal Fr
IDHEAL은 굵고 구조적인 타이포그래피와 깔끔한 에디토리얼 격자를 사용하여 주거 및 도시 계획에 대한 연구를 발표합니다.
Editorial Typography Curation Clean Grid
01
디자인 DNA
연구소 교육 주거 연구 IDHEAL
고급 학술 저널 또는 미술 전시 카탈로그
02
컬러
#FF00BCAccent
#000000Ink
#FFFFFFBG
#E5E5E5BG soft
#D9D9D9BG quiet
#51633CMuted
rgba(0,0,0,1)Line
분류를 위한 선명한 크로마틱 악센트가 포함된 고대비 모노크롬 베이스
03
타이포그래피
grotesque-sans · transitional-serif · monospace
display 56px · 700body 16px · 400UI 요소와 제목에는 Helvetica Neue를 사용 · 서사 본문에는 New Century Schoolbook를 사용
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
가독성을 위한 일관된 수직 간격이 적용된 격자 기반
05
표면 (라운드 / 그림자 / 경계선)
sm · 10px
md · 15px
lg · 38px
pill · 999px
칩용 1px 얇은 검정 또는 컬러 solid 테두리
4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
거대한 글자가 콘텐츠 섹션을 구분하는 구조 격자
07
모션과 인터랙션
200ms micro
300ms small
800ms medium
linear easing
배경색 및 글꼴 크기 변경을 위한 부드러운 전환
클릭 가능한 요소에 대한 미묘한 배경색 변화 · 즉각적인 상태 변화
08
컴포넌트
button solid 테두리와 미묘한 그림자가 있는 외곽선 알약 형태 card 구조적 라인으로 분리된 플랫 콘텐츠 블록 chip 작은 글씨 텍스트와 함께 둥근 알약 형태의 컬러 점 input 미니멀리스트, 외곽선 또는 밑줄 스타일 hero 글자가 뷰포트 전체를 가리는 거대한 타이포그래피 배열
09
보이스와 금지 목록
톤 학술적, 권위 있고, 정확한 헤드라인 굵고, 대문자이며, 매우 구조화된 CTA 간단하고, 직접적이며, 종종 소문자 또는 문장 대소문자 주요 컨테이너에 부드럽고 둥근 모서리를 사용하지 않음 — 스크린샷은 날카로운 모서리와 엄격한 격자선을 보여줌 다색 그라데이션 배경을 사용하지 않음 — 스크린샷은 흰색, 회색 또는 검정색의 플랫하고 단색 블록을 보여줌 깊이감을 위해 무거운 드롭 그림자를 사용하지 않음 — 스크린샷은 매우 미니멀한, 방향성 그림자 또는 전혀 없음을 보여줌 중앙 정렬되고 흐르는 레이아웃을 사용하지 않음 — 스크린샷은 글자가 열을 만드는 엄격하고 비대칭적인 격자를 보여줌 주요 히어로 브랜딩에 소문자를 사용하지 않음 — 스크린샷은 'IDHEAL'을 모두 대문자로 보여줌 복잡한 UI 뒤에 탐색을 숨기지 않음 — 스크린샷은 아이콘이 있는 간단한 햄버거 메뉴를 보여줌 피하기: 장난스러운 언어 피하기: 과도한 장식 요소 피하기: 지저분한 레이아웃
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
학술 또는 연구 기관을 위한 고도로 구조화된 에디토리얼 인터페이스를 설계하세요. 굵고 과장된 타이포그래피가 콘텐츠와 레이아웃 구조 모두로 기능하는 엄격한 격자를 사용하세요. 기본 팔레트는 모노크롬(검정, 흰색, #E5E5E5)이며 #FF00BC와 같은 선명한 악센트 색상을 강조에 사용합니다. 타이포그래피는 제목용 굵은 고트릭-산스와 본문용 세련된 트랜지셔널-세리프를 대조적으로 사용하세요. 중앙 정렬 레이아웃, 무거운 그림자, 장난스럽거나 둥근 UI 요소는 피하세요. 깔끔하고 고대비이며 지적인 미학을 유지하세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 타이포그래피를 주요 구조 요소로 사용하는 마스터 클래스로, 에디토리얼 디자인과 현대적이고 기능적인 웹 레이아웃을 결합합니다.