# Voy Design — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://design.joinvoy.com/
Captured: 2026-11-03
CSS measured: 2026-11-03T04:55:03.071Z at 1440×1000 — https://design.joinvoy.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 design features a sophisticated, dark-themed editorial aesthetic with a deep green canvas and contrasting off-white typography. It heavily utilizes a mix of an elegant serif font for display text and a clean sans-serif for UI elements and metadata. Layouts are characterized by generous spacing, staggered floating elements, and prominent rounded corners on media and interactive elements, creating a soft yet premium feel.

## Classification

- Industry: health
- Site type: Portfolio, Landing
- Business model: Not identified
- Styles: editorial, minimal, typographic, dark-premium, organic-modern
- Platform: Custom code
- Technology: GSAP

## Typography

- Display: Season Mix — weight 300; size 180px; line-height 153px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Season Mix — weight 300; size 83.2px; line-height 86.5px; tracking -2.9px; Regular (90% role confidence, computed values)
- Body: NB International Book — weight 400; size 15px; line-height 20px; tracking -0.5px; Regular (90% role confidence, computed values)
- Mono: NB International Pro — weight 500; size 18px; line-height 21.6px; tracking 4px; uppercase (80% role confidence, computed values)

## Functional palette

- Canvas — canvas #001A0B: color-1: computed rgb(0, 26, 11); AI role: The deep green (#001A0B) used as the primary background color across the entire document. (100% role confidence, computed values)
- Text — text #E8EDE2: color-4: computed rgb(232, 237, 226); AI role: The pale off-white (#E8EDE2) used for the majority of the primary typography. (95% role confidence, computed values)
- Muted Text — muted text #A9BBA6: color-15: computed rgb(169, 187, 166); AI role: The muted green (#A9BBA6) used for the numbers in the principles list and unhighlighted text states. (90% role confidence, computed values)
- Accent — accent #EFD85D: color-16: computed rgb(239, 216, 93); AI role: The bright yellow (#EFD85D) used for the floating cursor labeled 'Philip'. (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": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "300",
    "size": "79.2px",
    "lineHeight": "87.1px",
    "letterSpacing": "-4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Come join us",
        "top": 10580,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "4px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Danny Shaw",
        "top": 5213,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Staff Product Designer",
        "top": 5239,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Our team comes from some of the most successful and product-led companies out there",
        "top": 2460,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "4px",
    "traits": "uppercase",
    "count": 36,
    "contexts": [
      {
        "tag": "span",
        "text": "ABOUT US",
        "top": 1544,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A",
        "top": 1545,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "B",
        "top": 1545,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "300",
    "size": "83.2px",
    "lineHeight": "86.5px",
    "letterSpacing": "-2.9px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "span",
        "text": "We",
        "top": 1623,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "are",
        "top": 1623,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "a",
        "top": 1623,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "300",
    "size": "80px",
    "lineHeight": "90.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "We aim to change people’s lives",
        "top": 3156,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We start from the patient need",
        "top": 3342,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We are entrepreneurs",
        "top": 3529,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "NB International Book",
    "fontStack": "\"NB International Book\", Arial, sans-serif",
    "weight": "400",
    "size": "26px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "text",
        "text": "Mon",
        "top": 6410,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "Tue",
        "top": 6410,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "We",
        "top": 6410,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "22.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 3156,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 3342,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 3529,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "joinvoy.com",
        "top": 11293,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "LinkedIn",
        "top": 11293,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Instagram",
        "top": 11293,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "300",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Pablo",
        "top": 1928,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Philip",
        "top": 1442,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sal",
        "top": 2082,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "400",
    "size": "37.4px",
    "lineHeight": "37.1px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Designing for a",
        "top": 441,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "100 years of",
        "top": 481,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "healthy living",
        "top": 522,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "300",
    "size": "180px",
    "lineHeight": "153px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "design",
        "top": 11206,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Season Mix",
    "fontStack": "\"Season Mix\", Georgia, serif",
    "weight": "300",
    "size": "48px",
    "lineHeight": "51.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“I’ve grown so much as a designer in my five years here, and I’m still growing. That’s what I love a",
        "top": 4754,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "summary",
        "text": "Explore artwork",
        "top": 928,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Manrope",
    "fontStack": "Manrope, Arial, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Testimonial 1 of 5",
        "top": 5328,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "NB International Book",
    "fontStack": "\"NB International Book\", \"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "20px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About us",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Principles",
        "top": 33,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "←",
        "top": 915,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "↑",
        "top": 915,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "↓",
        "top": 915,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore careers",
        "top": 10695,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Manrope",
    "fontStack": "Manrope, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -100,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "NB International Pro",
    "fontStack": "\"NB International Pro\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Reset",
        "top": 915,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#001A0B",
    "alpha": 1,
    "cssValue": "rgb(0, 26, 11)",
    "count": 13,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -100,
        "property": "text"
      },
      {
        "tag": "main",
        "text": "Designing for a100 years ofhealthy livingDesigning for a 100 years of healthy living Explore artwork",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Designing for a100 years ofhealthy livingDesigning for a 100 years of healthy living Explore artwork",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 115,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 778,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 775,
        "property": "svg-fill"
      },
      {
        "tag": "image",
        "text": "",
        "top": 816,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000A04",
    "alpha": 1,
    "cssValue": "rgb(0, 10, 4)",
    "count": 1,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to content Home About us Principles Work Join us Designing for a100 years ofhealthy livingDesig",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#E8EDE2",
    "alpha": 1,
    "cssValue": "rgb(232, 237, 226)",
    "count": 92,
    "contexts": [
      {
        "tag": "span",
        "text": "Designing for a",
        "top": 441,
        "property": "text"
      },
      {
        "tag": "summary",
        "text": "Explore artwork",
        "top": 928,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "←",
        "top": 915,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F1EDDF",
    "alpha": 1,
    "cssValue": "rgb(241, 237, 223)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9652,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F0ECE1",
    "alpha": 1,
    "cssValue": "rgb(240, 236, 225)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9104,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 41,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 33,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1004,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1907,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6392,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6392,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FF623B",
    "alpha": 1,
    "cssValue": "rgb(255, 98, 59)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 62,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2030,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2030,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#B8C6B9",
    "alpha": 1,
    "cssValue": "rgb(184, 198, 185)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "About us",
        "top": 33,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 5299,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D5E96D",
    "alpha": 1,
    "cssValue": "rgb(213, 233, 109)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -100,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#C0DF16",
    "alpha": 1,
    "cssValue": "rgb(192, 223, 22)",
    "count": 3,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2153,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2153,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Efsthatia",
        "top": 2175,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#A9BBA6",
    "alpha": 1,
    "cssValue": "rgb(169, 187, 166)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 3156,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#EFD85D",
    "alpha": 1,
    "cssValue": "rgb(239, 216, 93)",
    "count": 3,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1421,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1421,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Philip",
        "top": 1442,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#F2DBF1",
    "alpha": 1,
    "cssValue": "rgb(242, 219, 241)",
    "count": 3,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2060,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2060,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Sal",
        "top": 2082,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Voy Design © 2026",
        "top": 11439,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.09019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.09)",
    "count": 4,
    "contexts": [
      {
        "tag": "nav",
        "text": "Home About us Principles Work Join us",
        "top": 26,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#E6F0DC",
    "alpha": 0.2,
    "cssValue": "rgba(228, 238, 221, 0.2)",
    "count": 8,
    "contexts": [
      {
        "tag": "summary",
        "text": "Explore artwork",
        "top": 928,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "← ↑ Reset ↓ →",
        "top": 910,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#DCE9D3",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(219, 232, 211, 0.45)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore careers",
        "top": 10695,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#39483E",
    "alpha": 1,
    "cssValue": "rgb(57, 72, 62)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1001,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#59635B",
    "alpha": 1,
    "cssValue": "rgb(89, 99, 91)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1096,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#9AAA99",
    "alpha": 1,
    "cssValue": "rgb(154, 170, 153)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Testimonial 1 of 5",
        "top": 5328,
        "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 macro-spacing between distinct sections, allowing elements to breathe and relying on large viewports to frame content blocks.
- Corner style: Consistently soft and rounded across all contained elements.
- Radius: Pronounced border radii (likely 16px-24px) for images and portfolio cards, and fully rounded pill shapes for navigation, badges, and icon buttons.
- Borders: Borders are largely absent on structural layout elements, appearing only as subtle, thin, translucent strokes on floating UI components like the nav bar and circular buttons.
- Buttons: Buttons favor subtle translucent outlines over solid fills, often adopting pill or circular shapes to match the soft aesthetic.
- Content width: Content is largely centered within a wide max-width container, though floating images and masonry grids frequently break out into a full-bleed or staggered alignment.
- Density: Low density; the design prioritizes negative space and very large typographic statements over tightly packed information.
- Evidence: Visual confirmation of the floating pill navigation, soft-cornered imagery in the 'OUR WORK' section, and the dominant deep green (#001A0B) background spanning the entire layout.

## Sections

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

1. **Navbar — Voy Design Navbar** (Home)
   A compact centered pill with five short labels keeps navigation unobtrusive over the dark background and the highlighted tab shows the current page.
   Capture: 1440×76px; page bounds 0–76px of 11506px; source section ID: `76a55470-61ad-4430-8fac-29094021905d`; image: https://media.designdetails.io/library/b2c1e2f2eeb893e6e466772b5deb90fb5f418807a9c268a14233fbba6f0d8033/76a55470-61ad-4430-8fac-29094021905d.webp
   SECTION.md v3.2: `76a55470-61ad-4430-8fac-29094021905d` (deterministic evidence; editorial review pending)
2. **Hero — Scattered floating imagery with tagline** (Home)
   Photos and app screens drift around a short tagline on a dark field, giving a first impression of the brand's range without crowding.
   Capture: 1440×1224px; page bounds 76–1300px of 11506px; source section ID: `9c4d9774-e489-4d20-bd5a-6e48c5ea63d3`; image: https://media.designdetails.io/library/300eea97211366f92767914eb6e2d9256e55aa6fe8602664ccb5a52cc38afa01/9c4d9774-e489-4d20-bd5a-6e48c5ea63d3.webp
   SECTION.md v3.2: `9c4d9774-e489-4d20-bd5a-6e48c5ea63d3` (deterministic evidence; editorial review pending)
3. **Other — Large about statement with cursors** (Home)
   Oversized light type carries the mission while labeled colored cursors suggest a collaborative team, making the statement readable and human.
   Capture: 1440×1000px; page bounds 1300–2300px of 11506px; source section ID: `fcbe935c-000c-443d-9031-d229d35adb3f`; image: https://media.designdetails.io/library/fec6e63fd99b9fa07aedbdc991200a5dde32eb533e89cbdee43b2274becfe7f8/fcbe935c-000c-443d-9031-d229d35adb3f.webp
   SECTION.md v3.2: `fcbe935c-000c-443d-9031-d229d35adb3f` (deterministic evidence; editorial review pending)
4. **Logo Cloud — Row of past employer logos** (Home)
   White monochrome logos in a single row with faded edges show team credibility quickly and stay quiet against the dark background.
   Capture: 1440×586px; page bounds 2300–2886px of 11506px; source section ID: `99d50ce8-e538-4e85-a818-d81a77254343`; image: https://media.designdetails.io/library/89ae8c72630abf886d70509d79a13db27233c59ebf5748d9ecb7bf85e02fa4b1/99d50ce8-e538-4e85-a818-d81a77254343.webp
   SECTION.md v3.2: `99d50ce8-e538-4e85-a818-d81a77254343` (deterministic evidence; editorial review pending)
5. **Process — Numbered list of seven principles** (Home)
   Large single-line statements with small superscript numbers and thin dividers make the values easy to scan in sequence.
   Capture: 1440×1636px; page bounds 2886–4522px of 11506px; source section ID: `dcf711d7-eda8-42f7-9ebe-be58b50d4a4b`; image: https://media.designdetails.io/library/3ba349bf87352568d360dd5064fac94a1d1e732a365aa8d38a2afada9b285327/dcf711d7-eda8-42f7-9ebe-be58b50d4a4b.webp
   SECTION.md v3.2: `dcf711d7-eda8-42f7-9ebe-be58b50d4a4b` (deterministic evidence; editorial review pending)
6. **Testimonials — Employee quote with portrait and arrows** (Home)
   A large quote beside a rounded portrait puts a real face to the words, while small arrow buttons let visitors browse more quotes.
   Capture: 1440×1017px; page bounds 4522–5539px of 11506px; source section ID: `100dfc04-bd07-4198-94b2-a0f94a6bbd6a`; image: https://media.designdetails.io/library/301f5981c7ea062bbb98be68bdad4b1cdc3c61c5997c6093b50bece0149f0ffe/100dfc04-bd07-4198-94b2-a0f94a6bbd6a.webp
   SECTION.md v3.2: `100dfc04-bd07-4198-94b2-a0f94a6bbd6a` (deterministic evidence; editorial review pending)
7. **Gallery — Full-width sunset photo reel** (Home)
   Large warm photography fills the width, setting an emotional tone and giving the work samples room before the details appear.
   Capture: 1440×1400px; page bounds 5539–6939px of 11506px; source section ID: `223054c4-fe7a-4d11-a187-6ce7dfa8439d`; image: https://media.designdetails.io/library/740c7ea86cc293e5eb1f563a2431f79c77318b64889f0b3e21f230625f5eb141/223054c4-fe7a-4d11-a187-6ce7dfa8439d.webp
   SECTION.md v3.2: `223054c4-fe7a-4d11-a187-6ce7dfa8439d` (deterministic evidence; editorial review pending)
8. **Gallery — Scrolling photo with weekly tracker overlay** (Home)
   A weekday checkmark overlay on a sunset portrait ties the imagery to the product's habit-tracking purpose.
   Capture: 1440×603px; page bounds 6939–7542px of 11506px; source section ID: `b529bd81-1480-41d6-bc78-cf599c18238d`; image: https://media.designdetails.io/library/323fb4fb4834f9356af2e1ba5dbb07cf8217a821ede1964debbb1a2faaae69a6/b529bd81-1480-41d6-bc78-cf599c18238d.webp
   SECTION.md v3.2: `b529bd81-1480-41d6-bc78-cf599c18238d` (deterministic evidence; editorial review pending)
9. **Gallery — Cropped photo transition with tracker** (Home)
   The warm image continues with the tracker dots cropped, keeping the scroll sequence continuous and smooth.
   Capture: 1440×228px; page bounds 7542–7770px of 11506px; source section ID: `8fb3e653-5d73-4b8d-8a4a-71360d1fdcf5`; image: https://media.designdetails.io/library/0dc451346fa3750ba8fe079982cfa1a7d2c2e6b70447087885fb541b867fd8e5/8fb3e653-5d73-4b8d-8a4a-71360d1fdcf5.webp
   SECTION.md v3.2: `8fb3e653-5d73-4b8d-8a4a-71360d1fdcf5` (deterministic evidence; editorial review pending)
10. **Gallery — Bento grid of brand work** (Home)
   Mixed tiles of billboard, food, product and app screens in varied sizes show the breadth of the work while keeping a consistent rounded style.
   Capture: 1440×2387px; page bounds 7770–10157px of 11506px; source section ID: `e37ce3df-6400-476a-b229-fd04c5ea0635`; image: https://media.designdetails.io/library/607ac0230eca0b4209677012d4933897223608ea1a7bab2b59f38d6e6fa82fa2/e37ce3df-6400-476a-b229-fd04c5ea0635.webp
   SECTION.md v3.2: `e37ce3df-6400-476a-b229-fd04c5ea0635` (deterministic evidence; editorial review pending)
11. **CTA — Careers invitation ringed by team photos** (Home)
   Circular team photos surround a large heading and one outlined button, giving a friendly, focused prompt to explore jobs.
   Capture: 1440×940px; page bounds 10157–11097px of 11506px; source section ID: `125e4ee0-bdab-4606-9c57-bea35ee58da7`; image: https://media.designdetails.io/library/411e14df0125970966c421c6a8818f55dd2fdfe125ed715d0fe806a204604d03/125e4ee0-bdab-4606-9c57-bea35ee58da7.webp
   SECTION.md v3.2: `125e4ee0-bdab-4606-9c57-bea35ee58da7` (deterministic evidence; editorial review pending)
12. **Footer — Oversized wordmark footer with links** (Home)
   Large logo and serif word frame a small row of social links and legal text, ending the page with strong brand recall.
   Capture: 1440×409px; page bounds 11097–11506px of 11506px; source section ID: `3f5c44cc-ad26-40cc-b987-5f90872cffa8`; image: https://media.designdetails.io/library/bad325742aff397f7f74e511a3e1ae16267b9fc477065a2dd4d68e6acec4f023/3f5c44cc-ad26-40cc-b987-5f90872cffa8.webp
   SECTION.md v3.2: `3f5c44cc-ad26-40cc-b987-5f90872cffa8` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/367ccd7203c20cae38666d9dff0e5a2657a8120db264fdfb1f9d889b502b2508/desktop_full-9fc0e7d5-2026-11-03T04-55-03-096Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3ce912d4ec1112157406ae5ceb4e145fc456275ddd8334ed5992e6807e5ece9f/mobile_full-9fc0e7d5-2026-11-03T04-55-45-655Z.webp
- Open Graph image: https://media.designdetails.io/library/54dbe132f96fbc4ae8c3a4c951015618c7ed939188c52716d08953ba71e627ad/og_image-9fc0e7d5-2026-11-03T04-55-11-245Z.webp
- Full-page video: https://media.designdetails.io/library/d9ae9bc0fddf287d2f9071bc60554b6ad4c99922a7653ec6c1645d3c598d93af/motion-1793685870539.mp4
- Video poster: https://media.designdetails.io/library/fcf7cdcfe061af72d87d18db600185629b7cfd8b5d834d9adc1d8dd5837c8156/motion-poster-1793685870539.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
- Testimonial Card
- Logo Strip
- Gallery
- Icon Button
- Floating Cursors/Labels
- Sequential Reveal List

## Quality rubric

Overall: 65.05/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Voy Design's self-portfolio site presents a tightly held dark-green editorial system — large light-weight serif statements, tracked uppercase sans labels, and soft-rounded cards — carried consistently from hero through a numbered principles list, testimonial carousel, parallax work gallery, and a circular 'come join us' team display. The motion design is the most ambitious axis: a documented, reversible sequence of scroll-linked effects (horizontal gallery panning, named cursor labels drifting toward keywords, line-by-line principle reveals, parallax masonry, continuous circular rotation) works as a connected system rather than an isolated trick, and the floating named-cursor device specifically gives the 'about' section a genuinely distinctive, concept-driven touch tying the team's identity to the mission copy. That said, much of the surrounding visual language — dark premium canvas, serif/sans display pairing, pill-shaped floating nav, soft-radius imagery — is now a recognizable convention across contemporary design-studio portfolios, which limits how far originality can be credited beyond the cursor component itself. Typography achieves hierarchy mostly through scale and tracking rather than structural invention, and while color is used with restraint and purpose (accent pills scoped specifically to named collaborators), it does not extend meaningfully beyond that single use case. Motion's conceptual breadth is commendable, but claims about its technical smoothness or performance cannot be substantiated from the available evidence. Overall this is a well-executed, idea-forward implementation of an increasingly common genre — solidly good, short of the multiple hard-to-substitute inventions and verified end-to-end polish that would justify a higher tier.

- Typography (15%): 65 — A two-voice system (light 300-weight 'Season Mix' serif at 79-180px for display statements, tracked uppercase 'NB International Pro' sans for labels, and a smaller Book variant for body/nav) is applied consistently across hero, about, principles and quote sections, with negative tracking on large display sizes giving a tightened, editorial feel. The approach is competent and legible but is a familiar large-serif-plus-tracked-caps formula seen widely in premium agency sites, and font-7's use of NB International Book at 26px inside the calendar UI graphic suggests some inconsistency outside the primary hierarchy.
- Color (10%): 68 — A disciplined dark palette (#001A0B canvas, #E8EDE2 primary text, #A9BBA6 muted) is held consistently for ~11,500px of scroll, with sparing, well-chosen accent pops (#EFD85D yellow, #C0DF16 lime, #F2DBF1 pink) reserved for the floating name-tag component, giving the accents clear functional meaning rather than decorative scattering.
- Layout (20%): 69 — The page moves through a legible sequence of distinct layout modes — centered hero with floating offset imagery, a numbered principles list, a two-column testimonial carousel, a full-bleed parallax masonry gallery, and a circular radial team arrangement — all sharing consistent radius, spacing and a floating pill nav, which gives genuine cross-section coherence rather than one strong screen propping up a thin site.
- Motion (20%): 71 — Multiple distinct scroll-linked behaviors are documented working together and in reverse: a horizontally panning intro gallery, named cursor labels drifting toward highlighted words, a line-by-line principles color reveal, a parallax masonry pan, and a continuously rotating circular team gallery — a genuinely multi-part motion system rather than a single scroll trick, though no evidence establishes smoothness, frame rate, or easing quality, which must not be assumed.
- Originality (25%): 56 — The standout idea — floating, named, pastel pill cursors drifting toward keywords to simulate collaborators 'annotating' the team statement — is a clever, specific device with a clear conceptual rationale (a design studio showing its people at work). However the surrounding idiom (deep-green dark canvas, large light-weight serif headlines, tracked uppercase labels, pill nav, rounded-corner masonry) is now a well-established genre for premium product/design-studio sites, and the circular rotating team gallery and parallax masonry gallery are familiar patterns rather than hard-to-substitute inventions.
- Content (10%): 65 — Content and design devices are purposefully linked: the floating name-labels appear specifically near words like 'builders' and 'entrepreneurs' to dramatize team authorship, the principles list numbers count up as each statement resolves into focus, and the portfolio gallery intermixes real product UI screens with lifestyle photography to substantiate the 'Voy' health-product narrative, giving the motion and layout clear communicative purpose rather than pure 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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A near-black forest green background lets real health product photos and a runner in orange kit pop with life, while large soft serif headlines keep the mood calm and trustworthy. Small colour-coded name tags floating beside the team statement add a human touch, and a long scroll paced through principles, logos and product shots keeps the story easy to follow.

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