큐레이션 · 오픈 · 무료

Thebeamslondon

실험적 타이포그래피 중심의 문화 공간 아이덴티티.

01

디자인 DNA

시각적 커뮤니케이션의 경계를 탐구하는 현대 갤러리 프로그램.

02

컬러

최대의 시각적 임팩트를 위해 고대비의 흑백에 의존하는 철저한 단색 팔레트.

03

타이포그래피

neue-haas-grotesk

• display160px · 400
• heading38px · 400
• body19px · 400

디스플레이 크기에는 좁은 음수 트래킹을 사용합니다. · 모든 스케일에서 균일한 폰트 웨이트 400을 유지합니다. · 디스플레이 텍스트는 라인 높이를 компак트하게 유지하지만, 작은 크기에서는 가독성을 위해 넉넉하게 유지합니다.

04

여백

거대한 타이포그래피 요소를 수용하도록 스케일업되는 구조화된 4px 기본 격자.

05

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

섹션을 구분하고 입력 필드를 정의하기 위해 사용되는 얇고 단일 픽셀의 검은색 테두리.

06

레이아웃

전통적인 콘텐츠 블록보다 거대한 타이포그래피 요소를 우선시하는 미니멀한 엣지투엣지 격자.

07

모션과 인터랙션

반복 텍스트를 위한 연속적인 수평 마키 스크롤링. · 인터랙티브 요소의 미묘한 가시성 전환.

미묘한 불투명도 또는 색상 변화. · 직접 탐색 또는 폼 제출.

08

컴포넌트

• button '>' 접미사가 있는 미니멀한 텍스트 기반 링크.
• card 존재하지 않음, 레이아웃은 전체 너비 섹션을 사용.
• chip 존재하지 않음.
• input 하단 테두리만 있는 단일 줄 텍스트 입력.
• hero 구조적 패턴을 만들기 위해 문구가 수직으로 반복되는 거대한 타이포그래피 처리.

09

보이스와 금지 목록

• 톤 직설적이고 자신감 있으며 예술적.
• 헤드라인 타이포그래피가 시각적 작업을 수행하도록 허Brief하고 임팩트 있는 진술.
• CTA 미니멀하고 기능적인, 단순한 텍스트 링크 사용.

• 여러 색상을 사용하지 마십시오 — 스크린샷은 철저한 단색 팔레트를 보여줍니다.
• 요소에 border-radius를 추가하지 마십시오 — 스크린샷은 날카롭고 네모난 모서리를 보여줍니다.
• 세리프 폰트를 사용하지 마십시오 — 스크린샷은 Neue Haas Grotesk의 일관된 사용을 보여줍니다.
• 드롭 그림자나 부드러운 깊이 효과를 사용하지 마십시오 — 스크린샷은 평면에 의존합니다.
• 레이아웃을 작은 컴포넌트로 복잡하게 만들지 마십시오 — 스크린샷은 크고 개방된 공간을 사용합니다.
• 장난스럽거나 장식적인 아이콘을 사용하지 마십시오 — 스크린샷은 '+'와 '>'와 같은 필수적인 기호만 사용합니다.
• 피하기: 장식적 요소
• 피하기: 화려한 그라데이션
• 피하기: 둥근 모서리
• 피하기: 무거운 그림자
• 피하기: 세리프 폰트
• 피하기: 이모지 또는 장난스러운 아이콘

10

팩 안의 실제 스크린샷

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

11

System Prompt

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