큐레이션 · 오픈 · 무료

Refero

제품 화면, 흐름, 패턴을 위한 큐레이션된 디자인 라이브러리 및 검색 엔진.

designgallery
Refero 스크린샷
↓ 디자인 시스템 다운로드 (8 MB)OpenDesign 에서 열기

원본 사이트: https://refero.design

📦 팩 내용 보기 →

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

디스플레이 타입은 우아하고 권위 있는 제목을 위해 전환형 세리프를 사용합니다. · 본문 및 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

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

넉넉한 마진과 깨끗하고 공기 같은 그리드 구조를 가진 유동적이고 중앙 정렬된 컨테이너.

07

모션과 인터랙션

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 상태에서의 부드러운 전환 (box-shadow, opacity, border-radius) · 히어로 섹션의 장식용 UI 자산에 대한 floating 또는 scaling 애니메이션.

box-shadow 및 opacity 조절을 통한 미세한 높이 변화. · scale 또는 색상 변화로 즉시 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

Refero는 인간과 AI 모두를 위해 큐레이션된 제품 화면, 흐름 및 패턴을 제공하는 디자인 리서치 도구이자 갤러리입니다. 이 디자인은 부드러운 쿨 그레이(#F7F8FB, #EEF0F6), 깊은 블랙(#000000) 타이포그래피, 그리고 floating UI 자산 미리보기에만 존재하는 다양한 범위의 다채로운 강조색으로 특징지어지는 밝고 공기 같은 색상 팔레트가 특징입니다. 타이포그래피는 디스플레이용 클래식 전환형 세리프와 본문용 현대적 휴머니스트 산세리프를 페어링합니다. 핵심 디자인 규칙은 다음과 같습니다: 넉넉한 여백과 통기성 있는 레이아웃을 우선시하세요; 무겁고 밀집된 컨테이너를 절대 사용하지 마세요; 블랙 텍스트와 밝은 배경 사이의 높은 대비를 보장하세요. 인터페이스는 세련되고 프리미엄 느낌을 위해 미세한 높이 변화와 부드러운 마이크로 인터랙션에 의존합니다.

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

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

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

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