큐레이션 · 오픈 · 무료

Liveblocks

멀티플레이어 앱과 에이전트를 위한 실시간 인프라.

01

디자인 DNA

실시간 협업 기능을 위한 Vercel과 같은 역할

02

컬러

극도의 절제를 통한 고대비 모노크로매틱 다크 모드.

03

타이포그래피

humanist-sans · monospace

• display68px · 500
• h152px · 500
• body16px · 400
• small14px · 400

제목은 기하학적/휴머니스트산스체를 사용하며, 좁은 트래킹과 높은 웨이트를 적용합니다. · 본문은 읽기 편안한 1.5 라인 높이를 유지합니다. · 모노스페이스 폰트는 코드 블록과 기술적 라벨에만 엄격히 사용합니다.

04

여백

일관된 4px 그리드를 사용하며, 여유로운 패딩으로 공간감을 확보합니다.

05

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

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

0 0 0 1px rgba(255,255,255,0.1) · 0 2.767px 2.214px 0px rgba(0,0,0,0.05) · 0 100px 80px 0px rgba(0,0,0,0.17)

06

레이아웃

최대 너비 컨테이너와 전체 너비 배경 섹션을 사용하는 중앙 정렬 컬럼 레이아웃.

07

모션과 인터랙션

상호작용 요소에 부드러운 불투명도 및 색상 전환. · hover 시 미세한 변환 및 스케일 효과.

0.1초에서 0.3초 지속 시간의 미세한 색상 또는 배경 변화. · 최소한의 시각적 피드백으로 즉각적인 반응.

08

컴포넌트

• button 고대비(블랙 위 화이트 또는 화이트 위 블랙)를 사용하는 둥근 알약 형태 또는 모서리가 둥근 직사각형 버튼.
• card 미세한 1px 테두리와 배경색 구분이 없는 다크 카드.
• chip 미세한 배경 또는 테두리 처리가 적용된 작은 둥근 라벨.
• input 1px 테두리와 둥근 모서리가 적용된 다크 배경 입력 필드.
• hero 대형 제품 스크린샷과 이중 CTA를 배치한 거대한 중앙 정렬 타이포그래피.

09

보이스와 금지 목록

• 톤 기술적이고 직접적이며 권위 있는 어조.
• 헤드라인 대담하고 간결하며 가치 지향적인 스타일.
• CTA '무료' 또는 '시작하기'를 강조하는 행동 지향적이고 명확한 스타일.

• 주요 배경에 다채로운 그라디언트를 사용하지 않습니다 — 스크린샷은 순수 블랙과 다크 그레이를 보여줍니다.
• 제목에 세리프 폰트를 사용하지 않습니다 — 스크린샷은 깔끔한 기하학적 휴머니스트산스체를 보여줍니다.
• 부드럽고 둥근 파스텔 컬러를 사용하지 않습니다 — 스크린샷은 고대비 모노크로 팔레트를 보여줍니다.
• 불필요한 테두리나 그림자로 UI를 어지럽히지 않습니다 — 스크린샷은 극도로 미니멀한 표면 처리를 보여줍니다.
• 텍스트 양쪽 정렬을 사용하지 않습니다 — 스크린샷은 중앙 정렬과 왼쪽 정렬 레이아웃을 보여줍니다.
• 장난스럽거나 지나치게 장식적인 아이콘을 사용하지 않습니다 — 스크린샷은 간결한 라인 기반 아이콘ography를 보여줍니다.
• 피하기: 지나치게 캐주얼하거나 비속어가 많은 언어 사용을 피합니다.
• 피하기: UI 카피에 긴 문장이나 장황한 설명 사용을 피합니다.
• 피하기: 기술적 가치를 산만하게 하는 장식적 요소 사용을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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