CURATED · OPEN · FREE

Dify

A clean, developer-focused AI platform with a bold blue accent and structured layout.

aidev
Dify screenshot
↓ Download design system (27 MB)Open in OpenDesign

Visit: https://dify.ai

📦 Browse pack contents →

01

Identity DNA

AI platformdeveloper toolworkflow automation

A sleek, professional developer console meets modern SaaS dashboard

02

Color

#0033FFAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#E5EAFFBG soft
#F8F9FBBG quiet
#333333Muted
rgba(0,0,0,0.1)Line

High-contrast black on white with a single electric blue accent for primary actions

03

Typography

grotesque-sans · monospace

Use tight letter-spacing for large display text · Keep line-height at 1.1 for maximum impact on headlines · Use weight 400 for body text, weight 500 for emphasis

04

Spacing

4px
8px
12px
16px
20px
24px
32px
40px
64px
100px

Consistent 4px base unit with generous whitespace in hero sections

05

Surfaces

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

Thin 1px borders using soft blue-gray (#E5EAFF)

rgb(229, 234, 255) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

Layout

1200container
12columns
24pxgutter
768 / 1024breakpoints

Full-width header, centered content container, multi-column feature grids

07

Motion & Interaction

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Simple opacity transitions for hover states · Smooth scroll behavior between sections

Subtle color shift or opacity change on interactive elements · Immediate visual feedback with color change

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

11

System prompt

Dify is a professional AI developer platform with a clean, minimal aesthetic. The design uses a high-contrast palette of pure white (#FFFFFF) and black (#000000), with a single electric blue accent (#0033FF) for primary actions and highlights. Typography relies on a clean grotesque sans-serif category with tight letter-spacing for headlines. The layout is spacious, with generous whitespace and a structured grid system. Critical design rules: use only one accent color (blue), keep borders subtle with soft blue-gray (#E5EAFF), avoid decorative elements or heavy shadows, maintain left-aligned body text, and preserve the professional, developer-focused tone.

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