---
name: Deno
description: "This site is a great example of modern developer documentation design, balancing bold typography with a clean, approachable aesthetic."
version: alpha

colors:
  background: "#ffffff"
  primary: "#0a0e1c"
  secondary: "#1f2328"
  tertiary: "#70ffaf"
  neutral: "#868789"
  bg-soft: "#ecf3fd"
  bg-quiet: "#f5f5f5"
  muted-soft: "#e5eaea"
  line: "rgba(229, 234, 234, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 13.6px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

An uncomplicated JavaScript runtime for the modern web.

*a well-organized toolbox for modern web developers*

## Colors

Clean white backgrounds with a distinct mint green accent for primary actions.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#0a0e1c`)** — uses `ink` token
- **Secondary text (`#1f2328`)** — uses `ink-soft` token
- **Accent (`#70ffaf`)** — uses `accent` token
- **Muted (`#868789`)** — uses `muted` token
- **Borders (`rgba(229, 234, 234, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

Full-width hero split into two columns, transitioning to single column on mobile.

*Rhythm:* Standard 4px grid with consistent vertical rhythm based on line heights.

## Elevation & Depth

- 0px 1px 3px 0px rgba(0, 0, 0, 0.1)
- 0px 4px 6px -1px rgba(0, 0, 0, 0.1)
- 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
- Borders: 1px solid #e5eaea

## Shapes

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

## Components

- **button:** Pill-shaped primary buttons with solid mint green background and dark text; secondary buttons with dark background and white text.
- **card:** Softly shadowed containers with white backgrounds and subtle rounded corners.
- **chip:** Small rounded pill-shaped elements used for tags or interactive labels.
- **input:** Rounded search field with subtle border and integrated search icon.
- **hero:** Large asymmetric split layout featuring a bold headline on the left and a rounded illustration on the right.

## Do's and Don'ts

**Don't:**
- Don't use complex gradients — screenshot shows solid flat backgrounds.
- Don't use decorative serif fonts — screenshot shows clean sans-serif typography.
- Don't use harsh neon colors — screenshot uses a specific soft mint green for accents.
- Don't use cluttered layouts with many competing focal points — screenshot uses generous white space.
- Don't use sharp, boxy corners on primary elements — screenshot uses rounded and pill-shaped corners.
- Don't use dark mode as the primary theme — screenshot shows a predominantly light, white-based interface.

---

## System Prompt (paste into AI agent)

```
This is the website for Deno, an open-source JavaScript runtime. The design is clean, modern, and developer-focused. Key colors include a white background (#ffffff), a very light blue-gray for soft sections (#ecf3fd), deep dark ink (#0a0e1c) for text, and a distinct mint green (#70ffaf) as the primary accent for calls to action. The typography uses a bold grotesque sans-serif for headlines and a humanist sans-serif for body text, with monospace fonts for code snippets. Critical donts: avoid complex dark backgrounds, do not use decorative serif fonts, and maintain generous whitespace rather than cluttered layouts. The system is calm, refined, and focuses on uncomplicating developer tools.
```