.webp)
Searchable
Full Stack Visibility & Analytics for AI SEO
No items found.
No items found.
Visual identity
Searchable.com — Design System Overview
Source:
Analyzed: 2026-07-15
Stack: Next.js · Tailwind CSS · Mintlify (docs)
Note: Site is fully client-rendered; CSS extracted via proxy signals, Tailwind class inspection in docs, and category/brand context.
Typography
- Primary font: Inter (Google Fonts) — standard for AI/SaaS dashboards on Next.js + Tailwind
- Mono font: JetBrains Mono or font-mono (Tailwind default) for code/data
- Scale: Tailwind default type scale (sm/base/lg/xl/2xl/3xl/4xl)
- Weight range: 400 (body) · 500 (medium) · 600 (semibold) · 700 (bold)
Color Philosophy
Dark-primary AI SaaS product with a neutral near-black canvas and a single cool-violet/indigo accent. Light mode available. Brand communicates authority, technical depth, and modern AI tooling.
- Background (dark): Near-black #0A0A0F or #09090B (Zinc-950 range)
- Surface (dark): #111118 / #18181B (Zinc-900 range)
- Accent: Violet/indigo — #6366F1 (Indigo-500) or #7C3AED (Violet-600)
- Text primary: #FAFAFA (Zinc-50)
- Text muted: #A1A1AA (Zinc-400)
- Border: #27272A (Zinc-800)
- Success: #22C55E (Green-500)
- Warning: #F59E0B (Amber-500)
- Destructive: #EF4444 (Red-500)
Spacing System
Tailwind 4px base grid: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64px
Component Defaults
- Border radius: Rounded-lg (8px) for cards; rounded-md (6px) for inputs/buttons; rounded-full for badges/pills
- Shadows: Subtle shadow-sm on cards; glow effects on accent elements using ring utilities
- Buttons: Solid accent fill (primary) · Ghost/outline (secondary) · Destructive red
- Transitions: 150ms ease (Tailwind default)
Layout
- Max content width: max-w-7xl (1280px) or max-w-6xl (1152px)
- Sidebar dashboard layout (app) · Full-width marketing pages
- Responsive: mobile-first breakpoints (sm/md/lg/xl/2xl)
- Dark/light mode: system-aware via Tailwind dark: prefix
:root { / ===================== TYPOGRAPHY ===================== / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
/ ===================== SPACING (4px base grid) ===================== / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-xs: 0.5rem; / 8px / --space-sm: 0.75rem; / 12px / --space-md: 1rem; / 16px / --space-lg: 1.5rem; / 24px / --space-xl: 2rem; / 32px / --space-2xl: 3rem; / 48px / --space-3xl: 4rem; / 64px /
/ ===================== COLORS — LIGHT MODE ===================== / --color-background: #ffffff; --color-background-subtle: #f4f4f5; --color-surface: #ffffff; --color-surface-raised: #fafafa; --color-foreground: #09090b; --color-foreground-muted: #71717a; --color-foreground-subtle: #a1a1aa; --color-border: #e4e4e7; --color-border-subtle: #f4f4f5;
/ Accent — Indigo/Violet / --color-accent: #6366f1; --color-accent-hover: #4f46e5; --color-accent-subtle: #eef2ff; --color-accent-foreground: #ffffff;
/ Semantic / --color-success: #22c55e; --color-success-subtle: #f0fdf4; --color-warning: #f59e0b; --color-warning-subtle: #fffbeb; --color-destructive: #ef4444; --color-destructive-subtle: #fef2f2;
/ ===================== BORDER RADIUS ===================== / --radius-xs: 0.125rem; / 2px / --radius-sm: 0.375rem; / 6px — inputs, small buttons / --radius-md: 0.5rem; / 8px — cards, modals / --radius-lg: 0.75rem; / 12px — large cards / --radius-xl: 1rem; / 16px — panels / --radius-full: 9999px; / pills, badges /
/ ===================== SHADOWS ===================== / --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-accent: 0 0 0 3px rgb(99 102 241 / 0.25);
/ ===================== TRANSITIONS ===================== / --transition-fast: 100ms ease; --transition-default: 150ms ease; --transition-slow: 300ms ease;
/ ===================== LAYOUT ===================== / --max-width-content: 80rem; / 1280px — max-w-7xl / --max-width-prose: 65ch; --sidebar-width: 16rem; / 256px / --header-height: 3.5rem; / 56px / }
/ ===================== DARK MODE ===================== / [data-theme="dark"], .dark { --color-background: #09090b; --color-background-subtle: #111118; --color-surface: #18181b; --color-surface-raised: #27272a; --color-foreground: #fafafa; --color-foreground-muted: #a1a1aa; --color-foreground-subtle: #71717a; --color-border: #27272a; --color-border-subtle: #3f3f46;
--color-accent: #818cf8; --color-accent-hover: #6366f1; --color-accent-subtle: #1e1b4b; --color-accent-foreground: #ffffff;
--color-success: #4ade80; --color-success-subtle: #052e16; --color-warning: #fbbf24; --color-warning-subtle: #1c1702; --color-destructive: #f87171; --color-destructive-subtle: #1c0505;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4); }
Searchable.com — Design Tokens Reference
Values are approximate — derived from stack fingerprint (Next.js + Tailwind CSS), Mintlify docs class inspection, and AI SaaS design category conventions. See designNotes.
Color Tokens
Light Mode
| Token | Value | Usage |
|---|---|---|
| --color-background | #ffffff | Page background |
| --color-background-subtle | #f4f4f5 | Zinc-100 |
| --color-surface | #ffffff | Card/panel base |
| --color-surface-raised | #fafafa | Elevated card |
| --color-foreground | #09090b | Primary text |
| --color-foreground-muted | #71717a | Secondary text |
| --color-foreground-subtle | #a1a1aa | Placeholder/disabled |
| --color-border | #e4e4e7 | Dividers, inputs |
| --color-accent | #6366f1 | Indigo-500 — CTA, links |
| --color-accent-hover | #4f46e5 | Indigo-600 |
| --color-accent-subtle | #eef2ff | Indigo-50 — highlight bg |
| --color-success | #22c55e | Positive metrics |
| --color-warning | #f59e0b | Caution states |
| --color-destructive | #ef4444 | Errors, delete |
Dark Mode
| Token | Value | Usage |
|---|---|---|
| --color-background | #09090b | Zinc-950 — page bg |
| --color-background-subtle | #111118 | Slightly lighter bg |
| --color-surface | #18181b | Zinc-900 — cards |
| --color-surface-raised | #27272a | Zinc-800 — elevated |
| --color-foreground | #fafafa | Zinc-50 — primary text |
| --color-foreground-muted | #a1a1aa | Zinc-400 |
| --color-foreground-subtle | #71717a | Zinc-500 |
| --color-border | #27272a | Zinc-800 |
| --color-accent | #818cf8 | Indigo-400 (dark-mode accent) |
| --color-accent-hover | #6366f1 | Indigo-500 |
| --color-accent-subtle | #1e1b4b | Indigo-950 |
| --color-success | #4ade80 | Green-400 |
| --color-warning | #fbbf24 | Amber-400 |
| --color-destructive | #f87171 | Red-400 |
Spacing Tokens
| Token | Value | px equiv |
|---|---|---|
| --space-xs | 0.5rem | 8px |
| --space-sm | 0.75rem | 12px |
| --space-md | 1rem | 16px |
| --space-lg | 1.5rem | 24px |
| --space-xl | 2rem | 32px |
| --space-2xl | 3rem | 48px |
| --space-3xl | 4rem | 64px |
Base grid: 4px (Tailwind default)
Typography Tokens
| Token | Value |
|---|---|
| --font-family-base | 'Inter', system-ui, sans-serif |
| --font-family-mono | 'JetBrains Mono', ui-monospace |
| --font-size-sm | 0.875rem / 14px |
| --font-size-base | 1rem / 16px |
| --font-size-lg | 1.125rem / 18px |
| --font-size-xl | 1.25rem / 20px |
| --font-size-2xl | 1.5rem / 24px |
| --font-size-3xl | 1.875rem / 30px |
| --font-size-4xl | 2.25rem / 36px |
| --font-weight-medium | 500 |
| --font-weight-semibold | 600 |
| --font-weight-bold | 700 |
| --line-height-normal | 1.5 |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 0.375rem / 6px | Inputs, small buttons |
| --radius-md | 0.5rem / 8px | Cards, modals |
| --radius-lg | 0.75rem / 12px | Large panels |
| --radius-xl | 1rem / 16px | Feature cards |
| --radius-full | 9999px | Badges, pills, avatars |
Shadow Tokens
| Token | Value |
|---|---|
| --shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| --shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
| --shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
| --shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
| --shadow-accent | 0 0 0 3px rgb(99 102 241 / 0.25) |
Transition Tokens
| Token | Value | Usage |
|---|---|---|
| --transition-fast | 100ms ease | Hover micro-interactions |
| --transition-default | 150ms ease | Standard UI transitions |
| --transition-slow | 300ms ease | Modal open/close, page transitions |
Implementation Notes — Searchable.com
UI Framework \- Framework: Next.js (App Router / Pages Router — Next.js \_next/ static paths confirmed) \- CSS: Tailwind CSS (confirmed via Mintlify docs inspection: dark:hidden, dark:block, className JSX patterns in rendered markdown) \- Docs platform: Mintlify (docs.searchable.com) — uses Tailwind + MDX \- Analytics: Google Tag Manager (GTM-PWWF8S78) \- Hosting: Likely Vercel (Next.js + setup docs reference Vercel Log Drain integration)
Theme / Dark Mode Support \- Dark + light mode: Confirmed — docs explicitly render two hero images with dark:hidden / dark:block Tailwind classes \- Default mode: Likely dark (AI analytics SaaS convention; dark mode referenced first in docs) \- Toggle mechanism: Tailwind dark: prefix, likely class-based (not media query) via next-themes or similar
Source Confidence \- Stack (Next.js + Tailwind): High confidence — confirmed from \_next/ URL structure, JSX patterns in blog markdown, Mintlify docs Tailwind classes \- Color values: Low-medium confidence — values are approximate. Site is fully client-rendered (SPA shell only returned by fetch proxy). Colors derived from: (1) Zinc-family neutral palette standard for dark Next.js + Tailwind SaaS, (2) Indigo-500/Violet accent common for AI/analytics brands on this stack, (3) Mintlify docs default accent (indigo) matching brand category \- Typography: Medium confidence — Inter is by far the most common font on Next.js + Tailwind SaaS products; not directly observed in CSS \- Spacing / radius / shadows: Medium confidence — Tailwind defaults with minor customizations; typical for this category
Notable Patterns \- Product type: AI SEO/AEO analytics dashboard with sidebar layout (app.searchable.com) + marketing site ([www.searchable.com](http://www.searchable.com)) \- Brand accent: Indigo/violet family — consistent with AI-tech positioning (cf. Linear, Vercel, Supabase) \- OG image: searchable-og.png / searchable-logo.png — dark wordmark brand \- Middleware SDK: @searchablehq/middleware npm package — suggests modern Node.js engineering culture aligning with clean, utility-first CSS \- Dashboard layout: Sidebar-left navigation + main content area, standard analytics SaaS pattern \- Marketing pages: Full-width sections, hero → features → pricing → CTA structure
To Verify To confirm exact values, render the site in a browser and run: getComputedStyle(document.documentElement).getPropertyValue('--your-token') or inspect the Tailwind config via window.NEXT\_DATA or the Network tab CSS chunks.