.webp)
Searchable
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.
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.