---
name: Webstudio
description: "This site showcases modern dark UI patterns with thoughtful use of gradients and subtle elevation, making it excellent for developer tool design inspiration"
version: alpha

colors:
  background: "#11181C"
  primary: "#E6E7E9"
  secondary: "#D0D3D4"
  tertiary: "linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)"
  neutral: "#A6A9AB"
  bg-soft: "#1A1D1E"
  bg-quiet: "rgba(255,255,255,0.05)"
  muted-soft: "rgba(208,211,212,0.6)"
  line: "rgba(208,211,212,0.19)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-1.5px"

rounded:
  sm: 4.5px
  md: 9px
  lg: 18px
  pill: 100000px

spacing:
  xs: 4.5px
  sm: 9px
  md: 18px
  lg: 27px
  xl: 36px
  2xl: 72px
  3xl: 144px

---

## Overview

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

*A modern developer-focused IDE interface*

## Colors

High contrast ink on dark backgrounds with subtle borders

- **Background (`#11181C`)** — uses `bg` token
- **Primary text (`#E6E7E9`)** — uses `ink` token
- **Secondary text (`#D0D3D4`)** — uses `ink-soft` token
- **Accent (`linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)`)** — uses `accent` token
- **Muted (`#A6A9AB`)** — uses `muted` token
- **Borders (`rgba(208,211,212,0.19)`)** — uses `line` token

## Typography

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

## Layout

Centered content with generous vertical padding

*Rhythm:* 4.5px base unit with vertical rhythm multiples

## Elevation & Depth

- 0 2px 3px rgba(0,0,0,0.13)
- 0 0 32px rgba(74,78,250,0.5)
- Borders: 1px solid rgba(208,211,212,0.19)

## Shapes

- `sm`: 4.5px
- `md`: 9px
- `lg`: 18px
- `pill`: 100000px

## Components

- **button:** Rounded pill buttons with subtle borders or gradient backgrounds
- **card:** Dark cards with subtle borders and rounded corners (9px)
- **chip:** Small rounded tags with subtle borders
- **input:** Dark inputs with subtle borders and rounded corners
- **hero:** Large centered headline with gradient accents and floating UI elements

## Do's and Don'ts

**Don't:**
- Don't use light backgrounds — screenshot shows dark mode primary
- Don't use serif fonts — screenshot shows humanist sans-serif exclusively
- Don't use high-saturation solid accent colors — screenshot uses gradients
- Don't use sharp corners — screenshot shows rounded elements (9px+)
- Don't use heavy box shadows — screenshot uses subtle elevation or glow
- Don't use all caps for body text — screenshot uses sentence case

---

## System Prompt (paste into AI agent)

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