큐레이션 · 오픈 · 무료

Microwaver59

단색, 타이포그래피 중심, 그리고 높은 수준의 상호작용이 특징인 포트폴리오 인터페이스.

01

디자인 DNA

미니멀하고 실험적인 디자인 스튜디오의 랜딩 페이지.

02

컬러

고대비 단색 팔레트로, 오직 검정, 흰색, 그리고 하나의 미세한 회색만 사용합니다.

03

타이포그래피

monospace

• body19px · 700

모든 텍스트는 대문자로 표기합니다. · 기술적이고 균일한 미학을 위해 전체적으로 고정폭 서체를 사용합니다. · 모든 텍스트 요소에 넉넉한 자간을 적용합니다.

04

여백

4px 기본 그리드에 엄격하게 정렬하고, 내부 패딩은 타이트하고 일관되게 적용됩니다.

05

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

상호작용 요소와 구조적 구분을 위해 1px solid 테두리가 사용됩니다.

0 0 0 1px rgba(252, 252, 250, 1)

06

레이아웃

전체 폭을 사용하는 단일 컬럼 레이아웃으로, 각 섹션에 넉넉한 패딩이 적용됩니다.

07

모션과 인터랙션

로고 애니메이션이 진행 스피너로 변형 · hover 상태에서의 부드럽고 약간 탄성 있는 cubic-bezier 트랜지션 · 로딩 상태를 위한 페이드 인/아웃 효과

상호작용 요소에서 미세한 opacity 또는 밑줄 변화. · 상호작용 요소에서 커서가 포인터로 변경.

08

컴포넌트

• button 대문자 고정폭 텍스트를 사용하며, hover 시 기본적인 밑줄이 나타나는 날카롭고 직사각형의 버튼입니다.
• card 카드는 무거운 컨테이너보다는 타이포그래피와 미세한 hover 상태로 주로 정의됩니다.
• chip 제공된 스크린샷에는 명시적으로 존재하지 않습니다.
• input 제공된 스크린샷에는 명시적으로 존재하지 않습니다.
• hero 진행 표시기로 변형되는 역동적이고 중앙 정렬된 타이포그래피 로고 애니메이션입니다.

09

보이스와 금지 목록

• 톤 기술적이고 직접적이며, 매우 절제된 어조.
• 헤드라인 모두 대문자, 고정폭, 그리고 넉넉한 자간.
• CTA 직접적이고 대문자이며 미니멀합니다.

• 다채로운 그라데이션을 사용하지 마세요 — 스크린샷은 엄격한 단색 흑백 팔레트를 보여줍니다.
• 주요 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형의 모서리를 보여줍니다.
• 다양한 폰트 웨이트를 사용하지 마세요 — 스크린샷은 거의 모든 텍스트에 균일한 무거운 웨이트를 보여줍니다.
• 왼쪽 정렬 텍스트를 사용하지 마세요 — 스크린샷은 중앙 정렬된 대칭 레이아웃을 보여줍니다.
• 일반적인 문장 대소문자 표기를 사용하지 마세요 — 스크린샷은 모든 것을 대문자로 표시합니다.
• 넓은 자간을 사용하지 마세요 — 스크린샷은 타이트하고 압축된 텍스트를 보여줍니다.
• 피하기: 둥근 형태
• 피하기: 연한 그라데이션
• 피하기: 장식적 이미지
• 피하기: 다색 구성

10

팩 안의 실제 스크린샷

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

11

System Prompt

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