---
name: Tiptap
description: "This site exemplifies a modern, premium developer tool aesthetic with bold typography and clean component showcases."
version: alpha

colors:
  background: "#ffffff"
  primary: "#0d0d0d"
  secondary: "rgba(13,13,13,0.6)"
  neutral: "rgba(13,13,13,0.4)"
  bg-soft: "#f5f5f4"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

A premium developer platform for building and customizing rich text editors.

*A sleek, professional toolkit for building modern text editors.*

## Colors

High-contrast monochrome with vibrant gradient accents for emphasis.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#0d0d0d`)** — uses `ink` token
- **Secondary text (`rgba(13,13,13,0.6)`)** — uses `ink-soft` token
- **Muted (`rgba(13,13,13,0.4)`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use geometric-sans for large, impactful headlines.
- Use humanist-sans for readable body copy and navigation.
- Keep body text weight at 400 for maximum legibility.

## Layout

12-column grid with a max-width container, large margins, and stacked sections on mobile.

*Rhythm:* 8px base grid with 4px sub-grid for fine-tuning.

## Elevation & Depth

- 0 4px 10px 0 rgba(0,0,0,0.04)
- 0 1px 4px 0 rgba(0,0,0,0.03)
- 0 1px 2px 0 rgba(0,0,0,0.02)
- Borders: 1px solid rgba(0,0,0,0.1) or solid 1px border-color: rgb(13, 13, 13)

## Shapes

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

## Components

- **button:** High-contrast solid buttons with pill radius for primary actions.
- **card:** Clean cards with subtle shadows and rounded corners for showcasing templates.
- **chip:** Small tags with pill radius for categorization (e.g., 'Paid', 'Free').
- **input:** Clean, bordered inputs with rounded corners.
- **hero:** Large, bold typographic headline with a vibrant gradient background and embedded editor UI.

## Do's and Don'ts

**Don't:**
- Don't use a dark mode — screenshot shows a predominantly light background.
- Don't use serif fonts — screenshot shows sans-serif typography for all text.
- Don't use low-contrast text — screenshot shows dark text on light backgrounds for high legibility.
- Don't use complex, busy layouts — screenshot shows clean, centered, and well-spaced sections.
- Don't use a single solid background color — screenshot shows vibrant gradient backgrounds.
- Don't use sharp, square corners — screenshot shows rounded corners (8-16px) on all surfaces.

---

## System Prompt (paste into AI agent)

```
Tiptap is a premium developer platform for building AI-native text editors. The design is clean and professional, using a high-contrast monochrome palette (ink #0d0d0d, bg #ffffff) with vibrant gradients for emphasis. Typography is a mix of geometric and humanist sans-serifs, with bold, large headlines for impact. Key elements include a clean navigation, a hero section with an integrated editor preview, and a grid of component templates. Critical donts: never use a dark theme, avoid serif fonts, and never use low-contrast text. The overall feel is modern, trustworthy, and production-ready.
```