Remote

: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

Spacing Tokens

Typography Tokens

Border Radius Tokens

Shadow Tokens

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 .webp with responsive ?width= params via Contentstack's image CDN, with @2x retina 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.