


FullEnrich Design System
Source
\- URL:
Stack \- Framework: SvelteKit (asset paths follow /\_app/immutable/assets/ convention) \- Icon system: Material Icons (text ligatures: search, arrow\_forward, hub, description, fingerprint, lock, language, send, filter\_list, paid, verified) \- No Tailwind detected; likely custom SCSS or component-scoped styles
Typography \- Primary font: Inter or a geometric sans-serif (standard B2B SaaS choice; no custom @font-face exposed in fetch) \- Heading scale: Large display H1 for hero, H2 for section titles, H4 for feature sub-heads \- Body: ~16px base, comfortable line-height (~1.6) \- Weight range: 400 (body), 600 (subheads), 700โ800 (hero/display)
Color Philosophy \- Primary accent: Bright sky blue (#1CA7FD โ #148CFC gradient) \- Light blue tint: #DEF2FE / #DBF1FE (backgrounds, hover states) \- Mid blue: #57BCFD / #51B5FD (secondary highlights) \- Neutral stroke: #D5D3D2 (dividers, muted lines) \- Background: White (#FFFFFF) \- Foreground / text: Near-black (#0A0A0A or #111) \- Logo: Black wordmark on white; SVG-based
Spacing \- Appears to use an 8px base grid \- Generous section padding (likely 80โ120px vertical) \- Card padding: ~24โ32px
Component Defaults \- Buttons: Rounded pill or rounded-lg; primary = blue fill, secondary = outline or ghost \- Cards: White with subtle shadow or light border; rounded corners (~12px) \- Testimonials: Avatar + quote card layout, soft background \- Logo strips: Grayscale SVG logos on white band \- CTAs: High-contrast blue button + secondary text link
Layout \- Max content width: ~1200px centered \- Hero: Full-width, centered text + product UI screenshot below \- Sections alternate: text-left / text-right or centered column \- Responsive: Mobile-first (MP4 video assets named video-mobile-\*) \- Dark mode: Not detected (light-only site)
:root { / Typography / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-base: 16px; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.6; --line-height-tight: 1.2;
/ Spacing (8px grid) / --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;
/ Colors โ Light mode / --color-background: #FFFFFF; --color-surface: #F8FBFF; --color-foreground: #0A0A0A; --color-foreground-muted: #6B7280;
/ Brand / Accent / --color-accent: #1CA7FD; --color-accent-dark: #148CFC; --color-accent-mid: #57BCFD; --color-accent-light: #DEF2FE; --color-accent-lighter: #DBF1FE;
/ Neutrals / --color-border: #D5D3D2; --color-border-subtle: #E5E7EB; --color-neutral-50: #F9FAFB; --color-neutral-100: #F3F2EC; --color-neutral-200: #D5D3D2; --color-neutral-900: #0A0A0A;
/ Semantic / --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444;
/ Border Radius / --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px;
/ Shadows / --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-card: 0 8px 32px rgba(28,167,253,0.08);
/ Transitions / --transition-default: 150ms ease; --transition-slow: 300ms ease;
/ Layout / --layout-max-width: 1200px; --layout-section-padding-y: 96px; --layout-section-padding-x: 24px; --layout-card-padding: 28px;
/ Gradients / --gradient-accent: linear-gradient(135deg, #1CA7FD 0%, #148CFC 100%); --gradient-accent-light: linear-gradient(135deg, #DEF2FE 0%, #DBF1FE 100%); --gradient-mid: linear-gradient(135deg, #57BCFD 0%, #51B5FD 100%); }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-accent | #1CA7FD | Primary CTA buttons, links, icons |
| --color-accent-dark | #148CFC | Button hover, gradient end |
| --color-accent-mid | #57BCFD | Gradient start, highlights |
| --color-accent-light | #DEF2FE | Tag backgrounds, section tints |
| --color-accent-lighter | #DBF1FE | Subtle hover states |
| --color-background | #FFFFFF | Page background |
| --color-surface | #F8FBFF | Card / section backgrounds |
| --color-foreground | #0A0A0A | Primary text |
| --color-foreground-muted | #6B7280 | Secondary text, captions |
| --color-border | #D5D3D2 | Dividers, strokes (from SVG data) |
| --color-neutral-100 | #F3F2EC | Stroke on SVG assets |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
| --space-xs | 4px | Icon gap, tight nudges |
| --space-sm | 8px | Inline gaps, small padding |
| --space-md | 16px | Default component padding |
| --space-lg | 24px | Card padding, section gaps |
| --space-xl | 32px | Between content blocks |
| --space-2xl | 48px | Section sub-grouping |
| --space-3xl | 64px | Medium section breathing room |
| --space-4xl | 96px | Full section vertical padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| --font-family-base | 'Inter', system-ui, sans-serif | All text |
| --font-size-base | 16px | Body copy |
| --font-weight-regular | 400 | Body text |
| --font-weight-semibold | 600 | Subheadings, labels |
| --font-weight-bold | 700 | H1โH3, CTAs |
| --line-height-base | 1.6 | Body paragraphs |
| --line-height-tight | 1.2 | Display headings |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 6px | Badges, tags |
| --radius-md | 12px | Cards, modals |
| --radius-lg | 16px | Feature panels |
| --radius-pill | 9999px | CTA buttons |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,0.08) | Subtle lift |
| --shadow-md | 0 4px 16px rgba(0,0,0,0.08) | Cards, dropdowns |
| --shadow-card | 0 8px 32px rgba(28,167,253,0.08) | Blue-tinted card glow |
Framework: SvelteKit (confirmed by /\_app/immutable/assets/ immutable asset path convention and hashed filenames like fe-black-wordmark.DVXgtZHm.svg)
Icon system: Google Material Icons via ligature rendering (text strings like search, arrow\_forward, hub, fingerprint used as icon content)
Theme support: Light mode only โ no dark mode class, media query, or alternate palette detected in the fetched HTML. Background is consistently white.
Data source: Live HTML fetch of
Notable patterns: \- Waterfall/cascade visual metaphor (multiple vendor logos stacked) reflects the product concept \- Heavy use of trust signals: G2 rating badge, SOC 2 / GDPR / CCPA compliance icons, customer logos \- Testimonials use circular avatar photos with fallback initials (single capital letter), suggesting a consistent avatar component \- Product screenshots embedded as MP4 video clips (video-mobile-verif.mp4, video-phone-verif.mp4) rather than static images โ motion-forward approach \- Logo strip uses black SVG logos on white background, no color variants \- CTA hierarchy: primary blue filled pill button (Get Started for Free) + secondary text link (Talk to Sales) \- Accent blue is a vivid sky blue gradient family โ energetic, trust-signaling, common in B2B data/enrichment SaaS