큐레이션 · 오픈 · 무료

Stream

Stream의 개발자 우선 SDK로 채팅, 피드, 비디오 통합을 더 빠르게 구축하세요.

01

디자인 DNA

실시간 기능 구축을 위한 깔끔하고 전문적인 개발자 콘솔.

02

컬러

단일 강렬한 블루 액센트를 사용한 고대비 전문적 미니멀리즘.

03

타이포그래피

humanist-sans · monospace

• display48px · 500
• h236px · 500
• h324px · 600
• body16px · 400
• code14px · 400
• caption12px · 500

디스플레이 및 제목 본문의 굵기는 일관되게 500에서 600으로 설정합니다. · 본문 텍스트는 최대 가독성을 위해 표준 400 굵기를 사용합니다. · 모노스페이스 폰트는 인라인 코드 및 명령어 블록에만 독점적으로 사용합니다.

04

여백

히어로 및 섹션 구간에 넉넉한 여백을 둔, 일관된 4px 기반.

05

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

1px solid rgba(13, 23, 33, 0.1)

0px 3px 12px 0px rgba(0, 0, 0, 0) · 0px 1px 4px 0px rgba(0, 0, 0, 0.14)

06

레이아웃

두 열 히어로 레이아웃을 사용한 표준 중앙 정렬 컨테이너.

07

모션과 인터랙션

호버 상태에서의 부드러운 background-color 및 opacity 트랜지션. · 인터랙션 중 미세한 box-shadow 조정.

0.15초에서 0.5초 트랜지션을 사용한 background-color 또는 opacity 변화. · 미세한 transform 또는 shadow 피드백을 동반한 즉각적인 상태 변경.

08

컴포넌트

• button 주요 액션용 둥근 디자인의 솔리드 블루 필; 보조 액션용 테두리가 있는 흰색 둥근 필.
• card 유스케이스 쇼케이스에 사용되는, 미세한 그레이 테두리와 둥근 모서리(16px)를 가진 화이트 카드.
• chip 밝은 배경과 둥근 모서리를 가진 소문자 뱃지.
• input 명령 프롬프트용 모노스페이스 폰트와 다크 배경을 사용한 코드 블록 스타일링.
• hero 오른쪽에 떠 있는, 겹쳐진 프로덕트 UI 목업과 짝을 이루는 큰 좌측 정렬 텍스트 블록.

09

보이스와 금지 목록

• 톤 전문적이고, 개발자 중심적이며, 자신감 있는 어조.
• 헤드라인 직설적이고, 행동 지향적이며, 약간 기술적인 스타일.
• CTA 명확하고 즉각적인, '>_' 또는 '->'와 같은 모노스페이스 액센트를 사용하는 스타일.

• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 거의 보이지 않는 매우 미세한 섀도우를 보여줍니다.
• 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 대부분 플랫 화이트와 라이트 그레이 배경을 보여줍니다.
• 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 모든 텍스트에 깔끔한 휴머니스트 산세리프를 사용합니다.
• 네온이나 다양한 액센트 컬러를 사용하지 마세요 — 스크린샷은 블루만 사용하는 엄격한 액센트 전략을 보여줍니다.
• 주요 버튼에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 완전히 둥근 필 모양을 사용합니다.
• 밀집된 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 패딩과 명확한 섹션 구분을 보여줍니다.
• 피하기: 지나치게 캐주얼한 은어
• 피하기: 모호한 마케팅 용어
• 피하기: EĞ지지 않는 기술적 주장

10

팩 안의 실제 스크린샷

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

11

System Prompt

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