큐레이션 · 오픈 · 무료

Uniswap

깔끔하고 높은 대비의 디자인을 가진 재미있고 접근 가능한 탈중앙화 거래소 플랫폼입니다.

cryptodefi

↓ 디자인 시스템 다운로드 (18 MB)OpenDesign 에서 열기

원본 사이트: https://uniswap.org

📦 팩 내용 보기 →

디자인 DNA

탈중앙화접근성재미있는투명한금융

현대적인 뱅킹 앱처럼 느껴지지만 크립토 네이티브 미학을 갖춘 깔끔하고 친근한 핀테크 인터페이스입니다.

컬러

#FF37C7Accent

#131313Ink

rgba(19, 19, 19, 0.63)Ink soft

#FFFFFFBG

#F9F9F9BG soft

rgba(19, 19, 19, 0.08)BG quiet

#222222Muted

rgba(19, 19, 19, 0.12)Line

밝고 깔끔한 배경에 선명한 마젠타 강조색과 높은 대비의 텍스트를 적용합니다.

타이포그래피

Humanist Sans-Serif

display52px · 500
headline36px · 500
body16px · 485
label14px · 485
small18px · 485

모든 텍스트에 시스템 폰트 스택(Basel, -apple-system, system-ui, sans-serif)을 사용합니다. · 디스플레이 헤드라인 크기를 52px, 두께를 500으로 설정합니다. · 본문 텍스트 크기를 16px, 두께를 485로 설정합니다. · 큰 디스플레이 텍스트에는 -1px의 음수 자간을 사용합니다.

여백

4px

8px

12px

16px

20px

24px

32px

48px

64px

전체적으로 4px 기본 그리드를 사용하며, 일반적인 간격은 8px, 16px, 24px입니다.

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

sm · 12px

md · 20px

lg · 32px

pill · 999999px

1px solid rgba(19, 19, 19, 0.12)

rgba(19, 19, 19, 0.04) 0px 6px 12px -3px · rgba(19, 19, 19, 0.03) 0px 2px 5px -2px

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

데스크톱에서는 단일 열 중앙 정렬 레이아웃을, 모바일에서는 전체 너비 레이아웃으로 확장됩니다.

모션과 인터랙션

100msmicro

125mssmall

400msmedium

cubic-bezier(0.34, 1.56, 0.64, 1)easing

마이크로 인터랙션에는 0.1초 ease-in-out 전환을 사용합니다. · 변환 및 불투명도 변경에는 0.08초 ease-in-out 전환을 사용합니다. · 인터랙티브 요소에는 0.4초 cubic-bezier(0.34, 1.56, 0.64, 1) 스프링 애니메이션을 사용합니다.

인터랙티브 요소에 미묘한 색상 변화 또는 배경 불투명도 변화를 적용합니다. · 버튼 및 클릭 가능한 카드에 약간의 스케일 또는 변환 효과를 적용합니다.

컴포넌트

button 모서리가 32px인 약 모양 버튼이며, 마젠타 강조색으로 채워집니다.
card 모서리가 20px, 안쪽 여백이 12px이며, 미묘한 그림자나 밝은 회색 배경을 사용하는 카드입니다.
chip 밝은 배경과 해당 카테고리와 일치하는 텍스트 색상을 사용하는 작은 약 모양 뱃지입니다.
input 모서리가 12px, 배경이 밝은 회색인 크고 둥근 입력 필드입니다.
hero 52px의 큰 헤드라인과 주요 스_swap 위젯을 특징으로 하는 눈에 띄는 중앙 정렬 영웅 섹션입니다.

보이스와 금지 목록

톤 복잡한 DeFi 개념을 접근하기 쉽게 만들어주는 친근하고 접근 가능하며 직접적인 어조입니다.
헤드라인 크고 굵으며 명확한, 종종 하나의 강력한 문장으로 구성되는 스타일입니다.
CTA 주의를 끌기 위해 마젠타 강조색을 사용하는 행동 지향적이고 눈에 띄는 스타일입니다.

날카롭고 작은 모서리 반경을 사용하지 마세요 — 스크린샷에는 카드와 버튼에 12px에서 32px의 모서리 반경이 보입니다.
메인 캔버스로 어두운 배경을 사용하지 마세요 — 스크린샷에는 주로 흰색(#FFFFFF)과 밝은 회색(#F9F9F9) 팔레트가 보입니다.
전체 인터페이스에 높은 대비의 다크 모드를 사용하지 마세요 — 스크린샷에는 높은 대비 텍스트를 사용하는 라이트 테마가 보입니다.
헤드라인에 얇고 가벼운 타이포그래피를 사용하지 마세요 — 스크린샷에는 52px 헤드라인에 두께 500이 적용되어 있습니다.
광범위한 주요 색상을 사용하지 마세요 — 스크린샷에는 단일 주요 마젠타(#FF37C7) 강조색이 보입니다.
무거운 테두리가 있는 경직된 그리드 중심 레이아웃을 사용하지 마세요 — 스크린샷에는 분리를 위해 부드러운 그림자와 둥근 모서리가 보입니다.
피하기: 전문 용어가 많은 언어
피하기: 공격적인 마케팅 톤
피하기: 밀도 높은 텍스트 블록

팩 안의 실제 스크린샷

Uniswap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

이것은 탈중앙화 금융 플랫폼 Uniswap입니다. 디자인은 깔끔하고 접근 가능하며, 흰색(#FFFFFF)과 밝은 회색(#F9F9F9) 배경을 사용하는 라이트 테마를 사용합니다. 주요 강조색은 선명한 마젠타(#FF37C7)입니다. 타이포그래피는 디스플레이 헤드라인 두께 500, 크기 52px의 humanist sans-serif(Basel)를 사용합니다. 핵심 금지 사항: 1) 메인 UI에 어두운 배경을 사용하지 마세요. 2) 날카로운 모서리를 사용하지 마세요; 넉넉한 모서리 반경(12px에서 32px)을 사용하세요. 3) 헤드라인에 얇은 폰트를 사용하지 마세요; 두께 500을 유지하세요. 전체적인 느낌은 기업적이거나 무겁지 않고 친근하며 재미있습니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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