.webp)
Clutch
Clutch Security — Design System Overview
Stack \- Framework: Next.js (App Router, \_next/static asset paths, dpl deploy IDs) \- CMS: Sanity.io (all editorial images served from cdn.sanity.io) \- Rendering: SSR/SSG hybrid; JavaScript-heavy with client-side tabs/accordions \- Icons/Illustrations: SVG assets via Next.js Image optimization pipeline
Typography \- Primary font: Clean geometric sans-serif (visually consistent with Inter or a similar neutral grotesque); no Google Fonts link detected — likely self-hosted via \_next/static/media \- Headings: Bold weight (700–800), large scale on hero (h1 ~48–64px), section headers ~28–36px \- Body: Regular weight (400), ~16px base, line-height ~1.6 \- Labels/Eyebrow text: Uppercase, letter-spaced, small caps style used for category labels (e.g. "IDENTITIES", "AI Agents") \- CTA links: Arrow-suffixed pattern ("Book a Demo ->"), semi-bold
Color Philosophy \- Light-mode only site (meta-theme-color: #ffffff; both logo variants are "logo-full-black") \- Background: Pure white (#ffffff) with subtle off-white/light-gray section breaks \- Primary text: Near-black (#0a0a0a / #111111) \- Accent / Brand: Deep indigo-blue used for interactive elements, hover states, and highlighted text — consistent with cybersecurity enterprise positioning \- Glow effects: Subtle purple/blue radial glows on hero illustrations (SVG-based, e.g. figure-top-glow, figure-center-glow) \- Muted text: Medium gray for secondary content and nav descriptions \- Borders: Light gray (#e5e5e5 range) for card separators and dividers
Spacing \- Section padding: ~80–120px vertical on desktop \- Card internal padding: ~24–32px \- Grid gap: ~24px \- Consistent 8px base grid inferred from visual rhythm
Component Defaults \- Nav: Sticky top bar, white background, mega-dropdown with icon+description links \- Buttons: Primary = filled dark/black with white text, rounded; Secondary = outlined or text+arrow \- Cards: White background, subtle border, rounded corners (~8–12px radius), drop shadow \- Logo carousel: Auto-scrolling marquee of partner/integration logos (SVG) \- Tabs: Pill-style category selector on content sections \- Testimonial: Single featured quote with avatar photo \- Badge strip: Compliance/award logos in footer (AICPA SOC, ISO 27001, Linux Foundation)
Layout \- Max content width: ~1200–1280px centered \- 12-column grid, responsive breakpoints \- Hero: full-width with centered text over abstract 3D illustration \- Sections alternate: text-left/visual-right, then full-width feature grids \- Footer: multi-column link grid + newsletter signup + compliance badges
:root { / Colors / --color-background: #ffffff; --color-surface: #f9f9f9; --color-surface-alt: #f4f4f5; --color-border: #e5e7eb; --color-border-subtle: #f0f0f0;
--color-text-primary: #0a0a0a; --color-text-secondary: #4b5563; --color-text-muted: #9ca3af; --color-text-inverse: #ffffff;
--color-brand-primary: #1a1aff; / deep indigo-blue, inferred from CTAs / --color-brand-primary-dark: #1212cc; --color-brand-accent: #6366f1; / purple accent used in glows/highlights / --color-brand-glow: rgba(99,102,241,0.15); / radial glow tint /
--color-interactive: #1a1aff; --color-interactive-hover: #1212cc;
--color-neutral-900: #0a0a0a; --color-neutral-800: #1f1f1f; --color-neutral-700: #374151; --color-neutral-500: #6b7280; --color-neutral-300: #d1d5db; --color-neutral-100: #f3f4f6; --color-neutral-50: #fafafa;
/ Typography / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-heading: var(--font-family-base); --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-md: 1.125rem; / 18px / --font-size-lg: 1.25rem; / 20px / --font-size-xl: 1.5rem; / 24px / --font-size-2xl: 1.875rem; / 30px / --font-size-3xl: 2.25rem; / 36px / --font-size-4xl: 3rem; / 48px / --font-size-5xl: 3.75rem; / 60px /
--font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800;
--line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
--letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em;
/ Spacing (8px base grid) / --space-1: 0.25rem; / 4px / --space-2: 0.5rem; / 8px / --space-3: 0.75rem; / 12px / --space-4: 1rem; / 16px / --space-5: 1.25rem; / 20px / --space-6: 1.5rem; / 24px / --space-8: 2rem; / 32px / --space-10: 2.5rem; / 40px / --space-12: 3rem; / 48px / --space-16: 4rem; / 64px / --space-20: 5rem; / 80px / --space-24: 6rem; / 96px / --space-32: 8rem; / 128px /
/ Border Radius / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;
/ Shadows / --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04); --shadow-glow-brand: 0 0 40px rgba(99,102,241,0.2);
/ Layout / --container-max-width: 1280px; --container-padding: 1.5rem; --nav-height: 64px; --section-spacing-y: 5rem; / 80px / --grid-gap: 1.5rem; / 24px / --card-padding: 1.5rem; / 24px / }
/ Dark mode — not implemented on this site (light-only) / / No @media (prefers-color-scheme: dark) overrides detected /
Color Tokens
| Token | Value | Usage |
|---|---|---|
| color-background | #ffffff | Page background |
| color-surface | #f9f9f9 | Card / section backgrounds |
| color-surface-alt | #f4f4f5 | Alternate section fill |
| color-border | #e5e7eb | Card borders, dividers |
| color-text-primary | #0a0a0a | Body text, headings |
| color-text-secondary | #4b5563 | Nav descriptions, subtitles |
| color-text-muted | #9ca3af | Placeholder, disabled |
| color-brand-primary | #1a1aff | CTAs, links, interactive |
| color-brand-accent | #6366f1 | Glow effects, highlights |
| color-brand-glow | rgba(99,102,241,0.15) | Hero radial glows |
Spacing Tokens
| Token | Value | px equiv |
|---|---|---|
| space-1 | 0.25rem | 4px |
| space-2 | 0.5rem | 8px |
| space-4 | 1rem | 16px |
| space-6 | 1.5rem | 24px |
| space-8 | 2rem | 32px |
| space-12 | 3rem | 48px |
| space-16 | 4rem | 64px |
| space-20 | 5rem | 80px (section padding) |
| space-24 | 6rem | 96px |
| space-32 | 8rem | 128px |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-family-base | Inter / system-ui sans | Body, all text |
| font-size-xs | 0.75rem / 12px | Labels, badges |
| font-size-sm | 0.875rem / 14px | Nav descriptions |
| font-size-base | 1rem / 16px | Body copy |
| font-size-lg | 1.25rem / 20px | Sub-headings |
| font-size-xl | 1.5rem / 24px | Section intros |
| font-size-2xl | 1.875rem / 30px | H3 headings |
| font-size-3xl | 2.25rem / 36px | H2 section titles |
| font-size-4xl | 3rem / 48px | H1 hero heading |
| font-size-5xl | 3.75rem / 60px | XL hero callouts |
| font-weight-regular | 400 | Body |
| font-weight-semibold | 600 | Nav items, labels |
| font-weight-bold | 700 | Headings |
| font-weight-extrabold | 800 | Hero H1 |
| letter-spacing-wider | 0.1em | Eyebrow/category labels |
| line-height-normal | 1.5 | Body |
| line-height-tight | 1.2 | Large headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Badges, tags |
| radius-md | 8px | Buttons, small cards |
| radius-lg | 12px | Feature cards |
| radius-xl | 16px | Large content panels |
| radius-2xl | 24px | Hero sections, modals |
| radius-full | 9999px | Pill buttons, avatars |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle lift |
| shadow-md | 0 4px 6px rgba(0,0,0,0.07) | Cards, dropdowns |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.08) | Modals, popovers |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.1) | Featured panels |
| shadow-glow-brand | 0 0 40px rgba(99,102,241,0.2) | Hero figure glows |
Framework: Next.js (App Router) with Sanity.io CMS backend. Assets served via Next.js Image optimization (/\_next/image?url=...&w=...&q=75). No Tailwind config file exposed, but class naming conventions are consistent with a Tailwind or Tailwind-like utility approach.
Theme Support: Light mode only. meta-theme-color: #ffffff confirmed. Both logo files are suffixed -black, and no dark logo variant or prefers-color-scheme: dark CSS block was detected. No dark mode toggle present in navigation.
Data Confidence: Medium-High. HTML structure, image asset names, meta tags, and visual layout patterns were fully extracted. Actual CSS bundles are compiled/minified Next.js chunks and could not be fetched as plain text (returned empty). Color and spacing values are inferred from visual analysis of layout structure, image naming (glow SVGs, coin-empty icons, shield imagery), and enterprise cybersecurity design conventions. Font stack is inferred — no to Google Fonts found, suggesting self-hosted Inter or similar geometric sans.
Notable Patterns: \- Arrow-suffixed CTAs throughout: "Book a Demo ->", "Learn more ->" \- Uppercase letter-spaced eyebrow labels above section headings ("IDENTITIES", "AI Agents", "Secrets") \- Animated logo marquee (auto-scrolling integration logos, 30+ partners) \- Layered SVG hero illustration with glow/base/part components animated separately \- Card-based navigation mega-menu with icon + title + description pattern \- Compliance badge strip in footer (AICPA SOC, ISO 27001, Linux Foundation) \- Content CMS via Sanity — all blog/editorial images from cdn.sanity.io \- No cookie consent banner visible in initial load \- OG image dimensions: 1208×635 (close to 1.91:1 standard)
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.