큐레이션 · 오픈 · 무료

Rainbowkit

Web3 애플리케이션을 위한 최고의 지갑 연결 방법.

01

디자인 DNA

개발자와 블록체인 지갑 사이를 잇는 친근하고 다채로운 다리.

02

컬러

가시성을 위해 어둡고 고대비의 기반에 선명한 블루와 퍼플 악센트를 적용합니다.

03

타이포그래피

humanist-sans · monospace

• display52px · 700
• heading24px · 600
• body16px · 400
• caption13px · 400

모든 주요 UI 텍스트에 humanist-sans를 사용합니다 · 코드 스니펫 및 버전 번호에는 monospace를 사용합니다 · 헤드라인에는 타이트한 자간을 유지합니다

04

여백

4px 증가 단위를 기반으로 일관된 수직 리듬을 적용하며, 히어로 섹션에는 넉넉한 padding을 둡니다.

05

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

1px solid rgba(245, 248, 255, 0.12)

rgba(0, 0, 0, 0.4) 0px 8px 24px 0px · rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset

06

레이아웃

콘텐츠가 많은 섹션을 위한 중앙 정렬 단일 열 레이아웃으로, 전체 너비의 어두운 배경을 사용합니다.

07

모션과 인터랙션

hover 상태를 위한 부드러운 transform 및 opacity 트랜지션 · 배경 요소를 위한 선형 opacity 페이드

약간의 transform scale 및 색상 변화 · transform 리셋으로 즉각적인 피드백

08

컴포넌트

• button 단색 블루 배경과 흰색 텍스트를 가진 둥근 알약 형태
• card 은은한 테두리와 내부 padding이 있는 어두운 둥근 컨테이너
• chip 버전 번호나 레이블을 위한 작은 둥근 배지
• input 커맨드 라인 스니펫에 사용되는 은은한 테두리의 어두운 배경
• hero 배경 그라디언트와 함께 두드러진 호출-to-액션 버튼이 있는 중앙 정렬된 큰 텍스트

09

보이스와 금지 목록

• 톤 기술적이면서도 접근 가능하고 자신감 있는
• 헤드라인 기능에 대한 굵고 직접적인 진술
• CTA '문서 보기' 및 '지갑 연결'과 같은 명확한 행동 지향 동사

• 라이트 테마를 사용하지 마세요 — 스크린샷은 엄격히 다크 모드 인터페이스를 보여줍니다.
• 날카로운 코너를 사용하지 마세요 — 스크린샷은 주로 둥글고 알약 형태의 요소를 보여줍니다.
• 단일 단색을 사용하지 마세요 — 스크린샷은 선명한 블루와 퍼플 그라디언트를 보여줍니다.
• 넓고 넉넉한 행 높이를 사용하지 마세요 — 스크린샷은 타이트하고 컴팩트한 수직 간격을 보여줍니다.
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 모든 주요 UI 텍스트에 humanist-sans를 사용합니다.
• 작고 비좁은 버튼을 사용하지 마세요 — 스크린샷은 크고 넉넉한 padding이 있는 인터랙티브 요소를 보여줍니다.
• 피하기: 지나치게 기업적이거나 격식 있는 언어는 피합니다
• 피하기: 히어로 섹션에서 불필요한 전문 용어는 피합니다
• 피하기: 인터페이스에 너무 많은 옵션으로 복잡하게 만드는 것은 피합니다

10

팩 안의 실제 스크린샷

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

11

System Prompt

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