큐레이션 · 오픈 · 무료

Idheal Fr

IDHEAL은 굵고 구조적인 타이포그래피와 깔끔한 에디토리얼 격자를 사용하여 주거 및 도시 계획에 대한 연구를 발표합니다.

01

디자인 DNA

고급 학술 저널 또는 미술 전시 카탈로그

02

컬러

분류를 위한 선명한 크로마틱 악센트가 포함된 고대비 모노크롬 베이스

03

타이포그래피

grotesque-sans · transitional-serif · monospace

• display56px · 700
• body16px · 400

UI 요소와 제목에는 Helvetica Neue를 사용 · 서사 본문에는 New Century Schoolbook를 사용

04

여백

가독성을 위한 일관된 수직 간격이 적용된 격자 기반

05

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

칩용 1px 얇은 검정 또는 컬러 solid 테두리

4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)

06

레이아웃

거대한 글자가 콘텐츠 섹션을 구분하는 구조 격자

07

모션과 인터랙션

배경색 및 글꼴 크기 변경을 위한 부드러운 전환

클릭 가능한 요소에 대한 미묘한 배경색 변화 · 즉각적인 상태 변화

08

컴포넌트

• button solid 테두리와 미묘한 그림자가 있는 외곽선 알약 형태
• card 구조적 라인으로 분리된 플랫 콘텐츠 블록
• chip 작은 글씨 텍스트와 함께 둥근 알약 형태의 컬러 점
• input 미니멀리스트, 외곽선 또는 밑줄 스타일
• hero 글자가 뷰포트 전체를 가리는 거대한 타이포그래피 배열

09

보이스와 금지 목록

• 톤 학술적, 권위 있고, 정확한
• 헤드라인 굵고, 대문자이며, 매우 구조화된
• CTA 간단하고, 직접적이며, 종종 소문자 또는 문장 대소문자

• 주요 컨테이너에 부드럽고 둥근 모서리를 사용하지 않음 — 스크린샷은 날카로운 모서리와 엄격한 격자선을 보여줌
• 다색 그라데이션 배경을 사용하지 않음 — 스크린샷은 흰색, 회색 또는 검정색의 플랫하고 단색 블록을 보여줌
• 깊이감을 위해 무거운 드롭 그림자를 사용하지 않음 — 스크린샷은 매우 미니멀한, 방향성 그림자 또는 전혀 없음을 보여줌
• 중앙 정렬되고 흐르는 레이아웃을 사용하지 않음 — 스크린샷은 글자가 열을 만드는 엄격하고 비대칭적인 격자를 보여줌
• 주요 히어로 브랜딩에 소문자를 사용하지 않음 — 스크린샷은 'IDHEAL'을 모두 대문자로 보여줌
• 복잡한 UI 뒤에 탐색을 숨기지 않음 — 스크린샷은 아이콘이 있는 간단한 햄버거 메뉴를 보여줌
• 피하기: 장난스러운 언어
• 피하기: 과도한 장식 요소
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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