# Tiptap · Design system migration spec

> Source: https://tiptap.dev  ·  Curated by OpenDesign  ·  en

> This site exemplifies a modern, premium developer tool aesthetic with bold typography and clean component showcases.

## 1. Identity DNA

The Tiptap design system is constructed as a sleek, professional toolkit for building modern text editors. Its identity is rooted in the precision and modularity expected by its developer audience, marrying a production-ready aesthetic with the flexibility of its component library.

**One-liner:** A premium developer platform for building and customizing rich text editors.
**Keywords:** developer · editor · AI-native · production-ready · components
**Analogy:** A sleek, professional toolkit for building modern text editors.

## 2. Color

The palette operates on a principle of high-contrast monochrome, establishing a clear, authoritative canvas. Vibrant, multi-color gradients are reserved for strategic accents, creating focal points without overwhelming the content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f4` | card background |
| `--ink` | `#0d0d0d` | body text |
| `--ink-soft` | `rgba(13,13,13,0.6)` | secondary text |
| `--muted` | `rgba(13,13,13,0.4)` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with vibrant gradient accents for emphasis.

This contrast ensures maximum legibility while reserving vibrant expression for moments of key emphasis.

## 3. Typography

Typographic voice is split between two distinct roles: geometric sans-serifs for bold, impactful headlines and humanist sans-serifs for highly readable body copy and navigation. This duality creates a dynamic hierarchy, balancing strong declarative statements with approachable, functional text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 700 | -2px | Hero headline |
| h1 | 56px | 1.1 | 700 | -1px | Section headlines |
| body | 22px | 1.5 | 400 | 0 | Body text |
| small | 16px | 1.4 | 400 | 0 | UI text and navigation |
| caption | 12px | 1.5 | 400 | 0.5px | Fine print and tags |

**Type rules:**
- 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.

## 4. Spacing

An 8px base grid, refined by a 4px sub-grid, establishes a consistent and rhythmic foundation for all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with 4px sub-grid for fine-tuning.

## 5. Surfaces

Surfaces are defined by subtle elevation and minimal decoration. A hierarchy of three soft shadows and fine, low-opacity borders creates depth without visual noise.

- **Radius:** sm 8px · md 12px · lg 16px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is built on a 12-column grid within a max-width container, framed by large margins for a centered, focused reading experience. On mobile, content gracefully collapses into a single, stacked column, maintaining generous spacing between sections.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as functional feedback rather than decoration. All transitions use a consistent, custom cubic-bezier easing curve over 250ms to create smooth, predictable interactions across color, transform, and opacity changes.

- **Durations:** micro 250ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.65, 0, 0.35, 1)`
- **Patterns:**
  - Smooth transitions for color, transform, and border-radius.
  - Scale animations for interactive elements.
  - Consistent easing across all interactive states.

- **Hover:** Subtle background-color change or transform on hover.
- **Click:** Scale down or opacity change on click.
- **Transition:** All properties transition over 250ms using a custom cubic-bezier easing.
- **Keyboard:** Standard focus states with visible outlines.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and developer-focused. Headlines are direct and action-oriented, while calls to action emphasize speed and production-readiness, avoiding vague propositions or unnecessary jargon.

- **Tone:** Professional, confident, and developer-focused.
- **Headline style:** Direct, action-oriented, and bold.
- **CTA style:** Clear and concise, emphasizing speed and production-readiness.
- **Avoid:** Overly casual or playful language. / Jargon that isn't standard in developer communities. / Vague value propositions.

### Don'ts
- ❌ 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.

The system deliberately omits dark mode, serif typefaces, and low-contrast text to uphold its core principles of clarity and professional utility.

## System Prompt (paste into AI tool)

```
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.
```