← OpenDesign
큐레이션 · 오픈 · 무료
Relume
Relume은 마케팅 웹사이트를 더 빠르게 구축하기 위한 AI 기반 디자인 및 개발 도구입니다.
design tool
01
디자인 DNA
AI 기반 디자인 가속화 마케팅 웹사이트 개발자 도구
AI 생성과 인간 큐레이션을 결합하는 웹 디자인을 위한 크리에이티브 코 파일럿입니다.
02
컬러
#6248FFAccent
#161616Ink
#686868Ink soft
#F1F0EEBG
#FFFFFFBG soft
#E4E2DFBG quiet
rgba(22,22,22,0.1)Line
중립적이고 따뜻한 그레이 기반은 깔끔한 캔버스를 제공하여, 선명한 퍼플 악센트와 어두운 텍스트가 시선을 집중시킬 수 있게 합니다.
03
타이포그래피
humanist-sans · monospace
display 80px · 500h2 40px · 500body-lg 19px · 400body 16px · 400caption 14px · 400큰 디스플레이 제목에는 타이트한 트래킹을 적용합니다. · 모든 본문 텍스트에는 표준 400 웨이트를 사용합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
4px의 일관된 배수를 사용하여 레이아웃 전반에 걸쳐 구조적이고 예측 가능한 리듬을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 6px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(22,22,22,0.1)
rgba(0, 0, 0, 0.04) 0px 1px 2px 0px · rgba(0, 0, 0, 0.08) 0px 1px 3px 0px · rgba(0, 0, 0, 0.08) 0px 8px 10px -4px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
넉넉한 여백과 히어로 영역의 플로팅 UI 요소가 있는 중앙 정렬 칼럼 레이아웃입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.46, 0.45, 0.94) easing
hover 시 부드러운 opacity 및 transform 전환. · 장식적 UI 요소를 위한 플로팅 애니메이션. · 뷰포트 진입 시 가속화된 레이아웃 전환.
카드와 버튼에 미세한 배경색 변화와 약간의 수직 상승 효과입니다. · 배경 변경이나 scale 변환을 통한 즉각적인 시각적 피드백입니다.
08
컴포넌트
button 흰색 텍스트와 퍼플 아웃라인 고스트 변형이 있는 어두운 채우기 프라이머리 버튼입니다. card 부드러운 그림자와 둥근 모서리가 있는 흰색 또는 밝은 회색 카드입니다. chip 사회적 증명 및 내비게이션 라벨용의 작은, 둥근 필 뱃지입니다. input 그라디언트 테두리와 내부에 채워진 액션 버튼이 있는 크고 눈에 띄는 입력 필드입니다. hero 밝은 배경 위에 중앙 정렬된 거대한 타이포그래피와 양쪽으로 둘러싸인 플로팅 인터랙티브 UI 카드입니다.
09
보이스와 금지 목록
톤 자신감을 주고, 전문적이며, 혁신적인 어조입니다. 헤드라인 대담하고 직접적이며 혜택 중심적인 진술입니다. CTA 행동을 유도하고 초대하는 스타일입니다. 순백 배경을 사용하지 마세요 — 스크린샷에는 대신 따뜻한 오프 화이트가 보입니다. 세리프 디스플레이 폰트를 사용하지 마세요 — 스크린샷에는 기하학적 또는 휴머니스트 산세리프가 보입니다. 밝은 네온 악센트를 사용하지 마세요 — 스크린샷에는 깊고 채도 높은 퍼플이 보입니다. 레이아웃을 어지럽히지 마세요 — 스크린샷에는 넉넉한 여백과 중앙 정렬이 보입니다. 가장자리가 선명한 drop shadow를 사용하지 마세요 — 스크린샷에는 부드럽고 확산된 box-shadow가 보입니다. UI 요소에 날카로운 모서리를 사용하지 마세요 — 스크린샷에는 최대 16px의 둥근 모서리가 보입니다. 피하기: 수동적인 언어 피하기: 설명 없는 지나치게 전문적인 용어 피하기: 모호한 약속
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
Relume은 인간 디자이너를 대체하는 것이 아닌 빠르고 협업적인 코 파일럿으로 포지셔닝된, 마케팅 웹사이트를 위한 프리미엄 AI 기반 디자인 도구입니다. 디자인은 따뜻한 오프 화이트 배경(#F1F0EE)에 어두운 차콜 텍스트(#161616)와 시그니처 퍼플 악센트(#6248FF)를 사용합니다. 타이포그래피는 디스플레이와 본문 모두에 깔끔한 휴머니스트 산세리프 카테고리를 중심으로 구성됩니다. 핵심 디자인 규칙: 순백 배경을 사용하지 않고, 제목에 세리프 폰트를 피하며, 인터페이스가 프리미엄하고 깔끔해 보이도록 넉넉한 여백을 유지합니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: Relume은 강렬한 타이포그래피와 깔끔한 도구와 같은 인터페이스의 균형을 맞추는 방법을 보여주며, 현대적인 SaaS 랜딩 페이지에 대한 훌륭한 레퍼런스입니다.