큐레이션 · 오픈 · 무료

Fly.io

인프라를 친근하고 빠르게 느끼게 해주는 장난기 있고 개발자 우선의 클라우드 플랫폼입니다.

devtoolsinfra
Fly.io 스크린샷
↓ 디자인 시스템 다운로드 (38 MB)OpenDesign 에서 열기

원본 사이트: https://fly.io

📦 팩 내용 보기 →

01

디자인 DNA

장난기 있는개발자 중심의현대적 인프라친근한자신감 있는

코드를 구축하고 배포하기 위한 친근한 동네 작업실과 같습니다.

02

컬러

#7c3aedAccent
#202237Ink
#281950Ink soft
#f1f2f9BG
#a39ac1Muted
rgba(231,230,244,1)Line

부드럽고 톤 다운된 배경에 어둡고 고대비 텍스트, 그리고 주요 액션을 위한 단일 생동감 있는 보라색 강조색을 사용합니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

디스플레이 텍스트는 개성을 살린 굵고 약간 불규칙한 grotesque체를 사용합니다. · 본문 텍스트는 깔끔하고 읽기 좋은 humanist sans-serif체를 사용합니다. · 강조용 이탤릭체(예: 'fearlessly')는 강조를 위해 serif체를 사용합니다. · 큰 헤드라인은 자간을 좁게, 작은 텍스트는 약간 넓게 설정합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

섹션 사이에는 넉넉한 수직 간격을, 그룹화된 요소 내부에는 좁은 간격을 적용합니다.

05

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

sm · 4px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(231,230,244,1)

rgba(32,34,55,0.075) 0px 0px 0px 1px · rgba(32,34,55,0.05) 0px 10px 15px -3px · rgba(91,33,182,0.1) 0px 5px 5px -2px

06

레이아웃

1280container
12columns
32pxgutter
768 / 1024breakpoints

중앙 정렬된 단일 콜럼 히어로 레이아웃에서 다중 콜럼 기능 그리드로 전환됩니다.

07

모션과 인터랙션

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

색상 및 배경 전환을 위한 표준 ease-in-out 패턴. · 마이크로 인터랙션을 위한 빠른 불투명도 및 변환 변화.

인터랙티브 요소의 미세한 배경 또는 색상 변화. · 표준 누름 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Fly.io — 桌面首屏（hero）
桌面首屏（hero）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fly.io — 移动首屏
移动首屏

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

11

System Prompt

Fly.io는 장난기 있고 친근한 아이덴티티를 가진 개발자 우선의 클라우드 플랫폼입니다. 그 디자인 DNA는 부드러운 라벤더빛 배경(#f1f2f9)과 고대비의 어두운 잉크 텍스트(#202237) 위에 구축되었습니다. 생동감 있는 보라색(#7c3aed)은 행동 유도를 위한 주요 강조색으로 사용됩니다. 타이포그래피는 굵고 개성 있는 grotesque sans-serif체(헤드라인용)와 깔끔한 humanist sans-serif체(본문용), 그리고 강조용 serif 이탤릭체를 혼합합니다. 미학은 장난스러운 손 그림 일러스트레이션과 넉넉한 간격으로 정의됩니다. 핵심 비권장 사항: 다크 모드, 날카로운 모서리, 차갑고 기업적인 언어를 피해야 합니다. 레이아웃은 중앙 정렬되고 여유롭며, 명확성과 친근한 어조를 우선시합니다.

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

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

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

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