# Haptic — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.haptic.studio/
Captured: 2026-10-08
CSS measured: 2026-10-08T03:43:19.478Z at 1440×1000 — https://www.haptic.studio/
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: anthropic/claude-sonnet-5

## Design direction

The website for Haptic design studio features a clean, minimal, and modern aesthetic. The layout is primarily driven by large, high-quality images and videos showcasing their work, paired with bold typography. The color palette is mostly monochromatic with stark white backgrounds and black text, accented by occasional muted tones and a bright lime green for emphasis. Key components include a sticky header with a primary CTA, a large hero image, a logo marquee, a masonry-style grid for case studies, a testimonial slider, and a pricing table. The design leverages significant negative space and a strict grid system to organize content clearly.

## Classification

- Industry: creative
- Site type: Waitlist, Landing
- Business model: AI, Agency
- Styles: minimal, bold, corporate, photographic, modern-portfolio
- Platform: Framer
- Technology: Not identified

## Typography

- Display: GT Standard L Medium — weight 500; size 48px; line-height 48px; tracking -1px; Regular (90% role confidence, computed values)
- Heading: GT Standard L Medium — weight 500; size 42px; line-height 42px; tracking -0.6px; Regular (85% role confidence, computed values)
- Body: SF Pro Display Regular — weight 400; size 15px; line-height 18px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background color. (95% role confidence, computed values)
- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for primary typography and iconography. (95% role confidence, computed values)
- Surface — surface #F5F5F7: color-2: computed rgb(245, 245, 247); AI role: Light gray (#F5F5F7) used for secondary backgrounds like the pricing tier cards. (85% role confidence, computed values)
- Accent — accent #9DFF5E: color-21: computed rgb(157, 255, 94); AI role: Bright lime green (#9DFF5E) used as an accent color for specific labels like 'Bespoke'. (70% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "42px",
    "lineHeight": "42px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "Product Design",
        "top": 3377,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Websites",
        "top": 3429,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Branding",
        "top": 3481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Our work",
        "top": 1895,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Pricing",
        "top": 6381,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "A design studio for startups and scaleups",
        "top": 804,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "SF Pro Display Regular",
    "fontStack": "\"SF Pro Display Regular\", \"SF Pro Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "Haptic",
        "top": -40,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Work",
        "top": -40,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Services",
        "top": -40,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "p",
        "text": "Ornn",
        "top": 2496,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AI data engineering",
        "top": 2515,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Caesar",
        "top": 2496,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Two weekly updates",
        "top": 6900,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Weekly sprint call",
        "top": 6917,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Async team comms",
        "top": 6933,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", -apple-system, \"system-ui\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "11.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Book a call",
        "top": 44,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Let's talk about your project",
        "top": 61,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ornn AI",
        "top": 126,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "SF Pro Display Regular",
    "fontStack": "\"SF Pro Display Regular\", \"SF Pro Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Co-Founder, OneKind",
        "top": 5410,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Co-Founder, Powertown",
        "top": 5768,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Founder, Twomakers",
        "top": 5848,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "8.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Coming soon",
        "top": 2583,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Coming soon",
        "top": 3902,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Coming soon",
        "top": 4512,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "8.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "CONTACT",
        "top": 54,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "VIEW",
        "top": 136,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "100px",
    "lineHeight": "80px",
    "letterSpacing": "-3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Haptic",
        "top": 7084,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "“Haptic brought a whole new dimension to OneKind’s brand identity. Their process was transparent, co",
        "top": 5497,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "SF Pro Display Regular",
    "fontStack": "\"SF Pro Display Regular\", \"SF Pro Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "2026",
        "top": 7647,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "TM",
        "top": 7084,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Passenger Sans Regular",
    "fontStack": "\"Passenger Sans Regular\", \"Passenger Sans Regular Placeholder\", sans-serif",
    "weight": "300",
    "size": "4px",
    "lineHeight": "8.8px",
    "letterSpacing": "-0.1px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "TM",
        "top": -40,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "GT Standard L Medium",
    "fontStack": "\"GT Standard L Medium\", \"GT Standard L Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "We",
        "top": 1396,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "design",
        "top": 1396,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "brands,",
        "top": 1396,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "SF Pro Display Medium",
    "fontStack": "\"SF Pro Display Medium\", \"SF Pro Display Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "04:43:18",
        "top": -37,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "23:43:18",
        "top": -37,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 310,
    "contexts": [
      {
        "tag": "p",
        "text": "Book a call",
        "top": 44,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 940,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 943,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F5F5F7",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 247)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "SUBSCRIPTIONTactileFlexible, part-time design support for teams who need consistent progress without",
        "top": 6437,
        "property": "background"
      },
      {
        "tag": "input",
        "text": "",
        "top": 7489,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7628,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 56,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-KTPCXGTN\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "HapticTMWorkServicesPricingLondon04:43:18New York23:43:18Book a callLet's talk about your projectCON",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Haptic",
        "top": -40,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(0, 0, 0, 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F4F5F7",
    "alpha": 1,
    "cssValue": "rgb(244, 245, 247)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Elliott ManghamCo-Founder, OneKind“Haptic brought a whole new dimension to OneKind’s brand identity.",
        "top": 5371,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#DCD6CC",
    "alpha": 1,
    "cssValue": "rgb(220, 214, 204)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1919,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#EBEBED",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 237)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Two weekly updatesWeekly sprint callAsync team commsProduct design supportScalable engagement modelD",
        "top": 6880,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EBEBEB",
    "alpha": 0.8,
    "cssValue": "rgba(235, 235, 235, 0.8)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a callLet's talk about your projectCONTACT",
        "top": 22,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#141414",
    "alpha": 1,
    "cssValue": "rgb(20, 20, 20)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Bespoke senior teamMultidisciplinary specialistsDirect founder involvementTailored scope and timelin",
        "top": 6880,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFB",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 251)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2216,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#101214",
    "alpha": 1,
    "cssValue": "rgb(16, 18, 20)",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Elliott Mangham",
        "top": 5391,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a call",
        "top": 924,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 6904,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#000000",
    "alpha": 0.9019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.9)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a call",
        "top": 6816,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.1)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "CONTACT",
        "top": 48,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Coming soon",
        "top": 2577,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#33312F",
    "alpha": 1,
    "cssValue": "rgb(51, 49, 47)",
    "count": 13,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2240,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(0, 0, 0, 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Looking for something else?",
        "top": 6384,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#9BFF5F",
    "alpha": 0.2,
    "cssValue": "rgba(157, 255, 94, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Bespoke",
        "top": 6457,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFC",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 252)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2242,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6904,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#9DFF5E",
    "alpha": 1,
    "cssValue": "rgb(157, 255, 94)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Bespoke",
        "top": 6463,
        "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 use of vertical and horizontal whitespace, creating distinct separation between sections and elements.
- Corner style: Consistent use of rounded corners on images, video frames, and UI cards (e.g., pricing cards, floating action cards), softening the overall aesthetic.
- Radius: Medium to large border radii observed on primary UI elements.
- Borders: Mostly borderless design; separation is achieved through whitespace and subtle background color differences rather than explicit borders.
- Buttons: Buttons are typically solid with rounded corners, often featuring a blurred or semi-transparent background (glassmorphism effect) when overlaying content.
- Content width: Content is constrained to a central column, likely with a maximum width to ensure readability on large screens, though images occasionally break out.
- Density: Low density; the design prioritizes large imagery and ample whitespace over packing information tightly.
- Evidence: Visual inspection reveals large gaps between text blocks and images, rounded corners on the portfolio grid items, and a central alignment for text content.

## Sections

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

1. **Footer — Haptic Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Haptic Footer”.
   Capture: 1440×1000px; page bounds 7069–8069px of 8069px; source section ID: `00644ca9-e2dd-4c17-a494-496d29ac11f1`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/9c51e3fe52d2c40c2fc4a65389e6570757074b01add74d78998da9bc650f1a6c/section_crop-00644ca9-2026-10-08T03-43-28-181Z.webp
   SECTION.md v3.2: `00644ca9-e2dd-4c17-a494-496d29ac11f1` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/02767309ac05b501f68f5405b7679b349f23e17ba9a3e0a50bcc0ee73742d2d7/desktop_full-aa2d6a20-2026-10-08T03-43-19-498Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/0b96a4558ee53af24c89615ba50975cff8f474f9f242f2345fbab7710972a7e7/mobile_full-aa2d6a20-2026-10-08T03-43-56-887Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5d3c1a51529cae8c887cfb07579ec455a59ed635e64945391d5d951436b59307/og_image-aa2d6a20-2026-10-08T03-43-26-328Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/bb42ef125efb3782233e8d72c66c6c8ccf402eca81d3d5af1adbcdcbb2bd498a/motion-1791432370929.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/a53339f4d8c4f2317236b247f2b5a0cff6c4368505a8c7d53a68686103c2e38e/motion-poster-1791432370929.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
- Primary Button
- Logo Strip
- Gallery
- Testimonial Card
- Pricing Table
- Newsletter Form
- Footer
- Floating Action Cards

## Quality rubric

Overall: 51.05/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Haptic's site is a cleanly built, professionally photographed example of the now-standard startup design-studio template: monochrome palette with a single accent, oblique product photography, logo marquee, masonry portfolio grid, testimonial stack, and tiered pricing. Execution within that idiom is tidy and content-aware, but motion is limited to a marquee and one scroll-tied footer flourish, and no section introduces an idea that couldn't be swapped into a competitor's near-identical site.

- Typography (15%): 60 — A consistent two-family system (GT Standard L Medium for display/headings, SF Pro Display for body/UI) is applied with clear size steps (100/48/42/32/24/15/12px) and tight negative letter-spacing on display sizes, giving a professional editorial feel. However, the hierarchy is the conventional 'agency display face + neutral grotesque body' pairing seen across countless studio sites, with no distinctive type pairing, optical sizing, or expressive treatment beyond scale changes.
- Color (10%): 57 — The palette is a disciplined black-on-white minimalism with a tight set of near-white surfaces (#F5F5F7, #EBEBED, #F4F5F7) and a single lime accent (#9DFF5E) reserved for one 'Bespoke' label. This restraint is executed cleanly and the accent is deployed sparingly rather than decoratively, but the overall approach (monochrome + one accent) is extremely common in the startup-studio genre and the accent appears in only one instance, limiting its systemic value.
- Layout (20%): 61 — A clear grid governs the page: sticky nav with dual-timezone clocks and floating notification cards, full-bleed hero, logo marquee, two-column intro/testimonial pairing, masonry-style portfolio grid (mixed 1/3 and other ratios), stacked testimonial list, and a 3-column pricing table with a visually distinct bespoke tier. Section rhythm and whitespace are consistent and the masonry grid handles varied aspect ratios well. However, the overall page structure (hero → logo strip → intro → portfolio grid → services list → testimonials → pricing → footer) is the default assembly order for this site category, and no section introduces a structurally novel composition.
- Motion (20%): 46 — Authored motion is limited to two patterns: a continuous horizontal logo marquee (a stock proof-of-clients pattern) and a footer graphic of geometric shapes that rotates forward/backward tied to scroll direction. The scroll-linked rotation is a reasonably engaging touch, but it is a single, isolated moment at the very end of the page; the rest of the page's apparent 'change' across frames is attributable to scrolling content into view rather than any authored transition, parallax, or choreographed reveal in the main body (hero, portfolio grid, testimonials, pricing show no distinct animated behavior beyond passive scroll traversal).
- Originality (25%): 35 — The site follows the now-standard 'startup design studio' template almost beat for beat: oblique product-on-desk hero photography, floating notification cards, infinite logo marquee, masonry portfolio grid of device mockups, stacked testimonial cards with talking-head video thumbnails, and a three-tier pricing table with a dark 'enterprise' outlier. Individually competent, but none of these choices are hard to substitute for another agency's site of this type, and no device (copy voice, interaction metaphor, structural conceit) is specific to Haptic's own identity beyond the lime-green accent and dual-clock detail.
- Content (10%): 62 — Content integration is handled with care: portfolio tiles use real contextual device photography matched to each project's product type (tablet for AI chat tool, phone for climate app, phone for sports betting app), testimonials are paired with actual video thumbnails of named clients and roles, and small functional details (dual London/New York clocks, 'Coming soon' tags, credential-gated 'view more work') support the B2B narrative. The pricing tiers tie directly to named service deliverables. This is well above a template with lorem ipsum, though the content itself follows expected agency-site conventions rather than introducing a unique narrative structure.

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

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

## Verification checklist

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

## Curator notes

A warm overhead photo of a desk and tablet sets a grounded, human mood before the grid of client work takes over in a two and three column pattern of dark app screens and bright product shots. Small video testimonials placed beside the intro text and again lower down build trust by putting real client faces next to the claims.

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