큐레이션 · 오픈 · 무료

Ably

회복력 있는 실시간 애플리케이션 구축을 위한 개발자 중심 인프라 플랫폼.

devrealtime

↓ 디자인 시스템 다운로드 (22 MB)OpenDesign 에서 열기

원본 사이트: https://ably.com

📦 팩 내용 보기 →

디자인 DNA

실시간인프라개발자신뢰성연결성

현대적이고 다중 기기 디지털 경험을 위한 고성능 엔진룸.

컬러

#FF5416Accent

#FFFFFFInk

#C6CED9Ink soft

#03020DBG

#141924BG soft

#3F4555BG quiet

rgba(226,232,240,1.0)Line

높은 우선순위 작업을 위한 생동감 있고 활기찬 주황색 강조색이 적용된 고대비 다크 모드.

타이포그래피

geometric-sans · humanist-sans · monospace

display56px · 500
body17px · 500

주요 메시지를 위해 크고 굵은 표시 텍스트를 사용하여 명확한 타이포그래피 계층을 구축합니다. · 흰색/회색 텍스트와 다크 배경 사이에 충분한 대비를 확보합니다.

여백

4px

8px

12px

16px

24px

32px

48px

64px

일관된 4px 기본 단위가 레이아웃 전체에 구조와 예측 가능한 간격을 제공합니다.

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

미세한 구분을 위한 1px solid rgba(226,232,240,1.0) 및 상호작용 요소를 위한 1px solid rgba(255,255,255,0.25).

0px 4px 4px 0px rgba(0,0,0,0.25)

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

히어로 콘텐츠, 통계, 사용 사례 카드를 위한 명확한 섹션을 갖춘 중앙 컨테이너가 있는 구조화된 12열 그리드 시스템.

모션과 인터랙션

150msmicro

250mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

hover, 색상 변경, 레이아웃 전환과 같은 상호작용 상태를 위한 부드러운 전환.

색상 변경, opacity 조정, 또는 미세한 padding 이동을 통한 시각적 피드백. · 표준 상호작용 피드백으로 즉각적인 응답을 제공하며, 종종 요소를 활성 상태로 전환합니다.

컴포넌트

button 굵고 단색 주요 버튼(주로 주황색 그라디언트)과 outlined 보조 버튼으로, 모두 큰 padding과 둥근 모서리를 가집니다.
card 이미지와 간결한 설명으로 사용 사례를 표시하는 데 사용되는 둥근 모서리의 다크 테마 카드.
chip UI 내에서 상태나 분류를 위해 사용되는 작고 둥근 태그 또는 뱃지.
input 명확한 테두리와 상호작용 요소를 위한 특정 상태를 가진 다크 테마 입력 필드.
hero 강력한 헤드라인, 설명 텍스트, 두드러진 CTA 버튼을 갖춘 크고 왼쪽 정렬된 히어로 섹션.

보이스와 금지 목록

톤 개발자 중심적이며 자신감 있고 권위 있는 톤으로, 신뢰성과 성능을 강조합니다.
헤드라인 직관적이고 이점 지향적이며 간결하며, 종종 강력한 동사와 임팩트 있는 숫자를 사용합니다.
CTA '시작하기'와 같은 동사를 사용하여 명확하고 실행 가능하며 사용자를 안내합니다.

라이트 테마를 사용하지 마세요 — 스크린샷은 흰색 텍스트가 있는 다크 배경(#03020D)을 보여줍니다.
주요 강조색으로 블루를 사용하지 마세요 — 스크린샷은 핵심 작업을 위한 생동감 있는 주황색(#FF5416)을 보여줍니다.
4px보다 작은 둥근 모서리를 사용하지 마세요 — 스크린샷은 카드에 8px-12px를 일관되게 사용하는 것을 보여줍니다.
복잡한 sans-serif 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 및 인간주의적 sans-serif를 보여줍니다.
작고 비좁은 간격을 사용하지 마세요 — 스크린샷은 넉넉한 24px gutter와 큰 padding을 보여줍니다.
장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 현대적이고 기능적인 sans-serif 타이포그래피를 보여줍니다.
피하기: 기술적 가치 제안을 흐리게 하는 지나치게 비공식적이거나 전문 용어가 많은 언어를 피합니다.
피하기: 다크, 고대비 테마와 충돌하는 밝거나 파스텔 톤의 색상 팔레트를 사용하지 않습니다.
피하기: 핵심 정보를 강조하기 위해 과도한 공백을 유지하며 지나치게 붐비는 레이아웃을 피합니다.
피하기: 복잡하거나 예측 불가능한 애니메이션을 피합니다. 모션은 미세하고 목적이 있어야 합니다.
피하기: 경쟁하는 여러 강조색을 사용하지 않습니다. 집중을 위해 주요 주황색만 사용합니다.

팩 안의 실제 스크린샷

Ably — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

이것은 실시간 인프라 플랫폼을 위한 개발자 중심 SaaS 웹사이트입니다. 디자인 DNA는 깊고 어두운 색상 체계(#03020D 배경)와 고대비 흰색(#FFFFFF) 및 부드러운 회색(#C6CED9) 텍스트, 그리고 생동감 있는 주황색(#FF5416) 강조색에 기반합니다. 타이포그래피는 주로 깔끔하고 현대적인 sans-serif(인간주의적 및 기하학적 카테고리)이며, 크고 굵은 헤드라인부터 읽기 쉬운 본문 텍스트까지 명확한 계층을 갖춥니다. 핵심 디자인 제약 조건: 라이트 테마를 절대 사용하지 않고, 블루를 주요 강조색으로 사용하지 않으며, 비좁은 레이아웃을 피합니다. 전체적인 느낌은 전문적이고 신뢰할 수 있으며 매우 기능적이며, 기술적 의사결정자를 대상으로 합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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