.webp)
Customer.io
Customer.io Design System
Stack \- Framework: Next.js (App Router, confirmed via meta-generator) \- Styling: Tailwind CSS with custom design tokens; CSS custom properties for theming \- CMS: Sanity.io (all images/assets served via cdn.sanity.io) \- Hosting: Vercel (Vercel production environment confirmed via Sentry baggage headers) \- Monitoring: Sentry
Typography \- Primary font: Inter (system-grade sans-serif; standard for modern B2B SaaS) \- Headings: Bold weight (700), large display sizes — hero uses ~60–80px on desktop \- Body: Regular (400), ~16–18px base size \- Section labels: Uppercase tracking, small caps used for category labels (e.g., "Solutions", "Capabilities") \- Scale: Fluid/responsive type using clamp() or Tailwind responsive utilities
Color Philosophy \- Predominantly light/white canvas (theme-color: #ffffff) \- Primary accent: Vivid orange — used for CTAs, highlights, section textures \- Secondary accents: Pink, purple, blue — used for feature section background textures \- Neutrals: Near-black for headings (#0a0a0a range), mid-gray for body text, light gray for borders/dividers \- Brand feel: Clean, professional, warm — avoids cold corporate blue in favor of energetic orange
Spacing \- Base unit: 4px (Tailwind default) \- Section padding: 80–120px vertical on desktop, 40–64px on mobile \- Component gaps: 16–32px between cards, 8–16px intra-component \- Max content width: ~1280px container with horizontal padding
Component Defaults \- Buttons: Rounded-full pill shape for primary CTAs; outlined/ghost variant for secondary \- Cards: Subtle border, light background, rounded-xl (~12px radius) \- Navigation: Sticky top nav, white background, dropdown menus for Platform/Solutions/Resources \- Logo ticker: Horizontal marquee scroll for social proof logos \- Badge pills: Small rounded tags for "New" labels on nav items
Layout \- Max-width container (~1280px) centered with auto margins \- Two-column alternating image/text sections for feature showcases \- Full-bleed colored texture sections for visual breaks \- Footer: 4-column grid (Platform, Features, Resources, Company) + social icons \- Mobile-first responsive with hamburger nav on small screens
:root { / === Brand Colors === / --color-primary: #FF5A1F; / Orange — primary CTA, highlights / --color-primary-hover: #E04A12; / Darker orange for hover states / --color-secondary-pink: #F472B6; / Pink — section accent texture / --color-secondary-purple: #A855F7;/ Purple — section accent texture / --color-secondary-blue: #3B82F6; / Blue — section accent texture /
/ === Neutrals === / --color-white: #FFFFFF; --color-background: #FFFFFF; / Page background / --color-surface: #F9FAFB; / Subtle card/section backgrounds / --color-border: #E5E7EB; / Dividers and card borders / --color-text-primary: #111827; / Near-black headings / --color-text-secondary: #374151; / Body copy / --color-text-muted: #6B7280; / Captions, helper text / --color-text-inverted: #FFFFFF; / Text on dark/colored backgrounds /
/ === Typography === / --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px / --font-size-6xl: 3.75rem; / 60px — hero headline /
--font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--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; / Used on uppercase category labels /
/ === Spacing === / --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 — max section vertical padding /
/ === Border Radius === / --radius-sm: 0.25rem; / 4px — badges, chips / --radius-md: 0.5rem; / 8px — inputs, small cards / --radius-lg: 0.75rem; / 12px — cards / --radius-xl: 1rem; / 16px — large cards / --radius-2xl: 1.5rem; / 24px — section containers / --radius-full: 9999px; / Pill — primary buttons, logo badges /
/ === Shadows === / --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
/ === Layout === / --container-max-width: 1280px; --container-padding-x: 1.5rem; / 24px mobile / --container-padding-x-lg: 2rem; / 32px desktop / --nav-height: 64px;
/ === Transitions === / --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; }
/ Dark mode — not prominently featured; light mode is the primary experience / @media (prefers-color-scheme: dark) { :root { --color-background: #0A0A0A; --color-surface: #111111; --color-border: #1F2937; --color-text-primary: #F9FAFB; --color-text-secondary: #D1D5DB; --color-text-muted: #9CA3AF; --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2); } }
Color Tokens
| Token | Value | Usage |
|---|---|---|
| color-primary | #FF5A1F | Primary CTA buttons, key highlights |
| color-primary-hover | #E04A12 | Button hover state |
| color-secondary-pink | #F472B6 | Section texture/accent (Design Studio) |
| color-secondary-purple | #A855F7 | Section texture/accent (Audiences) |
| color-secondary-blue | #3B82F6 | Section texture/accent (Analytics) |
| color-secondary-orange-light | #FFF7ED | Subtle orange tint backgrounds |
| color-white | #FFFFFF | Page background, inverted text |
| color-surface | #F9FAFB | Card/section subtle background |
| color-border | #E5E7EB | Card borders, dividers |
| color-text-primary | #111827 | Headings, strong body |
| color-text-secondary | #374151 | Standard body copy |
| color-text-muted | #6B7280 | Captions, meta, helper text |
Spacing Tokens
| Token | rem | px | Usage |
|---|---|---|---|
| space-1 | 0.25rem | 4px | Micro gaps |
| space-2 | 0.5rem | 8px | Icon padding, tight gaps |
| space-3 | 0.75rem | 12px | Badge padding |
| space-4 | 1rem | 16px | Base component gap |
| space-6 | 1.5rem | 24px | Card padding |
| space-8 | 2rem | 32px | Section inner spacing |
| space-12 | 3rem | 48px | Mobile section padding |
| space-16 | 4rem | 64px | Desktop component spacing |
| space-20 | 5rem | 80px | Section vertical padding (sm) |
| space-32 | 8rem | 128px | Hero / large section padding |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-sans | Inter, system-ui | All UI text |
| font-size-sm | 14px | Labels, captions, nav |
| font-size-base | 16px | Body copy |
| font-size-lg | 18px | Large body, lead paragraphs |
| font-size-2xl | 24px | Card headings, sub-sections |
| font-size-4xl | 36px | Section headings (mobile hero) |
| font-size-5xl | 48px | Section headings (desktop) |
| font-size-6xl | 60px | Hero display headline |
| font-weight-normal | 400 | Body text |
| font-weight-semibold | 600 | Nav links, card titles |
| font-weight-bold | 700 | Headings, CTAs |
| letter-spacing-wider | 0.1em | Uppercase category labels |
| line-height-tight | 1.2 | Headlines |
| line-height-normal | 1.5 | Body |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Tags, badges |
| radius-md | 8px | Input fields, small elements |
| radius-lg | 12px | Standard cards |
| radius-xl | 16px | Feature cards, large tiles |
| radius-2xl | 24px | Section panels |
| radius-full | 9999px | Pill buttons, avatar rings |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgb(0 0 0/5%) | Subtle card lift |
| shadow-md | 0 4px 6px rgb(0 0 0/7%) | Default card shadow |
| shadow-lg | 0 10px 15px rgb(0 0 0/8%) | Hover state / modals |
| shadow-xl | 0 20px 25px rgb(0 0 0/8%) | Floating panels, dialogs |
Framework: Next.js (App Router) hosted on Vercel. CMS content via Sanity.io CDN. Styling strongly consistent with Tailwind CSS utility conventions — no CSS Modules or Styled Components signals detected.
Theme Support: Light mode is the canonical and only shipped experience. theme-color is #ffffff. No dark mode toggle in the UI. A prefers-color-scheme dark mode could be inferred but is not explicitly confirmed.
Data Confidence: Medium-high. HTML structure, class patterns, meta signals, and visual design from multiple pages (home, pricing, platform, about) were analyzed. No raw CSS bundle was accessible (Next.js hashed filenames require source map access). Token values are reverse-engineered from visual inspection + standard Tailwind defaults; not extracted from a tailwind.config.js directly.
Notable Patterns: \- Orange-dominant accent system — the orange (#FF5A1F range) is consistently used for primary CTAs ("Get started", "Book a demo") while secondary page accents cycle through pink, purple, and blue per section — giving depth without chaos. \- Animated marquee logo rows — two horizontal scrolling ticker rows (customers and social proof logos) — a common trust-signal pattern in modern SaaS. \- Pill-shaped primary buttons — border-radius: 9999px throughout, reinforcing a friendly, modern aesthetic. \- Section texture system — each platform capability section uses a distinct watercolor/blurred gradient PNG texture (orange, pink, purple, blue) from Sanity CMS to visually differentiate modules while maintaining brand unity. \- Typography contrast: Ultra-bold display headlines (font-weight: 700, ~60px) paired with light body copy creates strong visual hierarchy typical of B2B SaaS landing pages. \- Footer grid: Consistent 4-column footer (Platform, Features, Resources, Company) with social links — standard enterprise SaaS footer pattern. \- New badge pattern: Nav items for new features labeled with small orange/colored "New" pill badges inline.
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.