큐레이션 · 오픈 · 무료

Michaelspeichert

디자인 스튜디오를 위한 소박하고 타이포그래피 중심의 포트폴리오입니다.

01

디자인 DNA

공격적이고 과장된 타입과 고대비 그래픽으로 소통하는 브루탈리즘 미술관입니다.

02

컬러

극단적인 대비와 여백에 의존하는 엄격한 이중 색상 팔레트로 임팩트를 만듭니다.

03

타이포그래피

display-sans · humanist-sans

• display170px · 500
• heading60px · 300
• title54px · 500
• body28px · 500

강조와 내비게이션을 위해 자주 대문자를 사용합니다 · 더 밀도 높은 브루탈리즘 느낌을 위해 행간을 좁게 설정합니다 · 강한 대비를 만들기 위해 light(300)와 medium(500) 무게를 교차 사용합니다

04

여백

거대한 타이포그래피를 수용하기 위해 비대칭적이고 넓게 설정합니다

05

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

날카로운 1px 화이트 테두리를 사용하여 콘텐츠 블록을 프레임하고 분리합니다.

0px 0px 0px 1px rgba(255,255,255,1.0)

06

레이아웃

대형 몰입감 있는 이미지와 거대한 타이포그래피 블록을 지원하는 그리드 기반 구조입니다.

07

모션과 인터랙션

섬세한 reveal를 위한 부드러운 opacity 전환 · 상호작용 hover 상태를 위한 직접적인 transform

opacity 변경이나 섬세한 transform을 통해 즉각적인 시각적 피드백을 제공합니다. · 최소한의 지연으로 직접적인 반응을 보입니다.

08

컴포넌트

• button 텍스트 스타일링과 hover 상태에 의존하는 미니멀하고 테두리 없거나 날카로운 모서리의 버튼입니다.
• card 대담한 타이포그래피 오버레이가 적용된 고대비 이미지 컨테이너입니다.
• chip 대문자 스타일링의 단순한 텍스트 라벨입니다.
• input 날카로운 테두리로 정의된 깔끔하고 미니멀한 입력 필드입니다.
• hero 거대하고 표현적인 타이포그래피와 고대비 이미지로 지배되는 전체 화면 몰입 영역입니다.

09

보이스와 금지 목록

• 톤 대담하고 직접적이며 자신감 있는 어조입니다.
• 헤드라인 주요 시각 요소로 작용하는 거대하고 표현적인 타이포그래피입니다.
• CTA 점제적이지만 명확하며, 전체적인 타이포그래피 레이아웃에 통합되어 있습니다.

• 색상 gradient를 사용하지 마세요 — 스크린샷은 엄격한 흑백 팔레트를 보여줍니다
• 텍스트에 drop shadow를 사용하지 마세요 — 스크린샷은 플랫하고 고대비 타입을 보여줍니다
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 좌측 정렬과 표현적인 레이아웃의 혼합을 보여줍니다
• 작고 섬세한 타이포그래피를 사용하지 마세요 — 스크린샷은 거대하고 대담한 디스플레이 타입을 보여줍니다
• 과도하게 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 기하학적인 요소를 보여줍니다
• 복잡한 다중 컬럼 텍스트 블록을 사용하지 마세요 — 스크린샷은 단순하고 임팩트 있는 타이포그래피 구문을 보여줍니다
• 피하기: 부드러운 gradient 또는 drop shadow 사용을 피합니다
• 피하기: 작은 요소가 많은 복잡한 레이아웃을 피합니다
• 피하기: 장식용 폰트나 장난스러운 일러스트레이션을 피합니다
• 피하기: 채도 낮은 색상 팔레트나 부드러운 파스텔 톤을 피합니다
• 피하기: 전통적인 그리드 기반의 균일한 레이아웃을 피합니다
• 피하기: 두 개 이상의 폰트 패밀리를 사용하는 것을 피합니다

10

팩 안의 실제 스크린샷

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

11

System Prompt

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