큐레이션 · 오픈 · 무료

Hausotto

거대하고 단색 타이포그래피를 중심으로 하는 미니멀 디자인 스튜디오 포트폴리오.

01

디자인 DNA

흰 방의 가혹한 타이포그래피 빌보드.

02

컬러

장식 색상 없이 철저히 단색의 고대비를 유지합니다.

03

타이포그래피

geometric-sans

• display216px · 400
• heading22px · 400
• body13px · 400

모든 타이포그래피는 철저히 단색이며 기하학적입니다. · 대형 디스플레이 텍스트에 음수 letterSpacing를 크게 적용합니다. · 텍스트 색상은 균일하게 단색 검정(#000000)입니다.

04

여백

관대한 수직 간격과 정확한 padding 단계.

05

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

최소한이며 상호작용하거나 밑줄이 그어진 요소에는 엄격히 1px solid black입니다.

06

레이아웃

넓은 여백과 견고하고 테두리 없는 격자형 그리드.

07

모션과 인터랙션

상호작용 상태에서 불투명도와 top 위치의 미세한 전환.

탐색 가능한 항목의 미세한 불투명도 변화. · 상호작용 요소에 대한 표준 포인터 커서.

08

컴포넌트

• button 배경이나 테두리 없이 텍스트만 있는 버튼, 단 쿠키 작업의 단색 검정 버튼은 예외.
• card 카드 없는 레이아웃; 데이터는 깔끔하고 테두리 없는 테이블로 표시됩니다.
• chip 없음.
• input 없음.
• hero 전체 뷰포트를 지배하는 거대하고 중앙 정렬된 타이포그래피 워드마크.

09

보이스와 금지 목록

• 톤 중립적이고 직설적이며 엄격히 기능적입니다.
• 헤드라인 거대하고 전부 대문자이며, 좁게 kerning된 기하학적 sans-serif.
• CTA 장식 없는 평범한 텍스트 또는 단순한 검정 상자.

• 보조 색상을 사용하지 마십시오 — 스크린샷은 철저히 흑백 팔레트를 보여줍니다.
• border-radius를 적용하지 마십시오 — 스크린샷은 날카롭고 둥글지 않은 직사각형 요소를 보여줍니다.
• 드롭 섀도우를 사용하지 마십시오 — 스크린샷은 완전히 평면적이고 2차원적인 표면을 보여줍니다.
• 장식적인 이미지를 사용하지 마십시오 — 스크린샷은 철저히 타이포그래피 기반 인터페이스를 보여줍니다.
• 글꼴 두께를 다양하게 하지 마십시오 — 스크린샷은 모든 텍스트에서 균일한 두께를 보여줍니다.
• 중앙 정렬된 여러 줄 텍스트를 사용하지 마십시오 — 스크린샷은 왼쪽 정렬 목록과 중앙 정렬된 단일 줄 헤더를 보여줍니다.
• 피하기: 장식적인 색상이나 그라디언트를 피할 것.
• 피하기: 둥근 모서리나 부드러운 형태를 피할 것.
• 피하기: 드롭 섀도우나 레이어드 표면을 피할 것.
• 피하기: 친근하거나 장난스러운 마이크로 카피를 피할 것.
• 피하기: 다양한 글꼴 두께를 피할 것; 균일한 두께를 유지할 것.
• 피하기: 중앙 정렬된 여러 줄 텍스트 블록을 피할 것.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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