큐레이션 · 오픈 · 무료

Mono Frm Fm

갤러리 분위기의 클린한 그리드 기반 하드웨어 쇼케이스.

01

디자인 DNA

모던 하드웨어 전시를 위한 갤러리 전시 카탈로그.

02

컬러

날카로운 검정 테두리로 그리드를 정의하는 고대비 단색 팔레트.

03

타이포그래피

grotesque-sans · humanist-sans

• display43px · 300
• heading39px · 300
• subhead25px · 300
• body16px · 300
• caption12px · 300

헤드라인 포함 거의 모든 텍스트에 라이트 폰트 웨이트(300)를 사용합니다. · 버튼과 라벨에는 대문자를 사용합니다. · 넉넉한 line-height로 타이트한 수직 리듬을 유지합니다.

04

여백

모든 간격을 지배하는 일관된 4px 기본 그리드, 메인 그리드 셀을 위한 넉넉한 padding 블록을 사용합니다.

05

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

2px solid #292929

06

레이아웃

모든 요소를 분리하는 두꺼운 2px 검정 테두리가 있는 엄격하고 비대칭적인 CSS Grid.

07

모션과 인터랙션

회전하는 원형 텍스트 애니메이션 · 콘텐츠 표시를 위한 부드러운 height 전환

미니멀한 시각 피드백; 인터랙션은 상태 변화보다 콘텐츠 표시에 초점. · 콘텐츠 확장 또는 내비게이션을 트리거.

08

컴포넌트

• button border-radius가 없고 대문자 텍스트 및 라이트 폰트 웨이트를 사용하는 미니멀한 윤곽선 버튼.
• card 레이아웃 그리드 테두리로 정의된 엄격한 직사각형 컨테이너, drop shadows나 둥근 모서리 없음.
• hero 제품 이미지, 설명 텍스트, 회전하는 원형 텍스트 요소를 결합한 비대칭적 다중 패널 레이아웃.

09

보이스와 금지 목록

• 톤 사유적, 우아하며 정제된.
• 헤드라인 시적이고 희망적인 느낌, 라이트 폰트 웨이트 사용.
• CTA 직설적, 대문자, 절제된.

• 둥근 모서리를 사용하지 마세요 — 스크린샷의 모든 요소는 날카로운 90도 모서리를 보여줍니다.
• drop shadows를 사용하지 마세요 — 스크린샷은 깊이감을 위해 완전히 단색 테두리에 의존합니다.
• 굵은 폰트 웨이트를 사용하지 마세요 — 스크린샷은 라이트(300) 웨이트만 독점적으로 사용합니다.
• 화려한 악센트 컬러를 사용하지 마세요 — 스크린샷은 엄격한 단색 팔레트를 고수합니다.
• 유기적이거나 비대칭적인 padding을 사용하지 마세요 — 스크린샷은 4px 기반의 엄격한 그리드 간격을 사용합니다.
• 유동적이거나 그라데이션 배경을 사용하지 마세요 — 스크린샷은 단색 #FFFFFF 및 #292929 블록을 사용합니다.
• 피하기: 둥근 UI 요소
• 피하기: drop shadows
• 피하기: 밝은 악센트 컬러
• 피하기: 장난스러운 언어
• 피하기: 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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