CURATED · OPEN · FREE

Gitpod

The platform for background agents.

devtool

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://www.gitpod.io

📦 Browse pack contents →

Identity DNA

AICloudPlatformAutomationGovernance

An enterprise-grade orchestration platform for autonomous AI software agents.

Color

#397554Accent

#0A0E19Ink

#636363Ink soft

#FFFFFFBG

#F9F9F9BG soft

#E1E1E1BG quiet

#818181Muted

rgba(10,14,25,1.0)Line

High-contrast monochrome base with subtle gray tiers, using a dark green accent for key links.

Typography

transitional-serif · neo-grotesque-sans · monospace

display72px · 400
body18px · 400
caption12px · 400

Use transitional serif for large display typography to convey editorial authority. · Use neo-grotesque sans for all UI elements and body copy for maximum readability. · Maintain tight letter spacing for large display text to create a cohesive block.

Spacing

4px

8px

12px

16px

24px

32px

40px

43px

64px

8px grid

Surfaces

sm · 6px

md · 8px

lg · 12px

pill · 33554440px

1px solid rgba(10,14,25,1.0)

0px 0px 120px 0px rgba(0,0,0,0.07) · 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with generous whitespace and a fixed top navigation bar.

Motion & Interaction

200msmicro

300mssmall

800msmedium

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

Smooth opacity transitions for menu and UI state changes. · Subtle background and border color transitions on hover.

Smooth color transitions for text and borders. · Subtle visual feedback via opacity or background changes.

Components

button Dark solid fill with white text or white fill with dark border and text.
card Clean containers with subtle borders and 8px radius.
chip Small rounded containers for tags or status indicators.
input Standardized text fields with clear focus states.
hero Large editorial-style serif headline paired with sans-serif subtext.

Voice & Don'ts

Tone Authoritative, professional, and highly technical.
Headlines Bold, declarative statements in a serif typeface.
CTAs Direct and action-oriented, such as 'Get started' or 'Request a demo'.

Don't use neon or high-chroma accent colors — screenshot shows a muted dark green accent.
Don't use overly decorative sans-serif fonts — screenshot shows a transitional serif for display and a clean neo-grotesque for body.
Don't use heavy drop shadows — screenshot shows minimal, large-radius box shadows or none at all.
Don't use low contrast for primary text — screenshot shows a very dark (#0A0E19) ink against a white background.
Don't use complex, busy background patterns — screenshot shows clean, solid color backgrounds.
Don't use harsh, square corners — screenshot shows a consistent use of 8px to 12px border radius.
Avoid: Overly casual slang
Avoid: Excessive exclamation points
Avoid: Ambiguous technical jargon without context

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a high-end, enterprise-focused B2B SaaS platform for AI developer tools. It utilizes a clean, monochrome palette (white, light gray, dark gray, near-black) with a single muted dark green accent (#397554) for emphasis. Typography contrasts a large, authoritative transitional-serif for display headlines against a clean neo-grotesque-sans for all body and UI text. Key layout constraints: use generous whitespace, 12-column centered grids, and 8px-based border radius. Critical constraints: maintain high contrast between ink (#0A0E19) and background, avoid overly decorative fonts, use only the specified muted green for accent links, and ensure all interactive elements use a standard 0.2s cubic-bezier transition.

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