---
name: Replit
description: "A prime example of modern SaaS design that uses warmth and restraint to make a complex developer tool feel approachable and premium."
version: alpha

colors:
  background: "#F7F6F4"
  primary: "#0E0E0F"
  secondary: "#36373B"
  tertiary: "#FF3C00"
  neutral: "#898C94"
  bg-soft: "#F1F0EE"
  bg-quiet: "#FFFFFF"
  muted-soft: "#D5D4CE"
  line: "rgba(137,140,148,0.3)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

Replit is a browser-based collaborative IDE that lets you build, deploy, and share software without local setup.

*An open, airy workshop where builders sketch ideas and compile them into reality.*

## Colors

Warm, off-white neutrals with a single high-energy orange accent for action.

- **Background (`#F7F6F4`)** — uses `bg` token
- **Primary text (`#0E0E0F`)** — uses `ink` token
- **Secondary text (`#36373B`)** — uses `ink-soft` token
- **Accent (`#FF3C00`)** — uses `accent` token
- **Muted (`#898C94`)** — uses `muted` token
- **Borders (`rgba(137,140,148,0.3)`)** — uses `line` token

## Typography

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

- Headlines use tight negative tracking for a compact, punchy feel.
- Line heights are relatively tight even for body text to maintain density.
- Font weight 500 is used for display/headline emphasis rather than a bold 700.

## Layout

Centered single-column hero with a prominent input field, followed by a multi-column card layout for pricing or features.

*Rhythm:* A 4px baseline grid providing consistent, tight spacing between elements and generous padding for cards.

## Elevation & Depth

- rgba(0,0,0,0.08) 0px 2px 8px 0px
- rgba(0,0,0,0.12) 0px 8px 32px 0px
- Borders: 1px solid rgba(137,140,148,0.3)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped outline buttons for primary actions and solid rounded buttons for secondary or specific triggers.
- **card:** Soft off-white or light gray cards with large border-radius and subtle drop shadows.
- **chip:** Light gray rounded tags or suggestion chips for categorization or quick actions.
- **input:** Large, wide textarea or text input with rounded corners and a solid action button embedded on the right.
- **hero:** Full-width, vertically centered section with a large headline, concise subtext, and a dominant interactive input area.

## Do's and Don'ts

**Don't:**
- Don't use stark pure black backgrounds — the design uses warm off-whites like #F7F6F4 instead.
- Don't use overly decorative or serif fonts — the typography is consistently clean geometric sans-serif.
- Don't use sharp, rectangular corners everywhere — elements rely on generous border-radius like 8px or pill shapes.
- Don't flood the UI with the orange accent — it's reserved strictly for high-priority calls-to-action.
- Don't use heavy drop shadows or high contrast borders — elevation is communicated through very soft, subtle shadows.
- Don't use wide, loose line-heights for headlines — the text is kept tight and compact.

---

## System Prompt (paste into AI agent)

```
Replit is a browser-based developer platform and IDE. Its design uses a warm, off-white palette (#F7F6F4, #F1F0EE) with a single high-energy orange accent (#FF3C00) for primary actions. Typography is strictly geometric sans-serif with tight letter-spacing for a modern, punchy feel. Critical donts: never use stark pure black backgrounds, avoid sharp rectangular corners everywhere, don't flood the UI with orange accents, don't use decorative serif fonts, don't use heavy shadows, and don't use wide line-heights for headlines. The overall feel is clean, premium, and focused on builder productivity.
```