Figma file available
.webp)
Clutch
Securing Non-Human Identities
No items found.
No items found.
Visual identity
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)