← OpenDesign 큐레이션 · 오픈 · 무료
Refero
제품 화면, 흐름, 패턴을 위한 큐레이션된 디자인 라이브러리 및 검색 엔진.
design gallery
01
디자인 DNA
디자인 리서치 큐레이션 AI 에이전트 레퍼런스 라이브러리 인간 중심적
스마트 리서치 어시스턴트 역할을 하는 세련되고 공기 같은 디자인 아카이브.
02
컬러
#000000Ink
rgba(2,18,73,0.38)Ink soft
#F7F8FBBG
#EEF0F6BG soft
#FFFFFFBG quiet
#9FA5BAMuted
가볍고 공기 같은 쿨 그레이 배경 위의 고대비 블랙 타이포그래피와, floating UI 자산에만 사용되는 다색 팔레트.
03
타이포그래피
transitional-serif · humanist-sans
display 80px · 400body 20px · 400label 16px · 500디스플레이 타입은 우아하고 권위 있는 제목을 위해 전환형 세리프를 사용합니다. · 본문 및 UI 텍스트는 깨끗한 휴머니스트 산세리프를 사용합니다. · 타이포그래피는 현대적이고 중간 무게감의 느낌을 위해 weight 500에 크게 의존합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
넉넉한 여백이 레이아웃을 정의하여, 통기성 있는 갤러리 리듬을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 6px
md · 8px
lg · 20px
pill · 999px
1px solid rgba(2,18,73,0.38)
0px 0px 0px 2px #F7F8FB inset · 0px 0px 0px 2px rgba(45, 49, 63, 0.2) · 0px 1px 3px 0px rgba(12, 41, 126, 0.09) · 0px 3px 8px 0px rgba(12, 41, 126, 0.09) · 0px 8px 16px 0px rgba(12, 41, 126, 0.07)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
넉넉한 마진과 깨끗하고 공기 같은 그리드 구조를 가진 유동적이고 중앙 정렬된 컨테이너.
07
모션과 인터랙션
150ms micro
200ms small
300ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 상태에서의 부드러운 전환 (box-shadow, opacity, border-radius) · 히어로 섹션의 장식용 UI 자산에 대한 floating 또는 scaling 애니메이션.
box-shadow 및 opacity 조절을 통한 미세한 높이 변화. · scale 또는 색상 변화로 즉시 반응.
08
컴포넌트
button 단색 블랙 배경과 화이트 텍스트를 가진 알약 형태의 기본 버튼; 부드러운 그레이 배경의 보조 버튼. card 부드러운 그림자가 있는 밝은 그레이 컨테이너로, 주로 UI 자산이나 floating 그리드 요소를 표시합니다. chip UI 요소 및 페이지 유형을 분류하기 위한 작은 둥근 알약 형태의 태그. input 둥근 모서리와 미묘한 그레이 테두리가 있는 깨끗한 검색 바. hero floating된 다채로운 UI 자산 미리보기로 둘러싸인 크고 중앙 정렬된 텍스트 영역. 09
보이스와 금지 목록
톤 전문적이고, 도움이 되며, 권위적이면서도 친근한 어조. 헤드라인 인간과 AI의 협력을 강조하는 직접적이고 행동 지향적인 문장. CTA '탐색 시작' 또는 '로그인 또는 가입'과 같은 명확하고 행동 지향적인 라벨. 플랫한 산세리프 헤드라인을 사용하지 마세요 — 스크린샷은 우아하고 고대비의 전환형 세리프 디스플레이 타입을 보여줍니다. 단일적이고 단색인 브랜드 색상 팔레트를 사용하지 마세요 — 스크린샷은 floating된 다채로운 UI 자산의 다색 배열을 보여줍니다. 무겁고 어두운 컨테이너 또는 기본 다크 모드를 사용하지 마세요 — 스크린샷은 주로 화이트와 밝은 그레이의 공기 같은 배경을 보여줍니다. 모든 요소에 날카로운 4px 모서리를 사용하지 마세요 — 스크린샷은 8px, 20px, 완전히 둥근 알약 형태가 혼합되어 있음을 보여줍니다. 밀집되고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 통기성 있는 갤러리 구조를 보여줍니다. 기본 버튼에 거칠고 밝은 강조색을 사용하지 마세요 — 스크린샷은 단색 블랙 알약 버튼을 보여줍니다. 피하기: 전문 용어가 가득한 설명 피하기: 과도한 판매적 또는 홍보성 언어 피하기: 공격적인 콜투액션 10
팩 안의 실제 스크린샷
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Refero는 인간과 AI 모두를 위해 큐레이션된 제품 화면, 흐름 및 패턴을 제공하는 디자인 리서치 도구이자 갤러리입니다. 이 디자인은 부드러운 쿨 그레이(#F7F8FB, #EEF0F6), 깊은 블랙(#000000) 타이포그래피, 그리고 floating UI 자산 미리보기에만 존재하는 다양한 범위의 다채로운 강조색으로 특징지어지는 밝고 공기 같은 색상 팔레트가 특징입니다. 타이포그래피는 디스플레이용 클래식 전환형 세리프와 본문용 현대적 휴머니스트 산세리프를 페어링합니다. 핵심 디자인 규칙은 다음과 같습니다: 넉넉한 여백과 통기성 있는 레이아웃을 우선시하세요; 무겁고 밀집된 컨테이너를 절대 사용하지 마세요; 블랙 텍스트와 밝은 배경 사이의 높은 대비를 보장하세요. 인터페이스는 세련되고 프리미엄 느낌을 위해 미세한 높이 변화와 부드러운 마이크로 인터랙션에 의존합니다.
더 보기 en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 고밀도 정보와 우아하고 깔끔한 미학을 효과적으로 균형 잡은, 현대적이고 프리미엄 SaaS 갤러리 UI의 대표적인 예시입니다.
