큐레이션 · 오픈 · 무료

Ueno

미니멀리즘의 고급 전략적 디자인 및 혁신 스튜디오.

01

디자인 DNA

고급 건축 회사의 웹사이트.

02

컬러

전략적 사진을 활용한 고대비 모노크롬.

03

타이포그래피

transitional-serif · humanist-sans

• display54px · 700
• body20px · 700
• caption16px · 700

헤드라인에는 좁은 자간의 트랜지션 세리프를 사용합니다. · 본문 및 UI 텍스트에는 볼드체 휴머니스트 산세리프를 사용합니다.

04

여백

섹션 간 넉넉한 수직 패딩과 간격.

05

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

최소화, 구분선에는 보통 1px solid black 또는 gray.

없음

06

레이아웃

명확한 타이포그래피 계층 구조를 가진 넓고 여유로운 여백.

07

모션과 인터랙션

콘텐츠 로딩을 위한 불투명도 페이드. · 진입 애니메이션을 위한 트랜스폼 슬라이드.

인터랙티브 요소의 미묘한 불투명도 변화. · 표준 포인터 인터랙션.

08

컴포넌트

• button 장식이 최소화된 단순한 텍스트 링크.
• card 미니멀리스트 카드, 주로 큰 이미지에 의존합니다.
• chip 존재하지 않음.
• input 뷰에 존재하지 않음.
• hero 풀블리드 이미지 위에 왼쪽 정렬된 큰 세리프 헤드라인.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 직접적.
• 헤드라인 대화적이나 권위 있는 세리프 헤드라인.
• CTA 절제된 텍스트 링크.

• 밝은 기본색을 사용하지 않습니다 — 스크린샷은 엄격한 모노크롬 팔레트를 보여줍니다.
• 둥근 모서리를 사용하지 않습니다 — 스크린샷은 날카롭고 직사각형 요소를 보여줍니다.
• 장식용 스크립트를 사용하지 않습니다 — 스크린샷은 표시용으로 깔끔한 트랜지션 세리프를 보여줍니다.
• 모든 텍스트를 중앙 정렬하지 않습니다 — 스크린샷은 강한 왼쪽 정렬을 보여줍니다.
• 두꺼운 드롭 섀도우를 사용하지 않습니다 — 스크린샷은 플랫한 표면 수준의 디자인을 보여줍니다.
• 저대비 텍스트를 사용하지 않습니다 — 스크린샷은 흰색 위의 고대비 검정색을 보여줍니다.
• 피하기: 기믹
• 피하기: 과도한 장식
• 피하기: 강렬한 컬러 액센트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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