큐레이션 · 오픈 · 무료

Icam Inox

스테인리스 스틸 전문가를 위한 타이포그래피 중심의 날카로운 산업 사이트.

01

디자인 DNA

스테인리스 스틸 제조업체를 위한 고급 산업 카탈로그.

02

컬러

선명한 강조색 없이 고대비 단색.

03

타이포그래피

grotesque-sans · humanist-sans

• display96px · 500
• body16px · 400
• h232px · 500

히어로 문구에는 매우 큰 글꼴 크기(96px 이상)를 사용합니다. · 디스플레이 텍스트의 자간(tracking)을 좁게 조정합니다. · 본문 텍스트는 보통 무게와 중성적인 간격을 유지합니다.

04

여백

여유롭고 넓게, 숨 쉴 공간을 위해 40px 및 72px 패딩 블록을 사용합니다.

05

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

어두운 배경에 얇은 1px 흰색 테두리.

0 4px 24px rgba(0,0,0,0.5)

06

레이아웃

전체 폭의 어두운 히어로 섹션 다음에 밝은 콘텐츠 블록.

07

모션과 인터랙션

스크롤 시 미묘한 페이드인. · 호버 상태에서 부드러운 전환.

미묘한 색상 변화 또는 불투명도 변경. · 최소한의 바운스로 즉각적인 피드백.

08

컴포넌트

• button 미니멀하며, 텍스트 기반 또는 간단한 아웃라인 스타일인 경우가 많습니다.
• card 미묘한 테두리와 둥근 모서리가 있는 어둡거나 밝은 컨테이너.
• input 양식을 위한 미니멀하고 깔끔한 입력 필드.
• hero 어두운 배경 위의 거대한 타이포그래피, 이미지와 겹치는 경우가 많음.

09

보이스와 금지 목록

• 톤 권위적이고 전문적.
• 헤드라인 짧고 강렬하며 매우 큽니다.
• CTA 화려한 버튼보다는 타이포그래피에 의존하는 절제된 스타일.

• 선명한 강조색을 사용하지 마세요 — 팔레트는 엄격히 단색(검정, 흰색, 회색)입니다.
• 디스플레이 텍스트를 72px 미만으로 설정하지 마세요 — 사이트는 임팩트를 위해 96px 이상의 거대한 타이포그래피를 사용합니다.
• 장식적이거나 세리프 글꼴을 사용하지 마세요 — 전체 시스템은 깨끗하고 중성적인 산세리프로 구축되었습니다.
• 복잡한 레이아웃을 만들지 마세요 — 사이트는 방대한 양의 여백을 사용합니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 깊이는 고대비와 레이어링을 통해 만들어집니다.
• 작고 알약 모양의 버튼을 사용하지 마세요 — 대화형 요소는 미니멀하며 종종 텍스트 전용입니다.
• 피하기: 장난스러운 언어.
• 피하기: 밝고 선명한 색상.
• 피하기: 과도한 UI 요소.
• 피하기: 둥글고 통통한 형태.
• 피하기: 작고 비좁은 타이포그래피.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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