---
name: Algolia
description: "This site is worth including as a prime example of a 'Dark Mode First' SaaS developer tool that successfully balances technical complexity with a premium, clean, and highly readable visual system."
version: alpha

colors:
  background: "#000033"
  primary: "#000000"
  secondary: "#374151"
  tertiary: "#003DFF"
  neutral: "#E5E7EB"
  bg-soft: "#F2F2F2"
  bg-quiet: "#F6F6F6"
  muted-soft: "#D6D4E7"
  line: "rgba(0, 0, 0, 0.05)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.55px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A premium AI-powered search platform that balances deep technical capability with accessible, bold visual communication.

*A sophisticated developer-focused search infrastructure that blends dark, technical aesthetics with bright, approachable accents.*

## Colors

High-contrast dark mode foundation with a vibrant primary blue accent and neutral light surfaces for content sections.

- **Background (`#000033`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#374151`)** — uses `ink-soft` token
- **Accent (`#003DFF`)** — uses `accent` token
- **Muted (`#E5E7EB`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.05)`)** — uses `line` token

## Typography

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

- Headlines use a bold, geometric sans with tight tracking.
- Body text defaults to a clean geometric sans for maximum readability.
- Code snippets utilize a standard monospace font.

## Layout

Max-width container centered with a 12-column grid and 24px gutters.

*Rhythm:* 4px base grid with generous spacing for breathing room.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
- rgba(0, 61, 255, 0.12) 0px 0px 6px 2px
- Borders: 1px solid rgb(229, 231, 235)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Solid blue primary buttons with pill or rounded corners, and ghost/outlined secondary buttons.
- **card:** Clean rectangular cards with subtle shadows or borders, often used for showcasing customer logos.
- **chip:** Not prominently visible in the screenshots.
- **input:** Search inputs with subtle borders and magnifying glass icons.
- **hero:** Split layout with bold text on the left and a large, dark-themed product screenshot or interactive visual on the right.

## Do's and Don'ts

**Don't:**
- Don't use a pure black background — the site uses a deep midnight blue (#000033) instead.
- Don't use thin, lightweight font weights for primary text — the site heavily favors bold (700) or regular (400) weights.
- Don't implement sharp, square corners everywhere — the design utilizes rounded corners, primarily 8px or 12px.
- Don't use bright, neon accent colors — the primary accent is a solid, confident blue (#003DFF).
- Don't create overly dense, cramped layouts — the site uses generous spacing (24px gutters, 64px section gaps).
- Don't use complex, heavy drop shadows on UI components — shadows are subtle and primarily used for soft elevation or glow effects.

---

## System Prompt (paste into AI agent)

```
Algolia is a premium AI search platform designed for developers and enterprises. Its visual identity is built on a deep midnight blue (#000033) background for the hero and navigation, contrasting with clean, light gray (#F2F2F2) or white backgrounds for content sections. The primary accent color is a vibrant blue (#003DFF), used strategically for calls-to-action and interactive highlights. Typography relies on a clean geometric sans-serif category, typically using Sora for bold display headlines and Inter for body text. Critical design constraints include avoiding pure black backgrounds, using generous whitespace, maintaining high contrast for readability, utilizing rounded corners (8-12px) over sharp edges, and avoiding overly complex or heavy drop shadows in favor of subtle elevation or glow effects.
```