큐레이션 · 오픈 · 무료

Light

온체인 인터넷 시대를 위한 개발자 빌딩 블록.

01

디자인 DNA

차세대 블록체인 애플리케이션 구축을 위한 현대적인 툴킷.

02

컬러

주요 작업을 위한 생동감 있는 보라색 강조색이 포함된 클린하고 고대비의 인터페이스.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display52px · 700
• headline32px · 700
• body16px · 400
• label14px · 500

강한 계층 구조를 확립하기 위해 제목에 굵은 두께를 사용합니다. · 큰 디스플레이 텍스트에는 타이트한 행간을 유지합니다. · 본문 텍스트는 적당한 행간으로 가독성을 확보해야 합니다.

04

여백

수직 리듬과 컴포넌트 패딩을 위한 모듈러 스케일을 적용한, 일관된 4px 기본 단위.

05

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

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

0 2px 1px 0 rgba(0, 0, 0, 0.03) · 0 1px 0 0 rgba(0, 0, 0, 0.05) · 0 0 24px 0 rgba(128, 128, 128, 0.1)

06

레이아웃

전폭 컨테이너의 중앙 정렬 히어로. 기능 섹션을 위해 다중 컬럼 그리드로 전환됩니다.

07

모션과 인터랙션

hover 상태에서의 미세한 투명도 및 변환 전환. · 모든 인터랙티브 요소에 대한 부드러운 이징.

인터랙티브 요소에 대한 미세한 색상 변화 또는 투명도 조정. · 약간의 스케일 또는 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 버튼은 보라색 배경의 알약 모양; 보조 버튼은 텍스트와 함께 고스트/아웃라인 스타일입니다.
• card 기능 하이라이트에 사용되는, 부드러운 그림자와 둥근 모서리가 적용된 흰색 카드.
• chip 카테고리에 사용되는, 배경색과 텍스트가 적용된 둥근 레이블.
• input 미세한 테두리와 둥근 모서리가 적용된 텍스트 입력 필드.
• hero 대형 타이포그래피와 두드러진 행동 유도 버튼이 포함된, 전폭 중앙 정렬 섹션.

09

보이스와 금지 목록

• 톤 전문적이고 기술적이며 미래 지향적인 어조.
• 헤드라인 대담하고 명확하며 행동을 유도하는 문장.
• CTA '빌딩 시작하기' 및 '문서 읽기'와 같은 동사를 사용하여 직접적이고 격려하는 문장.

• 제목에 얇거나 가벼운 폰트 두께를 사용하지 마세요 — 스크린샷은 굵은 두께 700을 보여줍니다.
• 넓고 네모난 컨테이너를 사용하지 마세요 — 스크린샷은 명확한 여백이 있는 중앙 정렬 콘텐츠 영역을 보여줍니다.
• 주요 요소에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(알약 버튼, 둥근 카드)를 보여줍니다.
• 메인 페이지에 어두운 배경을 사용하지 마세요 — 스크린샷은 밝은 회색/흰색 배경을 보여줍니다.
• 주요 CTA에 미세하거나 무채색의 강조색을 사용하지 마세요 — 스크린샷은 생동감 있고 고채도의 보라색을 보여줍니다.
• 주요 배경으로 복잡하고 다색의 그래디언트를 사용하지 마세요 — 스크린샷은 클린하고 단색 섹션을 보여줍니다.
• 피하기: 격식 없는 언어
• 피하기: 설명 없는 과도한 전문 용어
• 피하기: 수동태

10

팩 안의 실제 스크린샷

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

11

System Prompt

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