CURATED · OPEN · FREE

Algolia

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

01

Identity DNA

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

02

Color

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

03

Typography

humanist-sans · geometric-sans · monospace

• display56px · 700
• h240px · 700
• body16px · 400

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.

04

Spacing

4px base grid with generous spacing for breathing room.

05

Surfaces

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(0, 61, 255, 0.12) 0px 0px 6px 2px

06

Layout

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

07

Motion & Interaction

Smooth color and opacity transitions on hover for buttons and links. · Subtle scale or transform effects on interactive elements.

Subtle background color shifts or opacity changes. · Immediate visual feedback without heavy animations.

08

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.

09

Voice & Don'ts

• Tone Professional, confident, and technically authoritative.
• Headlines Short, punchy, and direct, often using strong adjectives like 'Agentic' or 'Generative'.
• CTAs Action-oriented phrases like 'Explore the platform' or 'Get started'.

• 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.
• Avoid: Avoid overly casual or playful slang.
• Avoid: Avoid cluttered layouts that obscure the core message.
• Avoid: Avoid weak or non-descriptive calls to action.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko