# Hyrup — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.hyrup.de/
Captured: 2026-11-05
CSS measured: 2026-11-05T16:02:56.579Z at 1440×1000 — https://www.hyrup.de/
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

Hyrup is a modern, corporate landing page with a clean, minimal aesthetic tailored for a tech-driven recruitment agency. The design heavily utilizes generous whitespace, rounded pill shapes for interactive elements, and a stark contrast between a primary light theme and a specialized dark UI section. A distinct purple-blue gradient serves as a recurring visual motif in the hero and footer, while geometric line-art illustrations add technical flavor to the feature highlights. Typography is crisp and hierarchical, primarily relying on 'PP Mori'.

## Classification

- Industry: other
- Site type: Landing
- Business model: Not identified
- Styles: minimal, corporate, gradient, geometric, tech-driven
- Platform: Framer
- Technology: Not identified

## Typography

- Display: PP Mori Regular — weight 400; size 64px; line-height 57.6px; tracking normal; Regular (100% role confidence, computed values)
- Heading: PP Mori Regular — weight 400; size 40px; line-height 48px; tracking normal; Regular (100% role confidence, computed values)
- Body: PP Mori Regular — weight 400; size 14px; line-height 21px; tracking normal; Regular (100% role confidence, computed values)
- Mono: Inter — weight 400; size 16px; line-height 19.2px; tracking normal; Regular (70% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Primary background color for the page body. (100% role confidence, computed values)
- Text — text #070323: color-2: computed rgb(7, 3, 35); AI role: Primary dark color for headings and body text. (100% role confidence, computed values)
- Surface — surface #F6F6F8: color-3: computed rgb(246, 246, 248); AI role: Used as the background for feature cards and testimonial cards to separate them from the canvas. (95% role confidence, computed values)
- Accent — accent #6359EF: color-15: computed rgb(99, 89, 239); AI role: Purple tone used in UI elements, gradients, and icons. (80% 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": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 100,
    "contexts": [
      {
        "tag": "p",
        "text": "Für Fachkräfte",
        "top": -120,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Für Fachkräfte",
        "top": -99,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Für Unternehmen",
        "top": -120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "26px",
    "lineHeight": "30.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "h5",
        "text": "Rundum bestens betreut.",
        "top": 2996,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Mit hyrUP zum neuen Job",
        "top": 2996,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Danke für die Unterstützung!",
        "top": 2996,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h6",
        "text": "Test Job (m/w/d)",
        "top": 3709,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Werkstudent Recruiting / Talent Acquisition (m/w/d)",
        "top": 3881,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Berater Informationssicherheit Test (m/w/d)",
        "top": 4053,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "Was wir Ihnen bieten",
        "top": 1008,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Dreifacher Fokus für perfekte Matches – gezielt und effizient",
        "top": 1945,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "5,0 aus Überzeugung.",
        "top": 2849,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "57.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Where Talent Meets Opportunity",
        "top": 244,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "Sprechen Sie uns direkt an!",
        "top": 5096,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 38,
    "contexts": [
      {
        "tag": "p",
        "text": "Unser Ansatz",
        "top": 965,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Unsere Expertise",
        "top": 1902,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "01",
        "top": 2113,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "5.0",
        "top": 3000,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "5.0",
        "top": 3000,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "5.0",
        "top": 3000,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "PP Mori Regular",
    "fontStack": "\"PP Mori Regular\", \"PP Mori Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Global vernetzt",
        "top": 1243,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Spezialisiertes Recruiting",
        "top": 1243,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tech-driven",
        "top": 1458,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Copyright © hyrup 2026",
        "top": 6136,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 44,
    "contexts": [
      {
        "tag": "body",
        "text": ":root body { background: rgb(255, 255, 255); }Für FachkräfteFür FachkräfteFür UnternehmenFür Unterne",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Für FachkräfteFür FachkräfteFür UnternehmenFür UnternehmenStellensucheStellensucheÜber unsÜber unsKo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Kontakt",
        "top": -120,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#070323",
    "alpha": 1,
    "cssValue": "rgb(7, 3, 35)",
    "count": 258,
    "contexts": [
      {
        "tag": "p",
        "text": "Für Fachkräfte",
        "top": -120,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "KontaktKontakt",
        "top": -130,
        "property": "background"
      },
      {
        "tag": "h1",
        "text": "Where Talent Meets Opportunity",
        "top": 244,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F6F6F8",
    "alpha": 1,
    "cssValue": "rgb(246, 246, 248)",
    "count": 35,
    "contexts": [
      {
        "tag": "div",
        "text": "Global vernetztZugang zu internationalen Top-Unternehmen und Kandidaten - schnell und direkt.",
        "top": 1179,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Unsere Expertise",
        "top": 1902,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Dreifacher Fokus für perfekte Matches – gezielt und effizient",
        "top": 1945,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#0E0A29",
    "alpha": 1,
    "cssValue": "rgb(14, 10, 41)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "01Fachbereich",
        "top": 2105,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1042,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#080223",
    "alpha": 0.4,
    "cssValue": "rgba(7, 3, 35, 0.4)",
    "count": 21,
    "contexts": [
      {
        "tag": "p",
        "text": "Data Scientist",
        "top": 3343,
        "property": "text"
      },
      {
        "tag": "time",
        "text": "3. Juni 2026",
        "top": 4482,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1027,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#6659F2",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(99, 89, 239, 0.08)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "IT & TechnologieIT-InfrastrukturCybersecuritySAPIT-Leadership & StrategySoftwareentwicklung",
        "top": 2148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#070323",
    "alpha": 0.6,
    "cssValue": "rgba(7, 3, 35, 0.6)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Zugang zu internationalen Top-Unternehmen und Kandidaten - schnell und direkt.",
        "top": 1278,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#655AF1",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(99, 89, 239, 0.28)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "IT-Infrastruktur",
        "top": 2203,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E8E8EF",
    "alpha": 1,
    "cssValue": "rgb(232, 232, 239)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Für FachkräfteFür FachkräfteFür UnternehmenFür UnternehmenStellensucheStellensucheÜber unsÜber unsKo",
        "top": -133,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 65,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 467,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 2105,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1042,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#F00000",
    "alpha": 1,
    "cssValue": "rgb(240, 0, 0)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5154,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "01",
        "top": 2113,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1042,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#09082D",
    "alpha": 1,
    "cssValue": "rgb(9, 8, 45)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#231F3C",
    "alpha": 1,
    "cssValue": "rgb(35, 31, 60)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1042,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#6359EF",
    "alpha": 1,
    "cssValue": "rgb(99, 89, 239)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2307,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1042,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1042,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "rgba(255, 255, 255, 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Vertragsart",
        "top": 2220,
        "property": "text"
      }
    ]
  }
]
```

### 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 (macro-rhythm) with tighter padding inside cards (micro-rhythm).
- Corner style: Distinctly rounded. Interactive elements like buttons and tags use fully rounded pill shapes. Cards use moderate rounded corners.
- Radius: Pill shapes (likely 999px or 50% border-radius) for buttons/nav; approx 12-16px for feature/news cards.
- Borders: Mostly relies on background fills rather than borders. Thin strokes are used for section label pills and icons.
- Buttons: Solid dark background (color-2) with white text, pill-shaped, often including a right-pointing arrow icon.
- Content width: Content is constrained to a central column, likely around 1200px max-width, keeping line lengths readable.
- Density: Low density. High use of negative space around typography and components to create a calm, focused reading experience.
- Evidence: Visible throughout the layout, particularly the stark contrast between the wide spacing of text sections and the compact nature of pill buttons.

## Sections

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

1. **Hero — Centered hero with gradient and logos** (Home)
   A large centered headline on a dark-to-light gradient sets the offer at once, and a single dark button gives one clear next step.
   Capture: 1440×912px; page bounds 0–912px of 6172px; source section ID: `82309500-42da-478d-a990-c5afdd1ec657`; image: https://media.designdetails.io/library/5780c10e9dbcdc23705e27337347a08c511a8c878292cbde91a6e8a21e7b3364/82309500-42da-478d-a990-c5afdd1ec657.webp
   SECTION.md v3.2: `82309500-42da-478d-a990-c5afdd1ec657` (deterministic evidence; editorial review pending)
2. **Features — Four benefits in two-by-two grid** (Home)
   Line-art icons beside short titles and one-line texts in soft grey cards make four benefits quick to scan, with a button below.
   Capture: 1440×870px; page bounds 912–1782px of 6172px; source section ID: `ff7ab9fb-2ad0-46b8-bca8-2fce9e7385b9`; image: https://media.designdetails.io/library/3ba9f99aac18fbb478f3f6e3ee9a7aaf47ce47138c605bb71eacba0c92d3ae19/ff7ab9fb-2ad0-46b8-bca8-2fce9e7385b9.webp
   SECTION.md v3.2: `ff7ab9fb-2ad0-46b8-bca8-2fce9e7385b9` (deterministic evidence; editorial review pending)
3. **Features — Three focus areas on dark panels** (Home)
   Dark cards with tags, a regional dot map and toggles show three recruiting dimensions visually, so the specialisation reads without long text.
   Capture: 1440×906px; page bounds 1782–2688px of 6172px; source section ID: `b10a8c38-2b78-4613-92f3-b51b21f9fc56`; image: https://media.designdetails.io/library/5bdeb9de9c89cec256f790af54d39f72278c1b5019589f2831107cfe95ea9586/b10a8c38-2b78-4613-92f3-b51b21f9fc56.webp
   SECTION.md v3.2: `b10a8c38-2b78-4613-92f3-b51b21f9fc56` (deterministic evidence; editorial review pending)
4. **Testimonials — Rating headline with review card carousel** (Home)
   A bold rating headline sits over evenly sized review cards with star scores, names and roles, which makes the praise credible and easy to skim.
   Capture: 1440×756px; page bounds 2688–3444px of 6172px; source section ID: `b99d6dc7-a5ab-4666-913f-f6f182a7da40`; image: https://media.designdetails.io/library/0ccb2af1017bd513334b020dd5776ff53ab236af75ea5647658a12cbc05f1543/b99d6dc7-a5ab-4666-913f-f6f182a7da40.webp
   SECTION.md v3.2: `b99d6dc7-a5ab-4666-913f-f6f182a7da40` (deterministic evidence; editorial review pending)
5. **Other — Job listing rows with details** (Home)
   Each row pairs a logo, title, location and salary tags with an arrow, so visitors can compare openings and click through quickly.
   Capture: 1440×843px; page bounds 3444–4287px of 6172px; source section ID: `2df580cf-712d-4c9e-90a6-13f393551ae6`; image: https://media.designdetails.io/library/c099891a514545538bc919d04202a63043a6c260ae18e8de0c8e6085ad3b9e96/2df580cf-712d-4c9e-90a6-13f393551ae6.webp
   SECTION.md v3.2: `2df580cf-712d-4c9e-90a6-13f393551ae6` (deterministic evidence; editorial review pending)
6. **Editorial — Three news cards with contact prompt** (Home)
   Dated posts with photos in equal columns show company activity, and the large closing heading with a button leads into the footer links.
   Capture: 1440×1885px; page bounds 4287–6172px of 6172px; source section ID: `80d5598a-f704-4543-b729-5a798631cb00`; image: https://media.designdetails.io/library/067815bd3a102e549a3494a1860c23d44613a2d55e5a452d54670caaa89b3fa0/80d5598a-f704-4543-b729-5a798631cb00.webp
   SECTION.md v3.2: `80d5598a-f704-4543-b729-5a798631cb00` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/357d5f8d18a1f32fe7492e7fc730fd266269b455b746116e69e5440be40889dd/desktop_full-c70ef531-2026-11-05T16-02-56-599Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1c03b264fe678192acab444c9e7a886f9abfdd57d761e5f4fac26c15958bf240/mobile_full-c70ef531-2026-11-05T16-03-31-046Z.webp
- Open Graph image: https://media.designdetails.io/library/5c622a45f37db6f1615a446b61748fd3d3fb95306a58ed3df2456214a2ca3926/og_image-c70ef531-2026-11-05T16-03-04-808Z.webp
- Full-page video: https://media.designdetails.io/library/fcfbeae4a26918bbcf3f2b8897806f8ee3e5af12c043998eb2187748a178831d/motion-1793896627372.mp4
- Video poster: https://media.designdetails.io/library/6d081bf91404cc8dd9116597987c56663c590ac7a781a697451f5317eb13ba60/motion-poster-1793896627372.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
- Logo Strip
- Feature Card
- Product UI
- Testimonial Card
- Product Card
- Editorial Card
- Primary Button
- Tag
- Footer
- Section Label Pill

## Quality rubric

Overall: 48.06/100 (Serviceable)
Evidence coverage: 80%
Judge tier: Serviceable
Verdict: Hyrup presents a clean, professionally assembled corporate recruitment site built from a narrow but consistent palette (navy ink, white canvas, light-gray surfaces, purple-blue accent) and generous whitespace. Structurally it moves predictably through hero, logo strip, feature cards, a dark 'product' panel, testimonials, job listings, news, and a gradient-wave footer — all legible and well-spaced, with decent content-to-component mapping in the job listings and testimonial cards. However, nearly every signature element (pill nav and CTA, gradient hero, geometric node icons, dark UI mockup section, testimonial carousel, wave-footer graphic) is a widely used contemporary SaaS/startup convention, leaving originality very low. Typography is one unweighted-sized ladder of a single regular-weight family rather than a considered hierarchy, and an unexplained red value disrupts the otherwise disciplined color system. No motion evidence was supplied, so interactive polish cannot be credited. The result is competent, tidy execution within a highly generic, template-adjacent idiom rather than a distinguished or memorable design system.

- Typography (15%): 56 — The system relies on a single family, PP Mori Regular, used at every size from 12px to 64px with weight locked at 400 throughout (font-1 through font-6, font-8 all list weight 400). Hierarchy is created exclusively through size stepping (64/40/26/20/18/14/12px) rather than weight or style contrast, which is functional but thin — a 64px hero heading set in the same regular weight as body copy lacks the typographic authority seen in stronger systems. Inter is used only for numeric data (ratings, copyright), a reasonable but minor functional pairing.
- Color (10%): 57 — The palette is disciplined overall — white canvas, near-black navy text/ink (#070323), a light gray card surface (#F6F6F8), and a purple-blue accent (#6359EF) used consistently in gradients, tags, and icon strokes. However, an unexplained saturated red (#F00000, count 7) appears near the final CTA section with no evident role in the stated palette, which breaks the otherwise controlled two-hue system and reads as an inconsistency or unresolved asset rather than an intentional accent.
- Layout (20%): 60 — The page follows a conventional but well-executed corporate template structure: pill nav, centered hero, logo strip, 2x2 feature-card grid, a dark 'product' panel for contrast, testimonial cards, job-listing rows, news cards, and a footer with a layered gradient flourish. Spacing rhythm is consistent (generous section gaps, tighter card padding) and content is kept to a readable constrained column. The sequencing is legible and consistent, but the structure itself is a fairly generic arrangement of familiar SaaS-site blocks with no distinctive compositional idea.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so animation, transitions, scroll choreography, and easing cannot be judged.
- Originality (25%): 27 — Nearly every component — pill-shaped floating nav, dark pill CTA with arrow icon, purple gradient hero fading to white, line-art geometric node icons, a dark 'product UI' panel breaking the light theme, card-based testimonials with star ratings, and a layered gradient wave footer — are now extremely common conventions across SaaS/startup and recruitment templates. No element here reads as a hard-to-substitute idea specific to Hyrup; the identity is carried almost entirely by the stock purple-navy gradient and node iconography rather than a genuine conceptual device.
- Content (10%): 56 — Content is reasonably well integrated into the component system: job listings carry functional metadata (location, remote tag, salary band, arrow-to-apply), testimonials pair avatar, name, and role with star ratings, and the news section pairs dated articles with photography. This is competent content-to-component mapping, though the components themselves (card grids, list rows) are generic containers rather than purpose-built for the recruitment context.

Coverage: 80% 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 deep navy hero fading into white sets a calm, trustworthy tone before the logo strip of recognisable clients backs up the recruiting pitch. Thin geometric line icons on light grey cards and a dark data-panel section give the long page clear rhythm, pacing dense service details into easy, scannable chunks.

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