---
name: Modal
description: "This site is a prime example of modern developer tool branding, using a bold, minimalist aesthetic to communicate speed, reliability, and a superior developer experience."
version: alpha

colors:
  background: "#000000"
  primary: "#DDFFDC"
  tertiary: "#7FEE64"
  neutral: "#5B6D5C"
  bg-quiet: "#181818"
  line: "rgba(91, 109, 92, 0.4)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.36px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "-0.36px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0.16px"

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

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

---

## Overview

AI infrastructure that developers love.

*A developer-friendly cloud compute platform that feels local but scales globally.*

## Colors

High contrast neon green accent on deep dark backgrounds for a technical, developer-focused aesthetic.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#DDFFDC`)** — uses `ink` token
- **Accent (`#7FEE64`)** — uses `accent` token
- **Muted (`#5B6D5C`)** — uses `muted` token
- **Borders (`rgba(91, 109, 92, 0.4)`)** — uses `line` token

## Typography

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

- Use geometric-sans for headlines to maintain a technical, modern feel.
- Body text should use humanist-sans for readability on dark backgrounds.
- Maintain tight letter-spacing for display text to enhance the premium aesthetic.

## Layout

A single-column centered layout for the hero, transitioning to multi-column feature sections.

*Rhythm:* A 4px base grid is used consistently for padding, gaps, and margins, ensuring a clean and structured layout.

## Elevation & Depth

- 0 10px 15px -3px rgba(0, 0, 0, 0.1)
- 0 4px 6px -4px rgba(0, 0, 0, 0.1)
- Borders: 1px solid borders using muted green tones to separate sections without being overly harsh.

## Shapes

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

## Components

- **button:** Pill-shaped buttons with solid neon green backgrounds for primary actions and transparent backgrounds with subtle borders for secondary actions.
- **card:** Dark, borderless cards that rely on spacing and typography to define content blocks.
- **chip:** Pill-shaped tags or chips used for categorizing information.
- **input:** Clean, minimalist input fields with subtle borders and clear focus states.
- **hero:** A massive, centered headline with a supporting subheadline and prominent call-to-action buttons, anchored by a large, abstract 3D visual.

## Do's and Don'ts

**Don't:**
- Don't use light mode or white backgrounds — screenshot shows a deep black background.
- Don't use rounded rectangles for buttons — screenshot shows fully pill-shaped buttons.
- Don't use multiple accent colors — screenshot shows a single dominant neon green accent.
- Don't use heavy serif fonts for headlines — screenshot shows clean, geometric sans-serif typography.
- Don't clutter the hero section with too much text — screenshot shows a clear, concise headline and subheadline.
- Don't use bright, saturated colors for body text — screenshot shows muted greens and grays for secondary information.

---

## System Prompt (paste into AI agent)

```
Design a high-end developer tool website with a dark mode aesthetic. Use a deep black background (#000000) with a vibrant neon green accent (#7FEE64) for primary actions and highlights. Typography should be clean and modern, using geometric-sans for headlines and humanist-sans for body text. Maintain a strict 4px base grid for spacing. Critical don'ts: avoid light mode, don't use rectangular buttons (always use pills), and don't use multiple competing accent colors. The tone should be confident and technical, appealing directly to developers.
```