큐레이션 · 오픈 · 무료

Render

애플리케이션 배포 및 확장을 위한 직관적인 클라우드 인프라.

devtoolsinfra
Render 스크린샷
↓ 디자인 시스템 다운로드 (9 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

인프라클라우드 플랫폼배포개발자프로덕션

복잡한 인프라를 관리하기 위한 깔끔하고 전문적인 작업 공간

02

컬러

#8A05FFAccent
#0D0D0DInk
#4D4D4DInk soft
#FFFFFFBG
#6B6B6BMuted
rgba(227,227,227,1)Line

고대비 흑백 기반에 인터랙티브 요소와 브랜딩을 위한 대담한 보라색 악센트.

03

타이포그래피

geometric-sans · humanist-sans · monospace

디스플레이 폰트는 임팩트를 위해 타이트한 트래킹과 라인 높이를 사용합니다 · 본문 텍스트는 넉넉한 라인 높이로 편안한 가독성을 유지합니다 · 모노스페이스 폰트는 코드 스니펫과 터미널 명령어에 사용됩니다 · 제한된 폰트 웨이트 변형으로 디자인을 깔끔하고 가독성 있게 유지합니다

04

여백

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

일관된 4px 기본 그리드와 호흡을 위한 넉넉한 여백

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

카드와 컨테이너용 1px solid #E3E3E3, 주요 액션용 1px solid #0D0D0D

0px 0px 0px 1px rgba(227,227,227,1) · 0px 0px 0px 1px rgba(13,13,13,1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

텍스트가 왼쪽, 일러스트레이션이 오른쪽에 위치한 비대칭 2열 히어로 레이아웃. 콘텐츠 섹션에는 표준 12열 그리드를 사용합니다.

07

모션과 인터랙션

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

색상 및 배경 변경을 위한 부드러운 전환 · 인터랙티브 요소를 위한 transform 애니메이션 · 콘텐츠 표시를 위한 opacity fade

0.3s easing을 사용한 색상 전환, 인터랙티브 요소의 미세한 배경색 변경 · transform과 색상 변경을 통한 즉각적인 시각적 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이 플랫폼은 깔끔하고 고대비 흑백 기반을 가진 전문 개발자 도구 SaaS 플랫폼입니다. 디자인은 선명한 2px radius 모서리, 기하학적 산세리프 헤드라인(PPNeueMontreal), 그리고 휴머니스트 산세리프 본문 텍스트를 사용합니다. 주요 hex 색상은 잉크용 #0D0D0D, 배경용 #FFFFFF, 보라색 악센트용 #8A05FF, 테두리용 #E3E3E3입니다. 핵심 주의사항: 주요 버튼에 둥근 모서리를 사용하지 마세요, 카드에 그림자를 추가하지 마세요, 여러 악센트 색상을 사용하지 마세요, 장식용 폰트를 사용하지 마세요, 저대비 텍스트를 사용하지 마세요, 복잡한 배경을 사용하지 마세요. 레이아웃은 기술적인 대시보드 일러스트레이션이 있는 비대칭 2열 히어로를 특징으로 하며, 프로덕션 준비 완료된 인프라를 강조합니다.

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

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

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

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