큐레이션 · 오픈 · 무료

Studiothomas

거대한 타이포그래피와 하나의 강렬한 오렌지 악센트에 의존하는 미니멀리스트 디자인 스튜디오 사이트.

01

디자인 DNA

대담한 작품과 강렬한 시그니처 컬러가 있는 갤러리.

02

컬러

강렬한 오렌지 포인트를 가진 고대비 흑백 모노크롬 베이스.

03

타이포그래피

geometric-sans

• display120px · 400
• h186px · 400
• h240px · 400
• body16px · 400

지정된 Moderat 타이포그래피 패밀리를 사용합니다. · 디스플레이 및 본문 모두에 글꼴 두께 400을 크게 의존합니다. · 대형 헤드라인에는 자간을 좁게 유지합니다.

04

여백

명시적 패딩 블록(40px, 100px)으로 넉넉한 여백을 확보합니다.

05

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

구분자로 절제되게 사용되는 날카로운 1px 블랙 라인.

06

레이아웃

전체 폭 히어로 블록 뒤에 엣지 투 엣지 프로젝트 이미지가 이어집니다.

07

모션과 인터랙션

인터랙티브 요소의 색상 및 불투명도 전환. · Transform 기반 커서 또는 hover 효과.

ease-in-out을 사용한 색상 전환. · 미묘한 선형 불투명도 변화.

08

컴포넌트

• button 단순한 텍스트 또는 얇은 햄버거 아이콘을 사용한 미니멀리스트 내비게이션.
• card 오버레이된 타이포그래피가 있는 엣지 투 엣지 이미지 블록.
• hero 중앙 정렬된 텍스트가 있는 거대한 솔리드 컬러 블록.

09

보이스와 금지 목록

• 톤 자신감 있고, 미니멀하며, 전문적.
• 헤드라인 거대한, 소문자 또는 문장 대문자 지오메트릭 sans-serif.
• CTA 미묘한 텍스트 링크.

• 여러 악센트 색상을 사용하지 마세요 — 스크린샷에는 엄격한 오렌지 악센트(#FF4F00)가 표시됩니다.
• 세리프 폰트를 사용하지 마세요 — 스크린샷에는 지오메트릭 sans-serif(Moderat)가 표시됩니다.
• 메인 블록에 그림자나 둥근 모서리를 추가하지 마세요 — 스크린샷에는 날카로운 모서리가 표시됩니다.
• 헤드라인에 볼드 두께를 사용하지 마세요 — 스크린샷에는 글꼴 두께 400이 표시됩니다.
• 장식적인 아이콘이나 그래픽을 추가하지 마세요 — 스크린샷에는 타이포그래피만으로 된 디자인이 표시됩니다.
• 헤드라인에 넓은 자간을 사용하지 마세요 — 스크린샷에는 좁은 네거티브 트래킹이 표시됩니다.
• 피하기: 지저분함
• 피하기: 장식적인 그라데이션
• 피하기: 둥근 모서리

10

팩 안의 실제 스크린샷

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

11

System Prompt

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