큐레이션 · 오픈 · 무료

Thebrowser Company

문학적 감수성으로 구축된 개발자 도구를 위한 세련되고 에디토리얼 중심의 프레젠테이션.

01

디자인 DNA

빈티지 문학 전문지와 현대 소프트웨어 장인정신의 만남

02

컬러

따뜻한 오프화이트와 깊은 블랙에 의존하여 최대의 에디토리얼 대비를 만드는 철저한 두 톤 팔레트

03

타이포그래피

transitional-serif · geometric-mono

• display36px · 400
• caption14px · 400
• micro10px · 400

모든 본문 카피와 헤드라인에 트랜지셔널 세리프 사용 · 모든 UI 라벨, 내비게이션, 마이크로 카피에 지오메트릭 모노 사용 · 모노 라벨에 대문자와 넉넉한 자간 적용

04

여백

에디토리얼적 호흡 공간을 강조하기 위한 넉넉한 여백의 중앙 수직 리듬

05

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

1px solid rgba(0,0,0,0.15)

06

레이아웃

극단적인 수직 패딩과 중앙 정렬 요소를 가진 단일 중앙 정렬 열 레이아웃

07

모션과 인터랙션

인터랙티브 요소에서의 매끄러운 색상 및 채우기 전환

인터랙티브 요소에서의 섬세한 색상 변화 또는 채우기 변경 · 즉각적인 상태 변화

08

컴포넌트

• button 배경 없이 텍스트 기반의 단순한 버튼으로, hover 전환에 의존
• card 표시되지 않음
• chip 표시되지 않음
• input 표시되지 않음
• hero 타이포그래피 로고 마크와 두 줄짜리 세리프 헤드라인이 특징인 중앙 정렬, 대칭 구성

09

보이스와 금지 목록

• 톤 수공예적, 조용하며 자신감 있는
• 헤드라인 시적이고 세리프이며, 강조를 위해 부드럽게 이탤릭체로 표시
• CTA 절제되고 모노스페이스, 대문자 라벨

• 밝고 채도 높은 배경 색상을 사용하지 마세요 — 스크린샷은 따뜻하고 톤 다운된 오프화이트(#EDEEE7)를 보여줍니다
• 무거운 드롭 쉐도우 또는 3D 효과를 사용하지 마세요 — 스크린샷은 완전히 평평하고 테두리 없는 표면을 보여줍니다
• 헤드라인에 산세리프 글꼴을 사용하지 마세요 — 스크린샷은 이탤릭체 트랜지셔널 세리프 헤드라인을 보여줍니다
• 모든 본문 카피를 중앙 정렬하지 마세요 — 스크린샷은 중앙 정렬 레이아웃을 보여주지만 장문 콘텐츠의 경우 왼쪽 정렬 흐름을 암시합니다
• 주요 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 전체적으로 날카롭고 기하학적인 모서리를 보여줍니다
• 공격적인 콜투액션 버튼을 사용하지 마세요 — 스크린샷은 절제된 모노스페이스 텍스트 링크를 보여줍니다
• 피하기: 화려한 색상
• 피하기: 공격적인 대문자 사용의 헤드라인
• 피하기: 밀도 높은 정보 블록
• 피하기: 무거운 그래픽 오버레이
• 피하기: 혼잡한 내비게이션

10

팩 안의 실제 스크린샷

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

11

System Prompt

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