---
name: Builder.io
description: "A classic example of a high-end, technical SaaS landing page that uses a dark theme to convey professionalism and technical depth."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#757575"
  tertiary: "#18B6F6"
  neutral: "#17191C"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.5px"
  subheading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

The AI product development platform for your real codebase and design system.

*A digital command center where designers, PMs, and developers co-exist in a single code-driven environment.*

## Colors

High-contrast dark mode with a single high-chroma cyan accent for primary actions and emphasis.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#757575`)** — uses `ink-soft` token
- **Accent (`#18B6F6`)** — uses `accent` token
- **Muted (`#17191C`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

- Use geometric-sans for display text to match the Poppins-inspired aesthetic.
- Use humanist-sans for body text to ensure readability.
- Use monospace for code snippets and terminal commands.
- Maintain tight tracking on large display text.

## Layout

Standard 12-column grid with a fixed max-width container.

*Rhythm:* 4px base unit with a standard scale.

## Elevation & Depth

- 0px 1px 4px 0px rgba(0,0,0,0.08)
- 0px 0px 30px 0px rgba(0,0,0,0.2)
- Borders: 1px solid rgba(255,255,255,0.1)

## Shapes

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

## Components

- **button:** High-contrast cyan primary button with rounded corners, and ghost/outline secondary buttons.
- **card:** Dark surface cards with subtle borders and generous padding.
- **chip:** Small rounded labels for categorization.
- **input:** Standard form inputs with dark backgrounds.
- **hero:** Full-width section with large typography and a conceptual illustration.

## Do's and Don'ts

**Don't:**
- Don't use a light background — screenshot shows a deep black (#000000) background.
- Don't use a secondary accent color — screenshot shows a single dominant cyan (#18B6F6).
- Don't use high-contrast borders for every card — screenshot shows subtle or no borders on many elements.
- Don't use serif fonts for display text — screenshot shows a geometric sans-serif.
- Don't use centered alignment for body text — screenshot shows left-aligned paragraphs.
- Don't use excessive decorative icons — screenshot uses clean, minimalist line icons.
- Don't use small, cramped layouts — screenshot shows generous whitespace and padding.

---

## System Prompt (paste into AI agent)

```
This is Builder.io, a premium SaaS developer tool. The design is characterized by a high-contrast dark mode (#000000 background, #FFFFFF text) with a single, vibrant cyan accent (#18B6F6). Typography is geometric sans-serif for display and humanist sans-serif for body. The layout is clean and spacious, emphasizing clarity and professionalism. Critical donts: Never use a light theme, never introduce a secondary accent color, and never use decorative or cluttered UI elements. The system is built for technical users who value efficiency and production-readiness.
```