큐레이션 · 오픈 · 무료

Cthdrl

대형 타이포그래피와 모노스페이스 디테일을 활용하여 전략적 세련미를 전달하는 대담한 다크 테마 에이전시 포트폴리오입니다.

01

디자인 DNA

디지털 브랜드를 위한 하이엔드 건축 스튜디오.

02

컬러

깊은 검정 배경 위에 따뜻한 오프화이트 잉크를 사용하는 엄격한 고대비 단색 팔레트입니다.

03

타이포그래피

grotesque-sans · monospace

• display121px · 400
• body11px · 400
• caption32px · 400

04

여백

명확한 콘텐츠 영역을 정의하는 넉넉한 수평 및 수직 padding을 사용합니다.

05

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

상단 헤더와 밑줄에 소폭 1px border를 절제되게 사용합니다.

06

레이아웃

비대칭 분할 화면과 다중 열 격자 레이아웃을 사용합니다.

07

모션과 인터랙션

페이지 로드 시 미세한 opacity 페이드 및 transform 슬라이드.

최소한의 시각적 변화, 주로 색상 전환 또는 opacity 변화. · 표준 링크 동작.

08

컴포넌트

• button 최소한의 텍스트 기반 링크, 대문자 사용, 때로는 밑줄 처리.
• card 전통적인 카드를 사용하지 않으며, 모듈형 격자로 콘텐츠를 배치합니다.
• chip 해당 없음
• input 해당 없음
• hero 기하학적 배경 라인 그래픽을 활용한 전폭의 대형 타이포그래피.

09

보이스와 금지 목록

• 톤 권위 있고 지적이며 미래지향적인 어조.
• 헤드라인 대문자, 고밀도 또는 타이트한 자간의 대형 타이포그래피.
• CTA 절제된 대문자 텍스트 링크, 때로는 모노스페이스 스타일.

• 둥근 모서리를 사용하지 마세요 — 스크린샷에서는 날카롭고 0px radius 모서리가 보입니다.
• 밝고 채도 높은 강조색을 사용하지 마세요 — 스크린샷에서는 엄격한 단색 팔레트가 보입니다.
• 문장 케이스 본문 텍스트를 사용하지 마세요 — 스크린샷에서는 대문자 사용이 확연합니다.
• 작고 밀집된 단락에 의존하지 마세요 — 스크린샷에서는 대형의 독립적인 타이포그래피 문구를 사용합니다.
• 장식적이거나 필기체 폰트를 사용하지 마세요 — 스크린샷에서는 철저하게 구조화된 grotesque-sans 및 모노스페이스 폰트를 사용합니다.
• 카드나 버튼과 같은 복잡한 UI 컴포넌트를 사용하지 마세요 — 스크린샷에서는 깔끔한 모듈형 타이포그래피에 의존합니다.
• 피하기: 상투적인 표현
• 피하기: 영업용 전문 용어
• 피하기: 비격식적인 언어
• 피하기: 가벼운 색상
• 피하기: 무거운 UI 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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