---
name: Dify
description: "Worth including as a prime example of modern, clean SaaS design for developer tools, balancing professionalism with clear visual hierarchy."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#666666"
  tertiary: "#0033FF"
  neutral: "#333333"
  bg-soft: "#E5EAFF"
  bg-quiet: "#F8F9FB"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 45px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.4px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 38px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.4px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

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

*A sleek, professional developer console meets modern SaaS dashboard*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#0033FF`)** — uses `accent` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** 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

## Layout

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

*Rhythm:* Consistent 4px base unit with generous whitespace in hero sections

## Elevation & Depth

- rgb(229, 234, 255) 0px 0px 0px 1px
- rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- Borders: Thin 1px borders using soft blue-gray (#E5EAFF)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid blue (#0033FF) primary button with white text, rounded corners
- **card:** White cards with subtle blue-gray border (#E5EAFF)
- **chip:** Small pill-shaped labels with light blue background (#E5EAFF)
- **input:** Clean input fields with bottom border styling
- **hero:** Large typography hero with centered content and wide whitespace

## Do's and Don'ts

**Don't:**
- don't use decorative fonts — screenshot shows clean sans-serif throughout
- don't use multiple accent colors — screenshot shows only one dominant blue (#0033FF)
- don't use heavy shadows — screenshot shows very subtle, minimal shadow usage
- don't use rounded corners everywhere — screenshot shows mostly sharp or slightly rounded corners
- don't use busy backgrounds — screenshot shows mostly solid white or very light gray backgrounds
- don't use centered text for body copy — screenshot shows left-aligned body text

---

## System Prompt (paste into AI agent)

```
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.
```