CURATED · OPEN · FREE

Render

Intuitive cloud infrastructure for deploying and scaling applications.

devtoolsinfra
Render screenshot
↓ Download design system (9 MB)Open in OpenDesign

Visit: https://render.com

📦 Browse pack contents →

01

Identity DNA

infrastructurecloud platformdeploymentdeveloperproduction

A clean, professional workspace for managing complex infrastructure

02

Color

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

High-contrast black and white foundation with a vibrant purple accent for interactive elements and branding.

03

Typography

geometric-sans · humanist-sans · monospace

Display fonts use tight tracking and line heights for impact · Body text maintains comfortable reading with generous line height · Monospace font is used for code snippets and terminal commands · Limited font weight variations keep the design clean and readable

04

Spacing

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

Consistent 4px base grid with generous whitespace for breathing room

05

Surfaces

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

1px solid #E3E3E3 for cards and containers, 1px solid #0D0D0D for primary actions

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

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Asymmetric two-column hero with text left, illustration right. Standard 12-column grid for content sections.

07

Motion & Interaction

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

Smooth transitions for color and background changes · Transform animations for interactive elements · Opacity fades for content reveals

Color transitions with 0.3s easing, subtle background color changes on interactive elements · Immediate visual feedback with transform and color changes

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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 — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a professional developer tools SaaS platform with a clean, high-contrast black and white foundation. The design uses sharp 2px radius corners, geometric sans-serif headlines (PPNeueMontreal), and humanist sans-serif body text. Key hex colors include #0D0D0D for ink, #FFFFFF for background, #8A05FF for purple accent, and #E3E3E3 for borders. Critical donts: Don't use rounded corners on primary buttons, don't add drop shadows to cards, don't use multiple accent colors, don't use decorative fonts, don't use low-contrast text, don't use busy backgrounds. The layout features an asymmetric two-column hero with technical dashboard illustrations, emphasizing production-ready infrastructure.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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