큐레이션 · 오픈 · 무료

Josephmark Studio

대형 타이포그래피와 미니멀하고 고대비 미학이 특징인 대담한 다크 테마 디지털 스튜디오 포트폴리오.

01

디자인 DNA

하이엔드 건축 회사: 깔끔한 라인, 자신감 있는 문장, 그리고 구조적 명확성에 중점을 둡니다.

02

컬러

보조 요소에 중성 오프화이트와 그레이를 사용하는 고대비 다크 모드.

03

타이포그래피

grotesque-sans

• display60px · 300
• h136px · 300
• body16px · 300
• small12px · 300

모든 텍스트는 기본 굵기 300(라이트)인 Scto Grotesk A를 사용합니다. · 디스플레이 및 제목 크기에 일관되게 마이너스 자간을 적용합니다. · 라벨과 태그에 대문자를 절제하여 사용합니다.

04

여백

스케일을 강조하기 위해 주요 섹션 간 넉넉한 수직 패딩(96px-112px)을 사용합니다.

05

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

최소한의 1px 테두리. 주로 흰색이나 회색을 사용하며, 태그 및 UI 요소에 주로 적용됩니다.

06

레이아웃

대형 타이포그래피 블록과 이미지 컨테이너를 갖춘 풀블레이드 수직 스택 레이아웃.

07

모션과 인터랙션

호버 시 매끄러운 불투명도 및 변환 전환. · 색상 및 배경 변경 시 표준 0.3초 전환.

인터랙티브 요소에 미세한 불투명도 또는 색상 변화. · 표준 포인터 상호작용.

08

컴포넌트

• button 얇은 테두리가 있는 알약 모양 태그(예: '브랜드', '디지털 제품')와 단순한 텍스트 링크.
• card 좌측 정렬된 타이포그래피와 하단의 알약 모양 카테고리 태그를 포함한 대형 이미지 기반 프로젝트 쇼케이스.
• chip 얇은 테두리가 있는 소형 알약 모양 카테고리 태그.
• hero 대형 좌측 정렬 라이트 타이포그래피가 특징인 풀 뷰포트 다크 섹션.

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 야심 찬 어조.
• 헤드라인 라이트 폰트 웨이트의 크고 선언적인 문장.
• CTA 최소화하고 눈에 띄지 않는, 주로 단순한 텍스트 링크나 미세한 태그.

• 무거운 폰트 웨이트를 사용하지 마세요 — 스크린샷은 라이트(300) 웨이트를 일관되게 사용하는 것을 보여줍니다.
• 화려하고 채도 높은 강조색을 사용하지 마세요 — 스크린샷은 중성 오프화이트를 사용하는 엄격한 단색 팔레트를 보여줍니다.
• 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 모든 주요 텍스트 블록이 좌측 정렬되어 있는 것을 보여줍니다.
• 복잡한 드롭 섀도우를 사용하지 마세요 — 스크린샷은 눈에 보이는 그림자가 없는 완전히 평평한 표면을 보여줍니다.
• 좁은 수직 간격을 사용하지 마세요 — 스크린샷은 섹션 간 넉넉한 패딩(96px+)을 보여줍니다.
• 표준 직사각형 버튼을 사용하지 마세요 — 스크린샷은 알약 모양 태그와 얇은 테두리 태그를 대신 사용하는 것을 보여줍니다.
• 피하기: 지나치게 장식적인 요소
• 피하기: 화려하고 불협화음의 강조색
• 피하기: 밀집된 정보 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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