큐레이션 · 오픈 · 무료

Convex

Convex는 개발자들이 자신감 있게 구축할 수 있게 해주는 통합 백엔드-서비스를 제공합니다.

01

디자인 DNA

현대 웹 애플리케이션을 위한 산업 등급 엔진 블록

02

컬러

따뜻한 크림 에디토리얼 영역과 어두운 집중 개발 환경 간의 고대비 분할.

03

타이포그래피

geometric-sans · monospace

• display40px · 700
• body16px · 400

제목은 타이트하게 트래킹되고 볼드체입니다 · 본문 텍스트는 넉넉한 행간으로 높은 가독성을 유지합니다 · 모노스페이스 폰트는 코드 스니펫과 터미널 명령에만 전용으로 사용됩니다

04

여백

4px 기본 그리드와 섹션 구간에 넉넉한 패딩

05

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

1px solid #141414

0px -16px 72px -8px rgba(0, 0, 0, 0.25) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

06

레이아웃

왼쪽에 텍스트, 오른쪽에 인터랙티브 코드 편집기가 있는 분할 스크린 히어로

07

모션과 인터랙션

hover 시 부드러운 150ms 색상 및 변환 트랜지션 · 미묘한 배경 그라디언트 애니메이션

부드러운 이징으로 미묘한 배경 및 텍스트 색상 변화 · 약간의 스케일 피드백으로 즉각적인 응답

08

컴포넌트

• button 알약 모서리 반경과 흰색 텍스트가 적용된 단색 다크 채우기 버튼
• card 12px 모서리 반경과 미묘한 그림자가 있는 다크 테마 카드
• chip 'Work' 또는 'Other'와 같은 카테고리를 위한 다채로운 둥근 태그
• input 모노스페이스 폰트를 사용한 다크 터미널 스타일 입력 필드
• hero 한쪽에 대형 타이포그래피, 다른 쪽에 라이브 데모가 있는 비대칭 분할 레이아웃

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있는 개발자 중심 어조
• 헤드라인 크고 볼드하며 타이트하게 트래킹된 기하학적 산세리프
• CTA 알약 모양 버튼을 사용한 직접적이고 행동 지향적인 스타일

• 기본 버튼에 표준 둥근 모서리를 사용하지 마세요 — 스크린샷은 알약 모양(999px) 테두리를 보여줍니다
• 밝은 파란색이나 녹색 강조색을 사용하지 마세요 — 스크린샷은 코드 구문에만 다채로운 강조색을 사용하는 엄격한 단색 팔레트를 보여줍니다
• 제목에 세리프 폰트를 사용하지 마세요 — 스크린샷은 볼드체의 타이트하게 트래킹된 기하학적 산세리프를 보여줍니다
• 얇고 밝은 테두리를 사용하지 마세요 — 스크린샷은 밝은 배경에 대비되는 1px 실선 다크 테두리를 보여줍니다
• 전체 페이지에 순수 다크 배경을 사용하지 마세요 — 스크린샷은 라이트 크림 메인 콘텐츠 영역과 다크 컴포넌트 영역 간의 분할을 보여줍니다
• Helvetica와 같은 표준 산세리프 폰트를 사용하지 마세요 — 스크린샷은 약간 더 넓은 고유한 기하학적 산세리프 카테고리를 보여줍니다
• 피하기: 경솔하거나 지나치게 장난스러운 언어
• 피하기: 어지러운 레이아웃
• 피하기: 밝고 네온이 강한 색상 체계

10

팩 안의 실제 스크린샷

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

11

System Prompt

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