큐레이션 · 오픈 · 무료

Studio Otto

엄격한 단색과 산세리프 그리드를 통해 창의적인 프로젝트를 보여주는 극적이고 텍스트 중심의 포트폴리오.

01

디자인 DNA

하이엔드 미니멀 갤러리 카탈로그 또는 극적인 건축 포트폴리오.

02

컬러

여백과 타이포그래피를 통해 대비와 가독성을 극대화하는 엄격한 단색 팔레트.

03

타이포그래피

grotesque-sans

• body11px · 400
• display11px · 400

제목과 카테고리에 대문자 변환 적용 · 모든 텍스트 요소에 걸쳐 타이트하고 컴팩트한 행간 조정 · 글꼴 두께, 대소문자, 자간만으로 엄격하게 정의된 단색 타이포그래피 계층

04

여백

밀도 높은 그리드를 위해 5px 및 15px padding 증분에 크게 의존하는 타이트한 마이크로 간격 시스템.

05

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

구조적 구분을 위해 간헐적으로 사용되는 날카롭고 1px의 검정색 실선 테두리.

06

레이아웃

강한 수직 정렬과 요소 주변으로의 컴팩트한 텍스트 래핑을 사용하는 밀도 높은 비대칭 다중 컬럼 그리드.

07

모션과 인터랙션

hover 상태에서의 부드러운 0.6초 배경 전환

인터랙티브 텍스트 요소에서의 미묘한 배경 전환 또는 상태 변경. · 포인터 커서를 통한 직접적인 내비게이션.

08

컴포넌트

• button 포인터 커서를 사용하는 텍스트 기반 인터랙티브 요소, 주로 대문자 산세리프 링크.
• card 컨테이너보다는 타이포그래피와 여백으로 정의된 비대칭 그리드 셀.
• chip 없음
• input 없음
• hero 텍스트와 이미지의 주요 그리드를 하단이나 오프센터로 밀어내는 거대한 여백.

09

보이스와 금지 목록

• 톤 객관적이고 전문적이며 엄격하게 정보 전달적인.
• 헤드라인 짧고, 대문자이며, 자간이 넓어진 산세리프 카테고리 라벨.
• CTA 전통적인 버튼 컴포넌트 없이 암시적이고 텍스트 기반의 내비게이션.

• 드롭 섀도우를 사용하지 마세요 — 스크린샷은 완전히 평평하고 테두리 없는 요소를 보여줍니다.
• border-radius를 사용하지 마세요 — 스크린샷은 모든 가시적 표면에 엄격한 직사각형성을 보여줍니다.
• 넓은 타이포그래피 스케일을 사용하지 마세요 — 스크린샷은 매우 균일하고 작은 텍스트 크기를 보여줍니다.
• 고채도 강조색을 사용하지 마세요 — 스크린샷은 엄격한 단색 흑백 팔레트를 보여줍니다.
• 크고 중앙 정렬된 hero 헤더를 사용하지 마세요 — 스크린샷은 텍스트 블록이 밀도 높고 하단 중심의 그리드에 맞춰져 있는 것을 보여줍니다.
• 관대한 padding을 사용하지 마세요 — 스크린샷은 타이트한 5px 및 15px 증분이 밀도 높은 시각적 리듬을 만들어내는 것을 보여줍니다.
• 피하기: 감성적 언어
• 피하기: 장식적 요소
• 피하기: 전통적인 UI 컴포넌트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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