CURATED · OPEN · FREE

Webstudio

A sleek, dark-themed developer tool platform focusing on speed and dynamic rendering.

designnocode
Webstudio screenshot
↓ Download design system (44 MB)Open in OpenDesign

Visit: https://webstudio.is

📦 Browse pack contents →

01

Identity DNA

web developmentno-codeperformancehostingbuilder

A modern developer-focused IDE interface

02

Color

linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)Accent
#E6E7E9Ink
#D0D3D4Ink soft
#11181CBG
#1A1D1EBG soft
rgba(255,255,255,0.05)BG quiet
#A6A9ABMuted
rgba(208,211,212,0.19)Line

High contrast ink on dark backgrounds with subtle borders

03

Typography

humanist-sans · monospace

Use 400 weight for body text · Use 600 weight for emphasis and UI elements · Apply tight letter spacing (-1.5px) to large display text

04

Spacing

4px
9px
18px
27px
36px
72px
144px

4.5px base unit with vertical rhythm multiples

05

Surfaces

sm · 4px
md · 9px
lg · 18px
pill · 100000px

1px solid rgba(208,211,212,0.19)

0 2px 3px rgba(0,0,0,0.13) · 0 0 32px rgba(74,78,250,0.5)

06

Layout

1200container
12columns
27pxgutter
768 / 1024breakpoints

Centered content with generous vertical padding

07

Motion & Interaction

150msmicro
250mssmall
1500msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

Smooth color and scale transitions on hover · Linear slide animations for continuous motion · Spring-like bounce for playful interactions

Scale up slightly and change color with smooth transition · Subtle scale down effect

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

A developer-focused web application builder platform with dark theme. Primary background is deep charcoal (#11181C) with lighter dark surfaces (#1A1D1E). Text is light gray (#E6E7E9) on dark. Accent is a vibrant multi-color gradient (teal to purple to pink to gold). Typography uses Manrope (humanist-sans) with tight letter spacing for headlines. Key elements include rounded buttons (100px radius), subtle borders (rgba(208,211,212,0.19)), and card-based layouts. Critical don'ts: don't use light mode, don't use serif fonts, don't use sharp corners, don't use solid accent colors, don't use heavy shadows, don't use all caps for body text. Focus on performance messaging and developer experience.

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