.webp)
FullEnrich
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
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.