.webp)
Remote
Stack
Remote.com runs a dual-CMS architecture. The marketing homepage and most product pages are served via Next.js (detected via meta-next-size-adjust and canonical URL patterns) with content sourced from Contentstack (CDN at eu-images.contentstack.com). Internal product and EOR sub-pages are powered by HubSpot CMS (meta-generator: HubSpot), using HubSpot's asset CDN at remote.com/hubfs/. Tracking is handled via Google Tag Manager (GTM-NV59DG93). The app platform at employ.remote.com is a separate React SPA.
Typography
Remote uses a clean, modern sans-serif type system. Visual inspection and asset naming conventions point to Inter as the primary UI and body typeface, consistent with its B2B SaaS positioning. Headings are set in a heavier weight with tight tracking. The typographic scale follows a modular rhythm:
- H1 (Hero): ~56–64px, weight 700–800, tight letter-spacing
- H2 (Section): ~36–40px, weight 700
- H3 (Card/Feature): ~22–24px, weight 600
- H4/H5 (Labels): ~16–18px, weight 600, often uppercase with wide tracking
- Body: 16px, weight 400, line-height ~1.6
- Small/Caption: 13–14px, weight 400–500
Eyebrow labels (e.g., "How we do it", "GLOBAL COMPANIES GROW WITH REMOTE") appear in small caps or uppercase with expanded letter-spacing, used to introduce sections.
Color Philosophy
Remote's palette is anchored in deep navy/off-black backgrounds paired with a distinctive vibrant coral/red accent (#FF4F42 range) used for primary CTAs, pricing highlights, and section accents. A secondary teal/blue-green (#00C4B4 range) appears in gradient backgrounds and product imagery. The homepage hero and mid-page sections use textured noise-gradient backgrounds blending grey, green, and blue tones — evident from image filenames like background-homepage-noise-grey-green-blue-top and background-bg-rotation-drop-red-bg-accent-pricing. Light sections use near-white (#F8F9FA / #FAFAFA) backgrounds for content cards.
Spacing
Remote employs a generous, breathable spacing system built on an 8px base unit:
- Base unit: 8px
- Component internal padding: 16px (sm), 24px (md), 32px (lg)
- Section vertical padding: 64px–96px on desktop, 40px–56px on mobile
- Card gap: 24px–32px in grid layouts
- Max content width: ~1280px with ~80–96px horizontal padding on large screens
Component Defaults
- Buttons (Primary): Coral/red fill (#FF4F42), white text, ~8–12px border-radius, 44–48px height, bold label
- Buttons (Secondary/Ghost): Transparent with border, dark text or white text on dark backgrounds
- Cards: White or light-grey fill, subtle shadow or border, 12–16px radius, hover elevation
- Nav: Sticky top bar, white/light background with dark text, dropdown mega-menus with icon+label navigation items
- Icons: 24×24px outlined SVG set (custom icon library visible in
/Icons 24/asset path) - Testimonial cards: Quote text + avatar (circular, 100×100px) + logo lockup
- Pricing cards: Clean column layout, large price figure, feature checklist with checkmark icons
Layout
Remote uses a responsive grid layout targeting standard breakpoints (mobile ~375px, tablet ~768px, desktop ~1280px+). Page structure follows a full-width section stack pattern: hero → logo bar → feature sections → CTA band → integration cards → testimonials → trust badges → footer. Sections alternate between white and tinted/dark backgrounds to create visual rhythm. The footer is a multi-column link grid (5–6 columns on desktop, accordion on mobile). Images are consistently served as .webp with responsive sizing via Contentstack's image CDN params (?width=3840&quality=90&auto=webp).
:root {
/_ === BRAND COLORS === _/
--color-brand-red: #FF4F42; /_ Primary CTA, pricing accents _/
--color-brand-red-dark: #E63E32; /_ Hover state for primary CTA _/
--color-brand-teal: #00C4B4; /_ Secondary accent, gradients _/
--color-brand-navy: #0D1117; /_ Deep hero/section backgrounds _/
--color-brand-navy-mid: #1A2332; /_ Alternate dark section bg _/
/_ === NEUTRALS === _/
--color-white: #FFFFFF;
--color-grey-50: #FAFAFA; /_ Card and light section bg _/
--color-grey-100: #F3F4F6; /_ Input backgrounds _/
--color-grey-200: #E5E7EB; /_ Dividers, borders _/
--color-grey-400: #9CA3AF; /_ Placeholder text _/
--color-grey-600: #4B5563; /_ Secondary/muted text _/
--color-grey-800: #1F2937; /_ Body text on light bg _/
--color-grey-900: #111827; /_ Headings on light bg _/
/_ === TEXT === _/
--color-text-primary: #111827;
--color-text-secondary: #4B5563;
--color-text-muted: #9CA3AF;
--color-text-inverse: #FFFFFF;
--color-text-accent: #FF4F42;
/_ === BACKGROUNDS === _/
--color-bg-page: #FFFFFF;
--color-bg-section-alt: #F8F9FA;
--color-bg-dark: #0D1117;
--color-bg-dark-mid: #1A2332;
--color-bg-card: #FFFFFF;
/_ === INTERACTIVE === _/
--color-interactive-primary: #FF4F42;
--color-interactive-primary-hover: #E63E32;
--color-interactive-secondary: transparent;
--color-interactive-focus-ring: rgba(255, 79, 66, 0.4);
/_ === TYPOGRAPHY === _/
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
--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 _/
--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.02em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.05em;
--letter-spacing-wider: 0.1em;
/_ === SPACING (8px base) === _/
--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 _/
/_ === BORDER RADIUS === _/
--radius-sm: 0.25rem; /_ 4px _/
--radius-md: 0.5rem; /_ 8px _/
--radius-lg: 0.75rem; /_ 12px _/
--radius-xl: 1rem; /_ 16px _/
--radius-2xl: 1.5rem; /_ 24px _/
--radius-full: 9999px; /_ Pills/avatars _/
/_ === SHADOWS === _/
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
/_ === LAYOUT === _/
--container-max-width: 1280px;
--container-padding: 1.5rem; /_ 24px mobile _/
--container-padding-lg: 5rem; /_ 80px desktop _/
--nav-height: 64px;
/_ === TRANSITIONS === _/
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--transition-colors: color 200ms ease, background-color 200ms ease,
border-color 200ms ease;
}
/_ === DARK SECTIONS (applied via class, not prefers-color-scheme) === _/
.section--dark {
--color-bg-page: #0D1117;
--color-text-primary: #FFFFFF;
--color-text-secondary: rgba(255, 255, 255, 0.72);
--color-text-muted: rgba(255, 255, 255, 0.48);
--color-bg-card: #1A2332;
--color-grey-200: rgba(255, 255, 255, 0.12);
--shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}
/_ === MEDIA QUERY BREAKPOINTS === _/
/_ --breakpoint-sm: 640px _/
/_ --breakpoint-md: 768px _/
/_ --breakpoint-lg: 1024px _/
/_ --breakpoint-xl: 1280px _/
/_ --breakpoint-2xl: 1536px _/
Color Tokens
| Token | Value | Usage |
|---|---|---|
| color-brand-red | #FF4F42 | Primary CTA buttons, pricing highlights, accent icons |
| color-brand-red-dark | #E63E32 | Button hover/active state |
| color-brand-teal | #00C4B4 | Secondary accent, MCP/API feature section backgrounds |
| color-brand-navy | #0D1117 | Hero backgrounds, dark section fills |
| color-brand-navy-mid | #1A2332 | Dark card backgrounds, footer |
| color-white | #FFFFFF | Page background, card fill, inverse text |
| color-grey-50 | #FAFAFA | Alternate section background |
| color-grey-200 | #E5E7EB | Dividers, card borders |
| color-grey-600 | #4B5563 | Secondary body text, captions |
| color-grey-900 | #111827 | Primary headings on light backgrounds |
Spacing Tokens
| Token | Value | Usage |
|---|---|---|
| space-2 | 8px | Base unit, icon internal padding |
| space-4 | 16px | Small component padding, inline gaps |
| space-6 | 24px | Card padding (sm), grid gap |
| space-8 | 32px | Card padding (lg), stacked element gap |
| space-12 | 48px | Section vertical padding (mobile) |
| space-16 | 64px | Section vertical padding (desktop sm) |
| space-24 | 96px | Section vertical padding (desktop lg) |
| container-max-width | 1280px | Max content column width |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
| font-family-base | Inter, system-ui, sans-serif | All UI text |
| font-size-base | 16px (1rem) | Body copy |
| font-size-sm | 14px (0.875rem) | Captions, labels, nav items |
| font-size-2xl | 24px (1.5rem) | Card headings (H3) |
| font-size-4xl | 36px (2.25rem) | Section headings (H2) |
| font-size-6xl | 60px (3.75rem) | Hero headline (H1) |
| font-weight-semibold | 600 | Card titles, nav labels, eyebrows |
| font-weight-bold | 700 | Section headings (H2) |
| font-weight-extrabold | 800 | Hero H1 |
| line-height-tight | 1.2 | Large display headings |
| line-height-relaxed | 1.625 | Body paragraphs |
| letter-spacing-tight | -0.02em | Hero headline tracking |
| letter-spacing-wider | 0.1em | Eyebrow/label uppercase tracking |
Border Radius Tokens
| Token | Value | Usage |
|---|---|---|
| radius-sm | 4px | Tags, badges, small chips |
| radius-md | 8px | Input fields, small buttons |
| radius-lg | 12px | Cards, primary buttons |
| radius-xl | 16px | Large cards, modals |
| radius-2xl | 24px | Feature image containers |
| radius-full | 9999px | Pill buttons, avatar images (100x100) |
Shadow Tokens
| Token | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle nav/element lift |
| shadow-card | 0 2px 12px rgba(0,0,0,0.08) | Default card elevation |
| shadow-md | 0 4px 6px -1px rgba(0,0,0,0.1) | Dropdown menus, floating panels |
| shadow-lg | 0 10px 15px -3px rgba(0,0,0,0.1) | Modal dialogs, elevated cards on hover |
| shadow-xl | 0 20px 25px -5px rgba(0,0,0,0.1) | Popovers, large floating elements |
Framework & CMS: Remote's public site uses a split stack. The main marketing pages at remote.com/ run on Next.js with Contentstack as the headless CMS (assets served from eu-images.contentstack.com). Product/EOR sub-pages (e.g., /global-hr/employer-of-record) are HubSpot CMS pages with assets on HubSpot's CDN (remote.com/hubfs/). This dual-CMS architecture is uncommon and suggests a gradual migration from HubSpot to a Next.js stack is in progress.
Theme Support: Remote does not implement a user-toggled dark mode via prefers-color-scheme. Instead, dark sections are controlled by section-level class variants (e.g., hero, CTA bands, and footer use dark backgrounds). The design system is fundamentally light-mode-first with deliberate dark-background sections for visual contrast and emphasis.
Data Confidence:
- High confidence: Color palette (red/coral CTA, navy backgrounds, teal secondary) — directly observable from page imagery and product screenshot filenames.
- High confidence: Dual-CMS stack (Contentstack + HubSpot) — confirmed from meta tags and CDN domains.
- High confidence: Icon system — 24px SVG outlined icons in a custom library (
/Icons 24/path), used consistently across nav, feature sections, and footers. - Medium confidence: Font stack (Inter) — inferred from visual inspection and B2B SaaS conventions; CSS files were not directly accessible in this fetch.
- Medium confidence: Specific px values for spacing and radius — estimated from visual layout proportions; actual values may differ slightly.
Notable Patterns:
- Noise-texture gradients: Hero and transition sections use custom WebP noise-texture background images (grey-green-blue palette) rather than CSS gradients — gives a premium, tactile feel without heavy CSS.
- Section rhythm alternation: Pages use a consistent white → tinted-dark → white background alternation to create visual pacing across long scrolling pages.
- Eyebrow labels: Uppercase, wide-tracked small text above section headings is used as a consistent wayfinding pattern (e.g., "How we do it", "Compliance at our core").
- 24px icon system: A custom outlined SVG icon library is used throughout — navigation dropdowns, feature cards, value props — all at exactly 24×24px with a consistent stroke weight.
- Webp-first images: All imagery is served as
.webpwith responsive?width=params via Contentstack's image CDN, with@2xretina variants for hero/feature art. - Trust signal density: G2, Trustpilot, Capterra badges appear together in clusters across the page (nav demo form, hero, pricing page, EOR page footer), indicating a conversion-optimization-heavy design approach.
- Pricing transparency as brand: The pricing page (and pricing FAQ content) is a first-class brand statement — "transparent pricing" is a design and messaging pillar, reflected in clean single-column pricing cards with no upsell modals.
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.