큐레이션 · 오픈 · 무료

Jupi

AI 주도 속도를 탐색하는 기술 리더를 위한 정교하고 밝은 테마의 의사결정 시스템.

01

디자인 DNA

high-stakes 전략적 의사결정을 위한 차분하고 집중된 지휘 센터.

02

컬러

muted하고 따뜻한 off-white 배경 위의 고대비 잉크는 심각한 의사결정을 위한 차분하고 집중된 환경을 조성합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display36px · 400
• headline36px · 500
• body16px · 400
• caption11px · 400

large display 및 headline 텍스트에는 기하학적 sans를 사용합니다 · 본문 및 UI 텍스트에는 인본주의적 sans를 사용합니다 · code 스니펫 및 기술 콘텐츠에는 모노스페이스를 사용합니다

04

여백

padding 및 gap 배수인 8px 수직 리듬이 적용됩니다.

05

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

1px solid rgba(0,0,0,0.09)

0px 1px 8px -2px rgba(0,0,0,0.06) · 0px 4px 7px 0px rgba(0,0,0,0.05) · 0px 1px 2px 0px rgba(0,0,0,0.07)

06

레이아웃

밝은 카드 안에 주요 텍스트 영역이 중첩된 중앙 정렬 단일-column hero 레이아웃입니다.

07

모션과 인터랙션

hover 시 미세한 opacity 전환 · 대화형 요소에서 부드러운 색상 및 background-color 전환

대화형 요소에 미세한 배경 또는 색상 변화. · 색상 또는 opacity 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 강한 대비의 pill 모양입니다. 검정 채우거나 미세한 그림자가 있는 밝은 채우기입니다.
• card 미세한 내부 그림자와 부드러운 테두리가 있는 밝은 off-white 컨테이너입니다.
• chip 빠른 선택 옵션을 위한 작은 둥근 사각형입니다.
• input 부드러운 그림자와 둥근 모서리가 있는 큰 텍스트 영역입니다.
• hero 크고 굵은 진술과 보조 부제가 있는 중앙 정렬 텍스트 중심 섹션입니다.

09

보이스와 금지 목록

• 톤 자신감 있고直接적이며 전문적입니다.
• 헤드라인 문제나 통찰을 제시하는 간결하고 강렬한 진술.
• CTA 'Talk' 또는 'Try' 같은 동사를 사용하는 행동 지향적이고 명확한 표현.

• 선명하고 포화된 강조색을 사용하지 마세요 — 스크린샷은 따뜻한 off-white 배경의 철저히 단색 팔레트를 보여줍니다.
• 무거운 drop shadow를 사용하지 마세요 — 스크린샷은 깊이감을 위한 매우 미세하고 부드러운 그림자를 보여줍니다.
• 날카로운 90도 모서리를 사용하지 마세요 — 스크린샷은 버튼에서도 일관되게 둥근 모서리를 보여줍니다.
• headline에 얇고 가벼운 폰트를 사용하지 마세요 — 스크린샷은 display와 본문 텍스트 간의 명확한 무게 대비를 보여줍니다.
• 넓고 벌크한 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백이 있는 중앙 정렬되고 통기성 있는 레이아웃을 보여줍니다.
• 복잡하고 다채로운 gradient를 사용하지 마세요 — 스크린샷은 거의 단색에 가까운 미세한 배경 변화를 보여줍니다.
• 피하기: headline에서 과도한 전문 용어 또는 지나치게 기술적인 언어 사용
• 피하기: 의사결정의 심각성을 훼손하는 장난기 있거나 비공식적인 언어 사용
• 피하기: 모호하거나 수동적인 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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