Algolia DESIGN.md

AI search and discovery design with deep navy trust, electric blue action, and fast, relevance-first product structure.

1. Visual Theme & Atmosphere

Algolia should feel fast, precise, and commercial. The visual language is clean SaaS with enough energy to communicate instant search, ranking, relevance, and conversion. Interfaces should make discovery feel effortless rather than decorative.

• Mood: fast, exact, intelligent, trusted, developer-friendly
• Density: medium, with room for metrics, filters, results, and examples
• Character: navy foundations, bright blue highlights, crisp cards, clear search affordances

2. Color Palette & Roles

Use blue for action and search state. Keep navy for trust and enterprise framing. Use the wider accent palette sparingly for charts, result ranking, and insight states.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #3369E7;
  border-radius: 999px;
  background: #3369E7;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.search-input {
  min-height: 48px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid #DDE7F0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #050F2C;
}

.search-input:focus {
  outline: none;
  border-color: #00AEFF;
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.16);
}

.result-card {
  border: 1px solid #DDE7F0;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 20px;
}

5. Layout Principles

Lead with search, results, and proof. Use split layouts for explanation plus product example, but keep the search interaction visually dominant.

6. Depth & Elevation

Use borders first, shadows second.

css.shadow-card { box-shadow: 0 8px 18px rgba(5, 15, 44, 0.07); }
.shadow-panel { box-shadow: 0 18px 42px rgba(5, 15, 44, 0.12); }

7. Do's and Don'ts

Do make search fields, filters, and result cards instantly legible. Do use metrics to show speed and relevance. Do not overuse every accent color at once. Do not bury the search action below decorative content.

8. Responsive Behavior

Keep search controls at least 44px tall and stack filters below search on mobile.

9. Agent Prompt Guide

Design like Algolia: deep navy trust, electric blue search actions, crisp white result cards, compact metadata, and a fast AI-discovery feeling. Emphasize search, relevance, speed, and conversion without turning the page into a generic SaaS dashboard.