# Typesense · Design system migration spec

> Source: https://typesense.org  ·  Curated by OpenDesign  ·  en

> The site effectively uses a bold, simple color palette and strong typography to make a complex developer tool feel accessible and modern.

## 1. Identity DNA

The design system for Typesense is built as a sharp, no-nonsense toolkit, mirroring the product's own promise of search without the headaches. Every decision, from the monochromatic base to the purposeful lime-green accent, serves the core identity of being a fast, developer-focused API.

**One-liner:** A clean, developer-focused SaaS landing page for an open-source search engine.
**Keywords:** search · open-source · fast · developer · API
**Analogy:** A sharp, no-nonsense toolkit for developers who want search without the headaches.

## 2. Color

The color system is a study in high contrast, establishing clarity and focus. A foundational black and light-gray canvas is cut by two strategic accents: a vibrant indigo for depth and a signature high-chroma lime green that acts as the primary interactive signal.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F1F1F1` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#4D4D4D` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#353FD7` | single accent |
| `--line` | `rgba(229,231,235,1)` | divider |

**Color principle:** A high-contrast, mostly monochromatic palette grounded in black and light gray, punctuated by a vibrant indigo accent and a signature high-chroma lime green for interactive elements.

This palette is a deliberate tool for directing attention, ensuring interactive elements are unmistakable against the clean backdrop.

## 3. Typography

Typography is split between authority and accessibility, using a bold geometric sans for commanding display headlines and a clean humanist sans for approachable body text. Monospace is reserved strictly for its technical context, creating a clear hierarchy for code snippets.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -1.5px | Main headline |
| h2 | 48px | 1.2 | 500 | -1px | Section headers |
| body | 16px | 1.5 | 300 | -0.28px | Main paragraph text |
| caption | 14px | 1.4 | 300 | 0 | Supporting text |

**Type rules:**
- Use a bold geometric sans for display headlines.
- Use a clean humanist sans for body text with light weight.
- Reserve monospace for code snippets and technical highlights.

## 4. Spacing

All internal spacing adheres to a consistent 4px base grid, creating a predictable and tight visual rhythm across components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid is used extensively for internal component spacing (paddings and gaps).

## 5. Surfaces

Surfaces are defined by subtlety and separation. Light, soft shadows and a consistent 1px border provide just enough depth to organize content without visual weight, keeping the interface light and focused.

- **Radius:** sm 8px · md 12px · lg 16px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0.1) -5px 4px 34px 0px
  - rgba(0,0,0,0.2) 0px 10px 15px -3px
- **Borders:** 1px solid rgb(229,231,235)

## 6. Layout

The layout skeleton begins with a centered, single-column main content area that uses generous whitespace to frame the primary narrative. This focused structure then transitions into a multi-column grid to showcase feature sets in a more digestible, comparative format.

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

**Skeleton:** A centered, single-column main content area with generous whitespace, transitioning to a multi-column grid for feature cards.

## 7. Motion & Interaction

Motion is applied as functional feedback, never as decoration. Transitions are smooth and consistent, using a specific cubic-bezier easing for state changes like hover effects and menu reveals to provide clear, immediate acknowledgment of interaction.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Clipping path animations for menu or element reveals.
  - Subtle hover transforms on primary action buttons.

- **Hover:** Color shifts, subtle background changes, or slight upward translation on interactive elements.
- **Click:** Standard pointer cursor with immediate visual feedback.
- **Transition:** Consistent use of 0.15s to 0.2s cubic-bezier easing for state changes.
- **Keyboard:** Standard focus states implied for interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident and approachable, framing complex technology as accessible through direct, playful language. It avoids jargon and vague promises, opting instead for clear directives and bold, contrasting headlines that speak directly to the developer.

- **Tone:** Confident, approachable, and slightly playful, positioning complex technology as accessible.
- **Headline style:** Large, bold, and direct, often using contrasting colors for emphasis.
- **CTA style:** Action-oriented and encouraging, using playful punctuation or clear directives.
- **Avoid:** Jargon without explanation / Overly formal or stiff language / Vague value propositions

### Don'ts
- ❌ Don't use a complex or busy background — screenshot shows a clean, mostly solid light background.
- ❌ Don't use a heavy or formal serif font for headlines — screenshot shows a bold geometric sans-serif.
- ❌ Don't use a muted or desaturated palette — screenshot features a vibrant lime green and a strong indigo accent.
- ❌ Don't use sharp, square corners for primary elements — screenshot consistently uses rounded or pill-shaped borders.
- ❌ Don't use dark mode as the default — screenshot shows a predominantly light theme.
- ❌ Don't use thin, weak typography — screenshot uses large, bold weights for key messaging.

This system deliberately avoids dark mode as a default, sharp corners on primary elements, and any muted or desaturated palette that would diminish the interface's inherent sharpness and clarity.

## System Prompt (paste into AI tool)

```
This is a developer-focused SaaS landing page for an open-source search engine. The visual identity is clean, confident, and slightly playful, using a predominantly light background with high-contrast typography. Key colors include a solid black (#000000) for primary ink, a vibrant indigo (#353FD7) for accents, and a signature high-chroma lime green (#C0FF58) for primary actions and interactive highlights. The typography features a bold geometric sans for display text and a clean humanist sans for body copy. Critical design constraints: Never use a dark background as the primary canvas; avoid sharp, square corners on interactive elements; and refrain from using muted, low-contrast colors that would reduce the interface's sharpness and clarity.
```