큐레이션 · 오픈 · 무료

Zed

산업적 정밀함과 세련된 에디토리얼 명료함을 결합한 고성능 코드 에디터 랜딩 페이지입니다.

01

디자인 DNA

정밀하게 설계된 독일 자동차 인터페이스와 현대적 미니멀리즘의 만남

02

컬러

주요 액션을 위한 단일 지배적인 블루를 사용하는 고대비 기능적 팔레트로, 시원한 중성 회색으로 기반을 잡았습니다.

03

타이포그래피

geometric-sans · monospace

• hero64px · 700
• h148px · 700
• h224px · 700
• body16px · 400
• small14px · 400
• mono14px · 400

큰 디스플레이 텍스트에는 좁은 자간을 사용합니다. · 본문 텍스트의 가독성을 위해 넉넉한 행간을 유지합니다. · 코드 블록 및 기술 콘텐츠에는 전용 모노스페이스 글꼴을 사용합니다.

04

여백

여유로운 공간감을 위한 8px 그리드 시스템입니다.

05

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

1px solid rgba(169,175,188,0.3)

0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px -4px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 1px 3px 0 rgba(230,239,254,1)

06

레이아웃

넉넉한 패딩과 명확한 시각적 계층을 갖춘 중앙 단일 열 레이아웃입니다.

07

모션과 인터랙션

hover 시 미세한 스케일 및 translate 변환 · 인터랙티브 요소의 부드러운 색상 전환 · 콘텐츠 노출을 위한 절제된 fade-in

그림자 강화와 약간의 색상 변화가 있는 절제된 상승 효과 · 스케일 변환을 통한 즉각적인 시각적 피드백

08

컴포넌트

• button Primary: 흰색 텍스트의 솔리드 블루 채우기; Secondary: 회색 테두리와 어두운 텍스트의 아웃라인; 모두 절제된 hover 그림자 적용
• card 미세한 테두리, 깔끔한 타이포그래피, 최소한의 장식 요소가 적용된 연한 회색 배경
• chip 연한 회색 배경의 태그 및 메타데이터용 소형 인라인 요소
• input 포커스 시 미세한 그림자가 적용된 깔끔한 테두리의 입력 필드
• hero 지원 텍스트, 듀얼 액션 버튼, 그리고 절제된 그라데이션 배경이 있는 큰 중앙 헤드라인

09

보이스와 금지 목록

• 톤 자신감 있고 기술적이며 접근ability가 높은 어조
• 헤드라인 성능과 개발자 경험을 강조하는 명확하고 간결한 문장
• CTA 명확한 가치 제안을 포함한 직접적인 행동 지향적 언어

• 과도한 색상 대비를 사용하지 않습니다 — 스크린샷은 중성 회색을 배경으로 한 절제된 블루 악센트를 보여줍니다.
• 다크 모드를 주요 테마로 구현하지 않습니다 — 스크린샷은 미세한 질감이 있는 라이트 테마를 보여줍니다.
• 장식용 일러스트를 사용하지 않습니다 — 스크린샷은 타이포그래피 중심의 깔끔한 디자인을 보여줍니다.
• 불필요한 테두리나 구분선을 추가하지 않습니다 — 스크린샷은 여백을 통한 깔끔한 구분을 보여줍니다.
• 복잡한 애니메이션을 사용하지 않습니다 — 스크린샷은 최소한의 모션 디자인을 보여줍니다.
• 인터페이스를 복잡하게 만들지 않습니다 — 스크린샷은 넉넉한 간격과 공간감을 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어
• 피하기: 맥락 없는 기술 용어
• 피하기: 마케팅 허풍이나 과장된 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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