# Remote — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://remote.com/
Captured: 2026-10-29
CSS measured: 2026-10-29T17:19:47.509Z at 1440×1000 — https://remote.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website employs a vibrant, modern design language characterized by expansive, fluid background gradients transitioning smoothly between deep purples, teals, and light greens. The typography is bold and tightly spaced, utilizing a custom sans-serif (Rotina) that commands attention, particularly in display headings. Structural elements like feature cards and stat blocks use clean, semi-transparent or solid white surfaces with rounded corners to float above the dynamic background, occasionally punctuated by stylized 3D illustrations or abstract shapes.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: Software
- Styles: gradient, bold, corporate, playful, geometric, 3d-illustrations, glassmorphism
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: Rotina — weight 700; size 96px; line-height 86.4px; tracking -2.9px; Regular (100% role confidence, computed values)
- Heading: Rotina — weight 700; size 56px; line-height 56px; tracking -1.1px; Regular (90% role confidence, computed values)
- Body: Rotina — weight 400; size 16px; line-height 24px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Text — text #14191E: color-3: computed rgb(20, 25, 30); AI role: Dark shade (#14191E) heavily used for high-contrast primary text on lighter backgrounds. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Solid white used as the background for opaque feature cards and text areas. (90% role confidence, computed values)
- Surface — surface #FAFAFA: color-5: computed rgb(250, 250, 250); AI role: Off-white (#FAFAFA) utilized for specific UI surfaces or subtle text differences. (80% role confidence, computed values)
- Border — border #EFEFEF: color-6: computed rgb(239, 239, 239); AI role: Light gray (#EFEFEF) used for dividing elements or subtle backgrounds. (70% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "20px",
    "lineHeight": "21.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "h2",
        "text": "One accountable payroll partner",
        "top": 1034,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Local compliance, global protection",
        "top": 1034,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Multiple employment models",
        "top": 1034,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "36px",
    "lineHeight": "37.8px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Companies around the world are staying compliant with Remote.",
        "top": 5747,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Rated the # 1 Global Employment Platform.",
        "top": 6578,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "4.5",
        "top": 6597,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "28px",
    "lineHeight": "30px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Global Payroll",
        "top": 2495,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Your platform",
        "top": 4715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "96px",
    "lineHeight": "86.4px",
    "letterSpacing": "-2.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Whoever said it’s a small world has never paid a global team.",
        "top": 1617,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 46,
    "contexts": [
      {
        "tag": "button",
        "text": "Products",
        "top": 20,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 20,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Partners",
        "top": 20,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "1 Uncapped misclassification indemnity covers incidents occurring during the active Contractor of Re",
        "top": 8095,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "COR Service Terms",
        "top": 8114,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "*Subject to local requirements",
        "top": 8131,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "One accountable partner for global payroll",
        "top": 2667,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Compliance by design, updated at the source",
        "top": 2694,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Built-in time tracking, expenses, and benefits",
        "top": 2721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "56px",
    "lineHeight": "56px",
    "letterSpacing": "-1.1px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "The financial operating system for the global workforce.",
        "top": 471,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "20+",
        "top": 6247,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "<30 mins",
        "top": 6247,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Products",
        "top": 8217,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Developers",
        "top": 8217,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Solutions",
        "top": 8217,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "72px",
    "lineHeight": "69.1px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "150+",
        "top": 4034,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "47%",
        "top": 4034,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "99%",
        "top": 4034,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "150+ Countries supported with one accountable partner",
        "top": 4113,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "47% Average compliance cost reduction*",
        "top": 4113,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "99% Payroll accuracy across every run",
        "top": 4113,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "300",
    "size": "24px",
    "lineHeight": "25.9px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "“We went from a team based solely in Stockholm to hiring across the world in a matter of months. Rem",
        "top": 5962,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Previously we had a lot of entities on various different systems, doing a lot of manual uploads. No",
        "top": 5962,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Remote listens to their customers. Over the past year, we evaluated and demoed multiple HR and payr",
        "top": 5962,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Hire worldwide Startups",
        "top": 5483,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Startups",
        "top": 5482,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Scale your team Mid-market",
        "top": 5483,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "44px",
    "lineHeight": "45.3px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Every way to hire and pay your workforce.",
        "top": 2214,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A single system of record for global employment.",
        "top": 3522,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "The global employment infrastructure HR leaders build on.",
        "top": 4491,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -44,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Workday",
        "top": 4904,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Personio",
        "top": 4904,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "25.9px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Momentum Leader",
        "top": 6744,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "13.3px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "sup",
        "text": "1",
        "top": 3248,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Rotina",
    "fontStack": "Rotina, Geist, system-ui, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "0px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "sup",
        "text": "1",
        "top": 8093,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 27,
    "contexts": [
      {
        "tag": "body",
        "text": "Your choice regarding cookies on this siteSome of these cookies are essential, while others help us ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      },
      {
        "tag": "section",
        "text": "One accountable payroll partner Rely on our platform to make sure your team gets paid around the wor",
        "top": 970,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(255, 255, 255, 0.3)",
    "count": 22,
    "contexts": [
      {
        "tag": "article",
        "text": "One accountable payroll partner Rely on our platform to make sure your team gets paid around the wor",
        "top": 1010,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#14191E",
    "alpha": 1,
    "cssValue": "rgb(20, 25, 30)",
    "count": 170,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -44,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Book a demo",
        "top": 28,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 32,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 60,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 250)",
    "count": 79,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -44,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Products",
        "top": 20,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 32,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#EFEFEF",
    "alpha": 1,
    "cssValue": "rgb(239, 239, 239)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2667,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2495,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#C4FAFE",
    "alpha": 1,
    "cssValue": "rgb(196, 250, 254)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 107,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#141A1E",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.0784314 0.0980392 0.117647 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsSolutionsPartnersResourcesPricingEnglishEnglishLoginBook a demotry{var p=sessionStorage.getI",
        "top": 0,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#C0FAFE",
    "alpha": 1,
    "cssValue": "rgb(192, 250, 254)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 104,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#C7FAFE",
    "alpha": 1,
    "cssValue": "rgb(199, 250, 254)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 183,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#C1FAFE",
    "alpha": 1,
    "cssValue": "rgb(193, 250, 254)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 104,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#595959",
    "alpha": 1,
    "cssValue": "rgb(89, 89, 89)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Chief People Officer",
        "top": 6165,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#121921",
    "alpha": 1,
    "cssValue": "rgb(18, 25, 33)",
    "count": 8,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#14191E",
    "alpha": 0.2,
    "cssValue": "rgba(20, 25, 30, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6379,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between distinct semantic sections, creating a breathable rhythm. Cards within grids use consistent internal padding.
- Corner style: Cards, buttons, and floating containers uniformly utilize rounded corners (radii), creating a softer, friendly aesthetic.
- Radius: Buttons and standard cards appear to use moderate radii (approx 8-12px), while some large background containers feature larger, more exaggerated radii.
- Borders: Borders are generally omitted in favor of background colors or soft shadows, except for thin, solid strokes on secondary buttons and specific card outlines to define edges on light backgrounds.
- Buttons: Solid fill with contrasting text for primary actions; transparent with solid outlines for secondary actions. Both feature rounded corners.
- Content width: Content is constrained to a central max-width column, with background gradients extending full-bleed across the viewport.
- Density: Low to medium density. Information is chunked into distinct visual blocks with ample whitespace, avoiding overwhelming the user.
- Evidence: Observed from the consistent card margins, button shapes, and full-bleed colored backgrounds in the desktop crops.

## Sections

Gallery section count: 13. Each entry corresponds to one gallery capture.

1. **Navbar — Remote Navbar** (Home)
   Five short menu labels sit left and a filled demo button sits right, so the main action stays visible on the purple bar.
   Capture: 1440×80px; page bounds 0–80px of 8653px; source section ID: `5d62ed7b-18ba-43e0-ba27-7a6b9320a168`; image: https://media.designdetails.io/library/116c2a309dff0ec6c67a09e0e0f3734fc2da0660c3ae7b9b3e9acba08139c909/5d62ed7b-18ba-43e0-ba27-7a6b9320a168.webp
   SECTION.md v3.2: `5d62ed7b-18ba-43e0-ba27-7a6b9320a168` (deterministic evidence; editorial review pending)
2. **Hero — Giant wordmark over centered headline** (Home)
   An oversized cut-out wordmark on a purple-to-cyan gradient sets the brand, while a bold centered headline and two buttons state the offer.
   Capture: 1440×769px; page bounds 80–849px of 8653px; source section ID: `3fe6d564-57af-47ff-9601-9686e815aa68`; image: https://media.designdetails.io/library/770770d6ea52d6d7af7676ffa086837aa6692c1c1a5696a4666c683ab1314efb/3fe6d564-57af-47ff-9601-9686e815aa68.webp
   SECTION.md v3.2: `3fe6d564-57af-47ff-9601-9686e815aa68` (deterministic evidence; editorial review pending)
3. **Features — Logo strip above four benefit cards** (Home)
   Short card headings with one line of copy each let visitors scan four core benefits, while the logo strip adds quick credibility.
   Capture: 1440×337px; page bounds 849–1186px of 8653px; source section ID: `c73393ab-9317-4d1b-9c90-b9388a202bd6`; image: https://media.designdetails.io/library/5ac798ef73bed9f0d58e2bd4d1c4a1ecd9245c454d44d6b4e3f2a888c731f11d/c73393ab-9317-4d1b-9c90-b9388a202bd6.webp
   SECTION.md v3.2: `c73393ab-9317-4d1b-9c90-b9388a202bd6` (deterministic evidence; editorial review pending)
4. **Other — Statement with floating product icons** (Home)
   A large centered statement surrounded by drifting gradient icons gives the page a pause and frames the problem before the product detail.
   Capture: 1440×972px; page bounds 1186–2158px of 8653px; source section ID: `11d81349-c04e-4443-a5d0-0bb427ef9494`; image: https://media.designdetails.io/library/c410f4f07685ef1ec97dcc28305fa4d31aa4cac3e4b53e6f4ec3a66346288968/11d81349-c04e-4443-a5d0-0bb427ef9494.webp
   SECTION.md v3.2: `11d81349-c04e-4443-a5d0-0bb427ef9494` (deterministic evidence; editorial review pending)
5. **Features — Product cards in asymmetric grid** (Home)
   A large lead card for payroll and smaller cards for other services, each with a UI preview, show the range and hierarchy of the products.
   Capture: 1440×1252px; page bounds 2158–3410px of 8653px; source section ID: `88a47e2f-a317-4991-843f-25072748b03c`; image: https://media.designdetails.io/library/200d1c453c1acfebb9159b9955582072cda2a219c7a15e65de6b892aaf04f3b5/88a47e2f-a317-4991-843f-25072748b03c.webp
   SECTION.md v3.2: `88a47e2f-a317-4991-843f-25072748b03c` (deterministic evidence; editorial review pending)
6. **Stats — Stepped bars of key numbers** (Home)
   Big numerals in stepped outlined boxes rise in a staircase, and compliance badges above back the numbers with trust signals.
   Capture: 1440×969px; page bounds 3410–4379px of 8653px; source section ID: `1c45308c-a931-44ac-bb16-6817d4ad8ee2`; image: https://media.designdetails.io/library/a4837b4dec985abce472d2ff25a3172d3bdec0b18aa7a190d5cbbe6d53b66bc4/1c45308c-a931-44ac-bb16-6817d4ad8ee2.webp
   SECTION.md v3.2: `1c45308c-a931-44ac-bb16-6817d4ad8ee2` (deterministic evidence; editorial review pending)
7. **Logo Cloud — Partner integration cards with platform card** (Home)
   Each card pairs a partner logo with one line on the integration, and a blue card at the end points developers to the API.
   Capture: 1440×680px; page bounds 4379–5059px of 8653px; source section ID: `03d7d93f-c704-4d51-9838-ec5398fe4196`; image: https://media.designdetails.io/library/2e0d9cc4d686d39794925ea3bce260017f524c1a865b199bbd89f7ee1a7da54b/03d7d93f-c704-4d51-9838-ec5398fe4196.webp
   SECTION.md v3.2: `03d7d93f-c704-4d51-9838-ec5398fe4196` (deterministic evidence; editorial review pending)
8. **Features — Three company-size segment cards** (Home)
   Cards for startups, mid-size and enterprise each have a line-art graphic and link, so visitors can quickly find their own segment.
   Capture: 1440×576px; page bounds 5059–5635px of 8653px; source section ID: `e494a529-737e-4855-aeeb-2ab7ff0dae12`; image: https://media.designdetails.io/library/99e365a555e25feb75f70eb4ddca333d5515b3c040200228dfdcca9330386ad5/e494a529-737e-4855-aeeb-2ab7ff0dae12.webp
   SECTION.md v3.2: `e494a529-737e-4855-aeeb-2ab7ff0dae12` (deterministic evidence; editorial review pending)
9. **Testimonials — Customer quote carousel with metrics** (Home)
   Quotes with names and roles sit above a large result figure, and the cut-off third card and arrows signal there is more to scroll.
   Capture: 1440×887px; page bounds 5635–6522px of 8653px; source section ID: `fd172229-2513-4844-b68c-f089ee9dbeb5`; image: https://media.designdetails.io/library/72fd9b823efebfb2420127c6c0307ce8996556554fb58f78b92a3e352393db4c/fd172229-2513-4844-b68c-f089ee9dbeb5.webp
   SECTION.md v3.2: `fd172229-2513-4844-b68c-f089ee9dbeb5` (deterministic evidence; editorial review pending)
10. **Stats — Review rating table with badge** (Home)
   Ruled rows pair a rating, rank and award with a review-site badge, giving third-party proof in a compact, scannable list.
   Capture: 1440×344px; page bounds 6522–6866px of 8653px; source section ID: `015f656d-6727-4bba-8595-e0ff50987fdd`; image: https://media.designdetails.io/library/fab86bbd74ede030cc53414f7295b9fbc8d8e4541e3fed534a0eb497d89c9b9c/015f656d-6727-4bba-8595-e0ff50987fdd.webp
   SECTION.md v3.2: `015f656d-6727-4bba-8595-e0ff50987fdd` (deterministic evidence; editorial review pending)
11. **Editorial — Featured article with two side posts** (Home)
   A large lead article with preview image and two shorter text cards create a clear reading order and invite exploration.
   Capture: 1440×809px; page bounds 6866–7675px of 8653px; source section ID: `36b3304a-24da-4879-9937-904880289fec`; image: https://media.designdetails.io/library/64fcc298766b997a6cbf3de4f2dbe62f12b796694438a92c8b685549746b979f/36b3304a-24da-4879-9937-904880289fec.webp
   SECTION.md v3.2: `36b3304a-24da-4879-9937-904880289fec` (deterministic evidence; editorial review pending)
12. **CTA — Purple banner with demo buttons** (Home)
   A saturated purple panel with a bold headline and one filled and one outlined button stands out against the pale gradient and drives action.
   Capture: 1440×400px; page bounds 7675–8075px of 8653px; source section ID: `2573a945-84a9-412e-8f6d-c07e41ad0b04`; image: https://media.designdetails.io/library/cc6b9606ef7fed6fb62266e38a80beb623e751db9e9682b39618a3c564f8b6f0/2573a945-84a9-412e-8f6d-c07e41ad0b04.webp
   SECTION.md v3.2: `2573a945-84a9-412e-8f6d-c07e41ad0b04` (deterministic evidence; editorial review pending)
13. **Footer — Dark footer with link columns** (Home)
   Grouped link columns, app store badges and social icons on a dark panel organize the whole site, with legal notes below.
   Capture: 1440×578px; page bounds 8075–8653px of 8653px; source section ID: `8908f19a-737e-4c01-8575-7260e1f00a59`; image: https://media.designdetails.io/library/68cfebdef6cab2ec6d5d43ea52c2cfd7ab7e52a39f41e9f8178f44a1d3f22f55/8908f19a-737e-4c01-8575-7260e1f00a59.webp
   SECTION.md v3.2: `8908f19a-737e-4c01-8575-7260e1f00a59` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/83c3b79f3ec8bcf8da6d83ab13733259171e20b5ca8aea60f70cf76276c1ea7e/desktop_full-a3fa1d9b-2026-10-29T17-19-47-529Z.webp
- Mobile screenshot: https://media.designdetails.io/library/f5ffd7615abb93c7b1f79940c442f6cdda7c67cd20f3b475e2ee7db671d2f3ef/mobile_full-a3fa1d9b-2026-10-29T17-20-44-160Z.webp
- Open Graph image: https://media.designdetails.io/library/9c41e93120ec0631d07741bd6d2404255349f48e94c48d32ff932a4a396f36de/og_image-a3fa1d9b-2026-10-29T17-19-55-256Z.webp
- Full-page video: https://media.designdetails.io/library/fb31af420255bca7c11f873ee0e48fc98bf5664f1d0214def3b330f1a4637968/motion-1793298657095.mp4
- Video poster: https://media.designdetails.io/library/ca407fa350d07fdd3c734c9cc4d8e56efd9cb4b14235a403a9b868a1f7fe14ab/motion-poster-1793298657095.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Feature Card
- Logo Strip
- Primary Button
- Outline Button
- Stat Block
- Footer
- Stepped Stat Graphic
- Floating 3d Decor

## Quality rubric

Overall: 54.5/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: This is a well-organized, professionally executed B2B marketing site that leans fully into the current gradient-and-floating-3D SaaS visual language. Typography is disciplined and legible at scale, the color-shifting background gives the long scroll a sense of continuity, and content (feature cards, stats, testimonials) is logically paired with supporting visuals rather than decorative filler. The stepped stat-bar graphic is a genuine, specific compositional idea. However, nearly every other visual device — the gradient hero, the low-poly floating icons, the wordmark-as-hero-graphic, the card-fade-in motion — is now a widely shared convention across competing fintech/HR-tech sites, so originality is weak, and motion variety is limited to one scroll-linked effect repeated with minor variation. The result is competent, clean, on-brand execution without the several hard-to-substitute ideas or restraint required for a 'strong' or 'exceptional' rating.

- Typography (15%): 60 — A single custom family (Rotina) is deployed across a disciplined scale from 96px display down to 10-12px micro-copy, with consistent negative tracking on large sizes and sensible line-height. This creates a legible, confident hierarchy, but it is a single-voice system: no serif/sans pairing, no expressive secondary type personality, and the tight-kerned bold-display-over-light-body formula is the dominant convention of current SaaS marketing sites rather than a considered typographic argument.
- Color (10%): 57 — The page commits to a loud, continuous gradient narrative (purple→cyan→lime→white→purple) that unifies scroll progression and gives sections a distinct identity, paired with disciplined use of near-black text (#14191E) for contrast on light zones. However, the palette leans on a now-common 'vibrant mesh gradient + neon accent' SaaS trope, and most structural surfaces fall back to flat white/off-white cards, limiting how much the color system does beyond mood-setting background.
- Layout (20%): 60 — The page follows a clean, conventional marketing architecture — nav, hero, logo strip, four-up feature cards, a big headline break, product-feature rows, a distinctive stepped stat-bar graphic, integration logos, segment cards, testimonial carousel, review stats, resource cards, and a closing CTA/footer. Sections are well-spaced with a consistent center column and full-bleed backgrounds, and the stepped stat visualization is a genuine compositional idea. But overall this is a standard, safe grid-and-card template seen across dozens of B2B SaaS sites with no unconventional structural risk-taking.
- Motion (20%): 56 — Motion is present and reasonably distributed: continuous background hue shifts tied to scroll position, 3D blocks/cubes floating or rotating near relevant copy, and cards sliding/fading in as they enter view. This gives the page a sense of liveliness and ties some motifs (floating cube near 'global team' copy) to content meaning. However the vocabulary is narrow — scroll-linked color shift plus generic card fade/slide-ins plus idle 3D rotation — and text itself has no entrance treatment, with no evidence of refined micro-interactions, hover states, or easing quality.
- Originality (25%): 42 — The visual identity — scroll-driven color-shifting backgrounds, floating low-poly 3D icons/cubes, a bold geometric wordmark, white card-over-gradient surfaces — closely mirrors a now-widespread B2B SaaS aesthetic (seen across fintech/HR-tech competitors) rather than introducing hard-to-substitute ideas specific to this brand. The stepped-stat-bar graphic is a modestly original touch, but it is one idea amid an otherwise trend-assembled page; nothing here would be difficult for a competitor to replicate with a template swap.
- Content (10%): 61 — Content is clearly organized into purposeful chunks — feature explanations paired with illustrative UI mockups, quantified stats presented graphically, segmented customer tiers (Startups/Mid-market/Enterprise), and real testimonials with named attributions and metrics. The pairing of copy with supporting visuals (e.g., payroll amounts shown on mock cards, G2 review badges) is coherent and reinforces claims rather than existing as separate decoration.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A giant bubble-letter wordmark over a purple-to-cyan gradient sets a confident mood, while small glossy 3D cube icons add playful texture without cluttering the heavy black type. Product cards use real payslip and contract screenshots in bright flat colour blocks, and a ruled data section with bold stats makes compliance numbers easy to scan at a glance.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.