큐레이션 · 오픈 · 무료

Typelist Upstatement

크리에이티브 타이포그래피를 위한 클린하고 표현적인 에디토리얼 쇼케이스.

01

디자인 DNA

표현적인 디스플레이 타입faces의 큐레이션된 도서관.

02

컬러

거의 흑백에 가까운 고대비 모노크롬 베이스에 생동감 있는 평면 기하학적 포인트만이 가끔씩 등장합니다.

03

타이포그래피

humanist-sans

• display22px · 500
• body16px · 400
• caption12px · 400

레이블과 내비게이션에 일관되게 대문자 변환을 사용합니다 · 에디토리얼 분위기를 살리기 위해 자간을 넉넉하게 적용합니다 · 특정 스타일적 강조를 위해 세리프 서체는 절제해서 사용합니다

04

여백

넓고 여유로우며, 대담한 시각 요소를 프레임하기 위해 크고 의도적인 여백에 크게 의존합니다.

05

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

최소화하거나 없음; 구분은 공간적 대비와 평면 색상으로 이룹니다.

06

레이아웃

밀접한 정보 그리드보다 시각적 임팩트를 우선시하는, 매우 비대칭적이고 갤러리와 같은 레이아웃입니다.

07

모션과 인터랙션

상호작용 요소에 부드럽고 의도적인 전환 · 급격한 움직임을 피하는 우아한 이징 곡선

미세한 시각적 상태 변화, 주로 색상이나 약간의 공간 이동을 포함합니다. · 강렬한 시각적 피드백 없이 직접적인 내비게이션 또는 상태 변경.

08

컴포넌트

• button 명시적인 테두리나 배경 모양 없이, 미니멀하고 순수하게 타이포그래피로 된 링크입니다.
• card 대담하고 평면적인 기하학적 형태(예: 큰 원형)가 주요 상호작용 단위로 기능합니다.
• hero 넓은 여백과 강렬한 평면 기하학적 색상 밴드를 결합한 눈에 띄고 미니멀한 구성입니다.

09

보이스와 금지 목록

• 톤 시각적 임팩트에 초점을 둔, 자신감 있고 큐레이션된 전문적 어조입니다.
• 헤드라인 대문자, 타이트한 자간, 그리고 디자인에 기하학적으로 통합되는 경우가 많습니다.
• CTA 절제되고 순수하게 타이포그래피에 의존하며, 전체적인 시각적 리듬에 따릅니다.

• 일반적인 UI 컴포넌트(표준 버튼이나 카드 등)를 사용하지 마세요 — 스크린샷은 대신 평면적이고 맞춤 제작된 기하학적 형태와 간단한 타이포그래피 링크를 보여줍니다.
• 복잡한 그림자나 그라디언트를 적용하지 마세요 — 스크린샷은 평면적이고 단색 영역과 뚜렷한 여백을 보여줍니다.
• 밀접하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 최소한의 콘텐츠를 프레임하는 넓고 의도적인 여백을 보여줍니다.
• 격식 없거나 지나치게 장난스러운 타이포그래피를 사용하지 마세요 — 스크린샷은 매우 체계적인 대문자 자간과 기하학적 배치를 보여줍니다.
• 다크 모드나 저채도, 저대비 팔레트를 사용하지 마세요 — 스크린샷은 고대비 검은색 텍스트와 선명한 색상이 있는 깨끗한 흰색 배경을 보여줍니다.
• 전통적인 UI 테두리에 의존하여 구분하지 마세요 — 스크린샷은 주요 시각적 구분 요소로 공간적 대비와 평면적 색상 블록을 보여줍니다.
• 피하기: 일반적이거나 지나치게 장식적인 UI 패턴을 피합니다
• 피하기: 복잡한 정보 구조를 피합니다
• 피하기: 그라디언트나 복잡한 그림자를 피합니다
• 피하기: 격식 없거나 지나치게 장난스러운 타이포그래피 처리를 피합니다
• 피하기: 다크 모드 인터페이스를 피합니다
• 피하기: 밀접하고 전통적인 그리드 레이아웃을 피합니다

10

팩 안의 실제 스크린샷

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

11

System Prompt

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