큐레이션 · 오픈 · 무료

Rekki

도매 유통업체를 위해 만들어진 오피스 로봇

01

디자인 DNA

도매 유통업체를 위한 AI 기반 오피스 어시스턴트

02

컬러

작동 가능한 요소를 위해 단일 강렬한 블루 악센트를 사용하는 고대비 다크 모드

03

타이포그래피

geometric-sans · sans-serif · monospace

• display56px · 700
• body-lg24px · 400
• body-md18px · 400
• body-sm16px · 400
• label12px · 400

큰 헤드라인에는 타이트한 네거티브 자간을 사용합니다 · 네비게이션 링크와 작은 라벨에는 대문자를 사용합니다 · 가독성을 위해 높은 대비 비율(화이트 온 블랙)을 유지합니다

04

여백

4px의 배수를 사용하며, 섹션 분리를 위해 더 큰 간격(32, 48)을 사용합니다

05

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

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

0px 0px 0px 1px rgba(255, 255, 255, 0.12) inset · 0px 0px 1px 0px rgba(255, 255, 255, 0.2)

06

레이아웃

중앙 정렬된 콘텐츠가 포함된 풀웨이트 다크 히어로 뒤에 다중 열 기능 그리드가 배치됩니다

07

모션과 인터랙션

배경 요소를 위한 미묘한 페이드인 · 버튼 hover 상태를 위한 부드러운 전환

상호작용 요소의 미묘한 밝기 또는 불투명도 변화 · 버튼 누름 시 즉각적인 시각적 피드백

08

컴포넌트

• button 알약 모양(border-radius: 59px)의 솔리드 블루(#0063E1) 버튼으로, 화이트 볼드 텍스트가 적용된 큰 크기
• card 다크 배경(#040910) 컨테이너로, 미묘한 1px 인셋 테두리와 둥근 모서리(16px)를 적용
• chip AI 상태 업데이트에 사용되는 다크, 반투명 배지로, 둥근 모서리 적용
• input 미묘한 테두리가 적용된 다크 테마 입력 필드
• hero 미묘한 사진 배경 위의 고대비 헤드라인과 서브 헤드라인

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며 결과 지향적
• 헤드라인 볼드하고 직접적이며 이점 중심적 (예: '도매 유통업체를 위해 만들어진...')
• CTA 작업 지향적이고 고대비 (예: '데모 받기', '데모 예약하기')

• 화이트 배경을 사용하지 마세요 — 스크린샷은 딥 블랙(#000000)을 주요 배경으로 보여줍니다
• 주요 버튼에 둥근 사각형을 사용하지 마세요 — 스크린샷은 알약 모양 버튼(border-radius: 59px)을 보여줍니다
• 헤드라인에 무채색 회색 텍스트를 사용하지 마세요 — 스크린샷은 메인 제목에 고대비 화이트(#FFFFFF)를 보여줍니다
• 장식용 세리프를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 및 산세리프 폰트 카테고리를 보여줍니다
• 다양한 악센트 컬러를 사용하지 마세요 — 스크린샷은 단일 지배적인 블루(#0063E1)를 보여줍니다
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 대신 미묘한 1px 인셋 테두리와 부드러운 글로우를 보여줍니다
• 피하기: 장난스러운 전문 용어
• 피하기: 수동태
• 피하기: 지나치게 복잡한 기술 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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