Clutch | Secure Every Identity, Agent, and Secret Across Your Environment

Design Specification — Clutch | Secure Every Identity, Agent, and Secret Across Your Environment

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#004DFF). All type is set in Inter,sans-serif. Detected font weights: 100, 400, 500, 600. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://www.clutch.security/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo-full-black.f177f8fc.svg&w=384&q=75&dpl=dpl_9iuB61RZdhWmuwbHg5LSZmGLYadR · https://www.clutch.security/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fgithubcopilot.cdbda99f.svg&w=256&q=75&dpl=dpl_9iuB61RZdhWmuwbHg5LSZmGLYadR

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(180deg,#191919,#000)
• linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1))
• linear-gradient(270deg, #FFFFFF -154.98%, #000000 68.37%), linear-gradient(270deg, color(display-p3 1.000 1.000 1.000) -154.98%, color(display-p3 0.000 0.000 0.000) 68.37%)
• radial-gradient(37% 37% at 98.12% 50.68%, rgba(255, 255, 255, 0) 70.77%, #FFFFFF 100%)
• `conic-gradient(

from 206.55deg at 18.84% 51%,

rgba(255, 255, 255, 0) -137.29deg,

rgba(255, 255, 255, 0) 201.31deg,

#004DFF 197.22deg,

#D9E4FF 200.69deg,

#004DFF 201.02deg,

#000000 201.15deg,

rgba(255, 255, 255, 0) 200.71deg,

rgba(255, 255, 255, 0) 552.71deg

)`

• linear-gradient(111.56deg, #000000 2.79%, #FFFFFF 99.72%)
• linear-gradient(110.35deg, #000000 1%, #FFFFFF 99.64%)
• linear-gradient(108.3deg, #000000 -2.11%, #FFFFFF 99.52%)
• linear-gradient(0deg, rgba(255, 255, 255, 0) 40%, #000000 100%)
• `conic-gradient(

from 150deg at 50.16% 134.06%,

#000000 -13.74deg,

rgba(255, 255, 255, 0) 8.33deg,

rgba(255, 255, 255, 0) 136.41deg,

rgba(255, 255, 255, 0.763112) 178.7deg,

#D9E4FF 200.9deg,

#000000 233.57deg,

#E6C5F7 260.37deg,

#000000 283.32deg,

#004DFF 304.77deg,

#FFFFFF 316.56deg,

#004DFF 327.82deg,

#000000 346.26deg,

rgba(255, 255, 255, 0) 368.33deg

)`

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter — stack: Inter,sans-serif

Font stacks (most used first)

• Inter,sans-serif
• PP Radio Grotesk,sans-serif
• 'Inter'
• ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit
• PP Radio Grotesk

Web font sources

• fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap&text=↑->↓←↘
• fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap&text=↑-

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 0 20px 20px #fff
• 0 2px 6px 0 #00000029
• 3px 3.5px 0 0 #000

Layout

Container max-width: 768px

Grid columns (largest detected grid): 7

Breakpoints

• 576px
• 768px
• 1000px
• 1150px
• 1300px
• 1460px
• 1620px
• 1980px

Animation & Motion

Transitions

• background-color 5000s ease-in-out 0s
• .2s ease
• height 0.4s cubic-bezier(0, 0, 0, 1), visibility 0.4s, opacity 0.4s

Easing curves

• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0, 0, 0, 1)

Keyframes

@keyframes flying { 0%{transform:translatey(0)}50%{transform:translatey(5px)}to{transform:translatey(0)} }
@keyframes rotations { 0%{transform:rotate(0deg)}to{transform:rotate(1turn)} }
@keyframes scaner-rotations { 0%{transform:rotate(0deg)}to{transform:rotate(-350deg)} }
@keyframes drawLine { 0%{stroke-dashoffset:125}to{stroke-dashoffset:0} }
@keyframes enterFromRight { 0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)} }
@keyframes enterFromLeft { 0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)} }
@keyframes exitToRight { 0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)} }
@keyframes exitToLeft { 0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)} }
@keyframes scaleOut { 0%{opacity:1;transform:rotateX(0deg) scale(1)}to{opacity:0;transform:rotateX(-10deg) scale(.95)} }
@keyframes fadeOut { 0%{opacity:1}to{opacity:0} }
@keyframes scaleIn { 0%{opacity:0;transform:rotateX(-10deg) scale(.9)}to{opacity:1;transform:rotateX(0deg) scale(1)} }
@keyframes fadeIn { 0%{opacity:0}to{opacity:1} }

Animations

• enterFromRight .25s ease
• enterFromLeft .25s ease
• exitToRight .25s ease
• exitToLeft .25s ease
• scaleOut .2s ease
• fadeOut .2s ease
• scaleIn .2s ease
• fadeIn .2s ease

CTA labels found on page

• Book a demo
• Clutch in Action ->
• ->
• See Clutch in Action ->
• Book a Demo ->

Source Design Tokens (CSS custom properties)

:root {
  --accent: #004dff;
  --primary: rgb(255 255 255/var(--tw-text-opacity,1);
}

Do's and Don'ts

Do

• Do reserve the accent #004DFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 500, 600.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-accent: #004DFF;
  --color-primary: #004DFF;
  --color-background: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D9E4FF;
  --color-border: #E5E7EB;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F4F4;
  --color-surface-container: #E5E7EB;
  --color-surface-container-high: #D9D9D9;
  --font-sans: Inter,sans-serif;
  --font-size-display: 68px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 26px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 17px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-pill: 50%;
  --shadow-sm: 0 2px 6px 0 #00000029;
  --shadow-md: 3px 3.5px 0 0 #000;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.02em;
  --tracking-label: .01em;
  --container-max: 768px;
}