큐레이션 · 오픈 · 무료

Upstash

Redis, 벡터, 큐 등을 위한 통합 serverless 데이터 플랫폼.

01

디자인 DNA

현대 개발자를 위한 깨끗하고 고성능의 데이터 유틸리티

02

컬러

성능과 현대적인 인프라를 상징하는 선명한 그린 악센트가 있는 깨끗하고 고대비의 라이트 테마.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display72px · 600
• heading32px · 500
• body16px · 400
• caption14px · 400

히어로 텍스트 및 주요 제목에는 geometric-sans 사용 · 본문 및 설명에는 humanist-sans 사용 · 코드 조각 및 CLI 명령에는 monospace 사용

04

여백

'serverless'의 단순함을 반영하기 위해 넉넉한 여백을 가진 일관된 4px 기본 단위.

05

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

1px solid #e5e7eb

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 5px 40px 0px rgba(9, 14, 21, 0.16)

06

레이아웃

기능을 위한 다중 컬럼 카드 그리드로 전환되는 중앙 정렬 단일 컬럼 히어로.

07

모션과 인터랙션

인터랙티브 요소를 위한 색상 및 background-color 전환 · UI 상태 변경을 위한 부드러운 opacity 및 transform 전환

인터랙티브 요소에 대한 은은한 색상 변화 또는 배경 채우기 · 전환 또는 약간의 transform을 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 단일 그린 채우기와 화이트 텍스트가 있는 알약 모양의 주요 버튼; 고스트 또는 아웃라인 보조 변형.
• card 제품 모듈 및 기능 하이라이트에 사용되는, 은은한 테두리와 넉넉한 padding을 가진 화이트 카드.
• chip Redis, Vector 등 서로 다른 플랫폼 제품 간 전환을 위한 탭형 카드의 가로 스크롤 행.
• input 은은한 그레이 테두리와 둥근 모서리를 가진 표준 텍스트 입력.
• hero 메인 헤드라인의 선명한 그라디언트가 있는 대규모 중앙 정렬 타이포그래피, 뒤이어 간결한 가치 제안 및 주요 CTA.

09

보이스와 금지 목록

• 톤 직설적이고 개발자 중심적이며 성능 지향적
• 헤드라인 대담하고 간결하며 가치를 전달하는 문장
• CTA 행동 지향적이고 명확한 (예: 'Start for Free', 'Create Database')

• 장식용 세리프 폰트를 사용하지 마세요 - 스크린샷은 깨끗한 geometric 및 humanist sans-serif 타입faces를 보여줍니다.
• 어두운 테마를 주 인터페이스로 사용하지 마세요 - 스크린샷은 흰색 배경을 가진 가볍고 개방적인 레이아웃을 보여줍니다.
• 네온 또는 지나치게 채도 높은 네온 파스텔을 사용하지 마세요 - 스크린샷은 주요 악센트로 안정적인 에메랄드 그린(#047857)을 사용합니다.
• 주요 구성 요소에 날카롭고 각진 모서리를 사용하지 마세요 - 스크린샷은 넉넉하게 둥근 모서리(12px, 알약 모양)를 보여줍니다.
• 지나치게 많은 경쟁 색상으로 인터페이스를 어지럽히지 마세요 - 스크린샷은 그린, 화이트, 그레이의 타이트한 팔레트를 유지합니다.
• 장식적이고 복잡한 일러스트레이션을 사용하지 마세요 - 스크린샷은 간단한 추상적 기하학적 그래픽과 아이콘을 사용합니다.
• 작고 비좁은 타이포그래피를 사용하지 마세요 - 스크린샷은 넉넉한 line-height를 가진 매우 크고 대담한 히어로 폰트를 사용합니다.
• 피하기: 마케팅 용어
• 피하기: 모호한 약속
• 피하기: 지나치게 복잡한 문장
• 피하기: 수동태

10

팩 안의 실제 스크린샷

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

11

System Prompt

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