# Teamtailor — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.teamtailor.com/en-us/
Captured: 2026-11-11
CSS measured: 2026-11-11T08:09:53.700Z at 1440×1000 — https://www.teamtailor.com/en-us/
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 Teamtailor homepage presents a modern, spacious design focused on hiring software. It features a full-bleed hero section with a background video, followed by a logo strip and detailed feature showcases utilizing scroll-linked parallax animations. The layout uses generous whitespace, rounded corners on cards and buttons, and a distinct color palette featuring off-whites, dark brown text, and prominent pink accents. Customer testimonials, product UI previews, and a sticky footer reveal complete the page structure.

## Classification

- Industry: crm
- Site type: Landing
- Business model: Software
- Styles: minimal, editorial, playful, modern-b2b-saas, pastel-accent
- Platform: Custom code
- Technology: Astro

## Typography

- Display: Archivo — weight 275; size 84px; line-height 88.2px; tracking -3.4px; Regular (90% role confidence, computed values)
- Heading: Archivo — weight 300; size 48px; line-height 55.2px; tracking -0.7px; Regular (95% role confidence, computed values)
- Body: Archivo — weight 400; size 18px; line-height 22.5px; tracking -0.1px; Regular (95% role confidence, computed values)

## Functional palette

- Text — text #483434: color-2: computed rgb(72, 52, 52); AI role: #483434 (dark brown) used as the primary text color across the site. (95% role confidence, computed values)
- Primary Action — primary action #FB9BE4: color-8: computed rgb(251, 155, 228); AI role: #FB9BE4 used for the primary 'Book a demo' buttons. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used as the primary background for many content sections. (90% role confidence, computed values)
- Surface — surface #F4F1EC: color-1: computed rgb(244, 241, 236); AI role: #F4F1EC (off-white) used for secondary section backgrounds and UI cards. (85% 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": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "22.5px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": "All you need to make every hire count.",
        "top": 801,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Made smarter with AI and better with people.",
        "top": 824,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "With AI running through the whole hiring process, helping your team move faster, stay sharper and sp",
        "top": 1211,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "36px",
    "lineHeight": "41.4px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Teamtailor AI",
        "top": 4256,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Surfaces matches, drafts job ads, summarizes resumes.",
        "top": 4302,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Career site",
        "top": 4726,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "48px",
    "lineHeight": "55.2px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h1",
        "text": "For hiring people.",
        "top": 791,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The ATS behind great hiring",
        "top": 1136,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Held to the highest security and privacy standards",
        "top": 6301,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "60px",
    "lineHeight": "63px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "The right hire can change everything",
        "top": 8061,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 39,
    "contexts": [
      {
        "tag": "span",
        "text": "Attract",
        "top": 1393,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Engage",
        "top": 1393,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hire",
        "top": 1393,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "9.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "button",
        "text": "Product",
        "top": 8,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Customers",
        "top": 8,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Log in",
        "top": 8,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "275",
    "size": "84px",
    "lineHeight": "88.2px",
    "letterSpacing": "-3.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "4.6/5",
        "top": 5715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "26.1px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Loved by hiring people. And the people they hire.",
        "top": 5816,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "15px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Copyright © Teamtailor AB Östgötagatan 16 116 25 Stockholm, Sweden. Registered with the Swedish Comp",
        "top": 9901,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "17.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 45,
    "contexts": [
      {
        "tag": "summary",
        "text": "Applicant tracking system",
        "top": 9068,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Enterprise",
        "top": 9102,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Small to Midsize Companies",
        "top": 9139,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Archivo",
    "fontStack": "Archivo, ui-sans-serif, system-ui, sans-serif",
    "weight": "275",
    "size": "42px",
    "lineHeight": "48.3px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“At our scale, processing 3,000+ hires a year demands a platform that can keep up. Teamtailor gives ",
        "top": 2571,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "can",
        "top": 2620,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "keep",
        "top": 2669,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F4F1EC",
    "alpha": 1,
    "cssValue": "rgb(244, 241, 236)",
    "count": 20,
    "contexts": [
      {
        "tag": "a",
        "text": "Log in",
        "top": 8,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Menu",
        "top": -42,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2944,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#483434",
    "alpha": 1,
    "cssValue": "rgb(72, 52, 52)",
    "count": 131,
    "contexts": [
      {
        "tag": "button",
        "text": "Product",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Customers",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "g",
        "text": "",
        "top": -35,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 14,
    "contexts": [
      {
        "tag": "header",
        "text": "ProductCustomersLog inBook a demoSolutionsApplicant tracking systemHiring, without the busy workEmpl",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "h1",
        "text": "For hiring people.",
        "top": 791,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "All you need to make every hire count.",
        "top": 801,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#483535",
    "alpha": 0.7607843137254902,
    "cssValue": "rgba(72, 52, 52, 0.76)",
    "count": 22,
    "contexts": [
      {
        "tag": "span",
        "text": "Head of Talent Acquisition, Liseberg",
        "top": 2862,
        "property": "text"
      },
      {
        "tag": "time",
        "text": "Dec 10, 2025",
        "top": 7983,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Product",
        "top": 9034,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FEE6FE",
    "alpha": 1,
    "cssValue": "rgb(254, 230, 254)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "EnterpriseSmall to Midsize Companies",
        "top": 9098,
        "property": "background"
      },
      {
        "tag": "ul",
        "text": "EnglishEnglish (US)SvenskaDanskDeutschEspañolSuomiFrançaisItalianoNederlandsNorskPortuguês (Brasil)P",
        "top": 9151,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F4F1EC",
    "alpha": 0.8509803921568627,
    "cssValue": "oklab(0.959068 0.00123698 0.00732243 / 0.85)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Customer Stories",
        "top": 7481,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.9490196078431372,
    "cssValue": "color(srgb 1 1 1 / 0.95)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "MenuBook a demo",
        "top": -50,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FB9BE4",
    "alpha": 1,
    "cssValue": "rgb(251, 155, 228)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 8,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#EAF08E",
    "alpha": 1,
    "cssValue": "rgb(234, 240, 142)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Attract",
        "top": 1393,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FCD2FA",
    "alpha": 1,
    "cssValue": "rgb(252, 210, 250)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "English (US)",
        "top": 9192,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": -35,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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 sections, with ample padding inside UI cards and text blocks, creating a breathable layout.
- Corner style: Consistently rounded corners are a key motif.
- Radius: Large border radii applied to images, feature cards, and button elements, giving a soft, approachable feel.
- Borders: Mostly borderless, relying on subtle background color shifts (e.g., from white to #F4F1EC) to define sections.
- Buttons: Fully rounded, pill-shaped buttons with solid fills and no borders.
- Content width: Content is generally centered and constrained to a readable max-width, though background images and specific layouts (like the scrolling features) utilize wider or split-pane grids.
- Density: Low density, prioritizing large typography and imagery over compact information display.
- Evidence: Observed in DOM elements like the 'Book a demo' button (color-8), the sticky header pill, and the broad spacing between the hero and logo strip.

## Sections

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

1. **Navbar — Teamtailor Navbar** (Home)
   A sparse bar with a centered wordmark and one pink button keeps attention on the single primary action.
   Capture: 1440×50px; page bounds 0–50px of 10037px; source section ID: `2f85b7f7-c046-4b87-a79d-ea4eda4ed60d`; image: https://media.designdetails.io/library/2eb6218e83043f4ac99d8fdf93c5325c8a57b726579dc0cf9ecb5948e1ad493c/2f85b7f7-c046-4b87-a79d-ea4eda4ed60d.webp
   SECTION.md v3.2: `2f85b7f7-c046-4b87-a79d-ea4eda4ed60d` (deterministic evidence; editorial review pending)
2. **Hero — Full-bleed video hero with caption** (Home)
   A full-width photo with a short bottom-left label sets the human tone and leaves the image to carry the message.
   Capture: 1440×836px; page bounds 50–886px of 10037px; source section ID: `3701a5b9-5992-46ea-bb50-256dfc42b76f`; image: https://media.designdetails.io/library/20850bbfa53238ba1efc3a8e325462b602010a8d7db01a373a4c9b9b4962fc25/3701a5b9-5992-46ea-bb50-256dfc42b76f.webp
   SECTION.md v3.2: `3701a5b9-5992-46ea-bb50-256dfc42b76f` (deterministic evidence; editorial review pending)
3. **Hero — Headline, logo strip and product mockups** (Home)
   A centered headline with two buttons sits above tablet and phone mockups, so visitors see the offer and the product together.
   Capture: 1440×1435px; page bounds 886–2321px of 10037px; source section ID: `d5f8ec5d-ead0-479b-b14c-2ab4710b8faa`; image: https://media.designdetails.io/library/adf45da175226efdaa5b7964bf60c2c85f4ad543a14028311c8b4ea5cc243f29/d5f8ec5d-ead0-479b-b14c-2ab4710b8faa.webp
   SECTION.md v3.2: `d5f8ec5d-ead0-479b-b14c-2ab4710b8faa` (deterministic evidence; editorial review pending)
4. **Testimonials — Large centered customer quote** (Home)
   Oversized quote type with a small attribution line puts a concrete scale claim front and center with plenty of white space.
   Capture: 1440×623px; page bounds 2321–2944px of 10037px; source section ID: `a2d44ed1-fe83-407e-87a3-e8c0ace12b06`; image: https://media.designdetails.io/library/6fc00eeef259942cc6e280d95efaf055ba658f3ee9af111b36a6642b45c6162a/a2d44ed1-fe83-407e-87a3-e8c0ace12b06.webp
   SECTION.md v3.2: `a2d44ed1-fe83-407e-87a3-e8c0ace12b06` (deterministic evidence; editorial review pending)
5. **Testimonials — Customer video thumbnail with logo** (Home)
   A rounded video frame with the customer's logo over a photo ties the quote above to a real, watchable story.
   Capture: 1440×781px; page bounds 2944–3725px of 10037px; source section ID: `b63a6e3b-3f72-4592-8991-2d3516045bde`; image: https://media.designdetails.io/library/ebdd21de3e7e2b55c1e13885a97e40522d6ae15e7cf1142a3d62546a905e5027/b63a6e3b-3f72-4592-8991-2d3516045bde.webp
   SECTION.md v3.2: `b63a6e3b-3f72-4592-8991-2d3516045bde` (deterministic evidence; editorial review pending)
6. **Features — Three features beside stacked visuals** (Home)
   Short labeled captions on the left line up with large images on the right, so each capability is paired with a visual.
   Capture: 1440×1790px; page bounds 3725–5515px of 10037px; source section ID: `629385fa-e16f-44ec-8144-9b16cfca08fe`; image: https://media.designdetails.io/library/9c1d99d537f7cf9ff79017526570bef1f82e2b5cd04c2ea0536d93270e6248e8/629385fa-e16f-44ec-8144-9b16cfca08fe.webp
   SECTION.md v3.2: `629385fa-e16f-44ec-8144-9b16cfca08fe` (deterministic evidence; editorial review pending)
7. **Stats — Review score with award badges** (Home)
   One large rating number above a row of small badges gives quick third-party proof without any reading effort.
   Capture: 1440×746px; page bounds 5515–6261px of 10037px; source section ID: `936a3345-c9a2-451c-83af-39d32ad771cb`; image: https://media.designdetails.io/library/b814eedc7385b2f0aecc71f0662ad37942327c002a093807ab0f7b1ac3d7fae9/936a3345-c9a2-451c-83af-39d32ad771cb.webp
   SECTION.md v3.2: `936a3345-c9a2-451c-83af-39d32ad771cb` (deterministic evidence; editorial review pending)
8. **Features — Security standards over photo background** (Home)
   Certification tags with short descriptions sit in a bottom row over a full-bleed photo, making compliance easy to scan.
   Capture: 1440×847px; page bounds 6261–7108px of 10037px; source section ID: `1a961f8d-afc3-4698-b440-8684c665447d`; image: https://media.designdetails.io/library/844d5032cf1168e4639a4531c9756bfecca6933b4eea08383980135fedd559c8/1a961f8d-afc3-4698-b440-8684c665447d.webp
   SECTION.md v3.2: `1a961f8d-afc3-4698-b440-8684c665447d` (deterministic evidence; editorial review pending)
9. **Testimonials — Horizontal carousel of customer story cards** (Home)
   Photo cards with tags, titles and dates in a sliding row let visitors browse several case studies quickly.
   Capture: 1440×913px; page bounds 7108–8021px of 10037px; source section ID: `603d192b-78d5-47cb-889c-9c16bca60f3a`; image: https://media.designdetails.io/library/699198c40f1e249f3d92e7ff00c7434314a1bf9819e78c0cb2902c1317d94299/603d192b-78d5-47cb-889c-9c16bca60f3a.webp
   SECTION.md v3.2: `603d192b-78d5-47cb-889c-9c16bca60f3a` (deterministic evidence; editorial review pending)
10. **CTA — Mission banner over full-bleed photo** (Home)
   White headline text over a warm photo with a small pink button gives a clear, low-pressure path to the company mission.
   Capture: 1440×847px; page bounds 8021–8868px of 10037px; source section ID: `59221f2d-0b66-4ccf-9ade-e6661658e677`; image: https://media.designdetails.io/library/f5f0287ae0723a1bcaf1a41897518c32c0a53ef0567e0381d4e4705156508c5d/59221f2d-0b66-4ccf-9ade-e6661658e677.webp
   SECTION.md v3.2: `59221f2d-0b66-4ccf-9ade-e6661658e677` (deterministic evidence; editorial review pending)
11. **Footer — Blank spacer before footer** (Home)
   An empty strip separates the closing banner from the footer, giving the page a clean break.
   Capture: 1440×150px; page bounds 8868–9018px of 10037px; source section ID: `a403a791-13d2-460f-8f50-4dd29852ab07`; image: https://media.designdetails.io/library/ba0d3d3b60a6d225bf16af14d9688d8cfa068027e7a49c2b3a68dc5012ce84c4/a403a791-13d2-460f-8f50-4dd29852ab07.webp
   SECTION.md v3.2: `a403a791-13d2-460f-8f50-4dd29852ab07` (deterministic evidence; editorial review pending)
12. **Footer — Pink multi-column link footer** (Home)
   Grouped link columns on a solid pink background make navigation easy to scan and echo the brand colour.
   Capture: 1440×1019px; page bounds 9018–10037px of 10037px; source section ID: `42ee47e9-e0ca-42cb-b3df-b58aa88ebb94`; image: https://media.designdetails.io/library/7be9ea22672bc818224bb1e75bf234975b17633dcb957018e8cfb93655d85a1f/42ee47e9-e0ca-42cb-b3df-b58aa88ebb94.webp
   SECTION.md v3.2: `42ee47e9-e0ca-42cb-b3df-b58aa88ebb94` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/466e751ba84af7d8f934c104c881ffe40b4cd9dbf31986234dc3e617ca16a786/desktop_full-3073880f-2026-11-11T08-09-53-727Z.webp
- Mobile screenshot: https://media.designdetails.io/library/bf3f5b7678b7bee88644b905a73293dbe7bd3b4e1dbdc78c77963076a0778243/mobile_full-3073880f-2026-11-11T08-10-29-669Z.webp
- Open Graph image: https://media.designdetails.io/library/0e03829018e7b7330a83a31e4906c41d9543e9b9450afbd46baa12bd3a4cf954/og_image-3073880f-2026-11-11T08-10-01-793Z.webp
- Full-page video: https://media.designdetails.io/library/ed9788524e0c1289bd31c59cc442b9d2009b1eea961ac60a5881be02f9cf7ad2/motion-1794392791368.mp4
- Video poster: https://media.designdetails.io/library/660bf02efa3692b2f69657f31d7a3e4db29697924b9901157cd1e6dd41fa27e6/motion-poster-1794392791368.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 With Background Imagery
- Logo Strip
- Feature Collection
- Testimonial Card
- Primary Button
- Footer
- Sticky Pill Header
- Asymmetric Scroll Linked Showcase
- Sticky Footer Reveal

## Quality rubric

Overall: 57.75/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Teamtailor's homepage is a well-executed example of the contemporary pastel-accented B2B SaaS marketing template: a disciplined single-typeface hierarchy, a considered brown/pink/off-white palette, and a coherent sequence of sections (hero, logo strip, split-pane feature showcase, testimonial, stat band, security credentials, customer stories, mission banner, footer reveal) all tied together with consistent whitespace, rounded-corner cards, and pill-shaped controls. Product UI is shown through genuine mockups rather than stock imagery, and testimonials are credibly attributed, giving the content integration real substance. However, nearly every structural and motion idea here—the sticky pill nav, the footer curtain reveal, the parallax split-pane feature reveal, and the pastel-on-neutral color system—now appears across a wide swath of 2024–2025 SaaS sites, meaning the site's personality comes from careful craft within a known idiom rather than from any distinctive or hard-to-substitute concept. The result is a clean, professional, trustworthy marketing site that executes its chosen style competently, but it does not yet assemble enough original thinking across its system to be considered genuinely standout design.

- Typography (15%): 63 — A single disciplined typeface (Archivo) is used across an unusually wide weight/size range (275–500 weight, 12px–84px), with tight negative letter-spacing on display sizes creating a clean, confident hierarchy ('For hiring people.' at 48px/300, '4.6/5' at 84px/275, nav at 14px/500). Execution is consistent and legible, but reliance on one family with no contrasting voice (serif, mono, or display alternate) limits distinctiveness.
- Color (10%): 67 — A warm, considered palette—dark brown text (#483434) instead of black, pink (#FB9BE4) as the singular action color, pastel yellow-green (#EAF08E) for tag chips, and off-white (#F4F1EC) surfaces—reads as deliberate and consistently applied across header, buttons, tags, and the full pink footer. It is attractive and coherent, though the pastel-SaaS combination (soft pink/yellow/off-white) is now a widely shared convention in this category.
- Layout (20%): 65 — The page demonstrates a coherent multi-section system: hero with large photographic/video backdrop, logo strip, left-text/right-visual feature showcase, testimonial block, stat section, security banner, customer-story carousel, and a full-bleed mission panel before the footer. Generous whitespace and consistent max-width/padding rhythm tie sections together, and the asymmetric split-pane feature layout is reused deliberately across multiple feature rows.
- Motion (20%): 60 — Observed effects—sticky pill-shaped header morph, a parallax-style feature showcase where visuals slide past static text, and a sticky 'curtain reveal' footer—are reversible and consistently implemented per the recording. These are competently built scroll-driven interactions, but each (pill nav collapse, footer curtain reveal, split-pane parallax) is now a very common pattern across contemporary SaaS marketing sites, so craft is solid without being distinctive.
- Originality (25%): 40 — Every component and pattern observed—sticky pill header, pastel-on-off-white palette with brown text, pill buttons, asymmetric scroll-linked feature reveal, and sticky footer curtain—matches a widely replicated 2024–2025 B2B SaaS template language seen across many competitor marketing sites. The palette and photography lend personality, but no hard-to-substitute structural or interaction idea is evident; the execution is a polished instance of a known idiom rather than a distinct concept.
- Content (10%): 66 — Product UI is shown through realistic, well-integrated device mockups (ATS job table, mobile app, career-site drag-and-drop editor) rather than generic stock graphics, and testimonials/customer stories are attributed with named roles and companies (Hedvig Reed, Liseberg video). Trust signals (SOC2, ISO certifications, G2 badges) and a logo strip of recognizable brands (IKEA, Arsenal, Vivienne Westwood) reinforce credibility within the visual system.

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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A warm handshake photo and a pink-lit laptop set a human tone before any software appears, and tablet and phone mockups then show the actual dashboard so visitors can judge the product itself. Soft beige backgrounds, rounded yellow and pink tags, and logo rows of recognisable brands build trust as the page moves from story to proof to pricing.

## 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.