# Heynesh design system

> Heynesh design system measured from heynesh.com: Tr 3 A font, #FFFF23 primary on #D5CFBE, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/heynesh.com/

Heynesh’s website (heynesh.com) uses the Tr 3 A font and #FFFF23 as its main color on a #D5CFBE background. Measured by Sitepeel on November 7, 2026.

## What font does Heynesh use?

Heynesh uses Tr 3 A (weights 400, 500 and 700) and Ppneuemontreal (weight 700) on heynesh.com. Page titles are 76px at weight 700 and body text is 17px. Measured on November 7, 2026.

- Tr 3 A (weights 400, 500, 700)
- Ppneuemontreal (weights 700)
- Ppneuemontreal Book (weights 400)

## Heynesh colors: palette and hex codes

Heynesh’s main colors are #D5CFBE (light amber) for the background, #000000 (near black) for text and #FFFF23 (vivid yellow) as the main accent. Measured on November 7, 2026.

- #D5CFBE: light amber
- #000000: near black
- #222222: charcoal
- #3F3E39: warm graphite
- #FFFF23: vivid yellow

## What is Heynesh built with?

Heynesh’s website (heynesh.com) is built with Webflow, jQuery, Swiper, Cloudflare and bunny.net. Measured on November 7, 2026.

- JavaScript framework: jQuery 3.5.1
- Animation & 3D: GSAP 3.15.0, GSAP DrawSVG 3.15.0, GSAP Flip 3.15.0, GSAP MotionPath 3.15.0
- Hosting & CDN: Cloudflare, bunny.net
- Site builder & CMS: Webflow
- UI & CSS: Swiper

## Questions and answers

### What font does Heynesh use?

Heynesh’s website uses Tr 3 A (weights 400, 500 and 700) and Ppneuemontreal (weight 700). Page titles are 76px at weight 700 and body text is 17px. Measured on November 7, 2026.

### What are the Heynesh colors and hex codes?

On heynesh.com: #D5CFBE (light amber) for the background, #000000 (near black) for text and #FFFF23 (vivid yellow) as the main accent. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the Heynesh design system?

The design system on this page is heynesh.com’s, as measured on November 7, 2026: Tr 3 A type, #FFFF23 as the main color and 11.95px corners, written down as a DESIGN.md. It is not Heynesh’s own documentation.

### What is Heynesh built with?

Heynesh’s website (heynesh.com) is built with Webflow, jQuery, Swiper, Cloudflare and bunny.net. The full tech stack Sitepeel found: jQuery, GSAP, GSAP DrawSVG, GSAP Flip, GSAP MotionPath, GSAP Observer, GSAP ScrollSmoother, GSAP ScrollTo, GSAP ScrollTrigger and GSAP SplitText. Measured on November 7, 2026.

### What is the Heynesh DESIGN.md?

A plain-text file with Heynesh’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Heynesh’s official design system?

No. Sitepeel measured it from heynesh.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by Heynesh.

### Can I use Heynesh’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Heynesh’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/heynesh.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Heynesh.

## The DESIGN.md file

```markdown
---
version: alpha
name: Heynesh
description: "Light interface measured from heynesh.com: Tr 3 A type with Ppneuemontreal, vivid yellow accents, flat surfaces and pill-shaped controls."
colors:
  background: "#D5CFBE"
  surface: "#D5CFBE"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#222222"
  on-surface-muted: "#3F3E39"
  overlay: "#C2B8AC4D"
  primary: "#FFFF23"
  on-primary: "#000000"
typography:
  display-hero:
    fontFamily: Tr 3 A
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1
  headline-display:
    fontFamily: Tr 3 A
    fontSize: 76px
    fontWeight: 700
    lineHeight: 1.03
  headline-lg:
    fontFamily: Tr 3 A
    fontSize: 66px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: Tr 3 A
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
  headline-sm:
    fontFamily: Ppneuemontreal
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
  title-lg:
    fontFamily: Tr 3 A
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1
  body-md:
    fontFamily: Ppneuemontreal Book
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-lg:
    fontFamily: Tr 3 A
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.008em
  body-sm:
    fontFamily: Tr 3 A
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Tr 3 A
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.1
  label-sm:
    fontFamily: Ppneuemontreal
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
rounded:
  sm: 8.06px
  md: 11.95px
  lg: 38.02px
  full: 9999px
spacing:
  sm: 5.76px
  md: 9.94px
  lg: 18px
  xl: 49.97px
  gutter: 20.02px
  section: 144px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px
    height: 44px
  button-ghost:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-lg}"
    rounded: 0px
    padding: 18px 24.05px
  card:
    backgroundColor: "{colors.overlay}"
    textColor: "#FFFFFF"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 24.05px 32.98px 24.05px 24.05px
  link:
    textColor: "#FFFFFF"
---

# Heynesh Design System

## Overview

Heynesh describes itself as: “Webflow developer with 7 years of experience delivering custom builds, CMS setups, GSAP animations, and technical SEO for biotech, SaaS, and blockchain brands.” The interface is light, built on **Light Amber (#D5CFBE)** with **Near Black (#000000)** text, and **Vivid Yellow (#FFFF23)** as the main accent.

Type is set in **Tr 3 A** and **Ppneuemontreal**. Headlines run large; body text is 17px. The surface language is flat. Controls are pill-shaped.

Measured from [heynesh.com](https://heynesh.com/) on November 7, 2026 at 1440×900 from 361 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **Light Amber (#D5CFBE):** Page background, seen 1 time. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 6 times. Token `on-surface`, CSS `--black`.
- **Charcoal (#222222):** Secondary text, seen 8 times. Token `on-surface-variant`.
- **Warm Graphite (#3F3E39):** Muted text and metadata, seen 13 times. Token `on-surface-muted`.
- **Light Orange 30% (#C2B8AC4D):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Vivid Yellow (#FFFF23):** Brand color in the header, seen 22 times. Token `primary`, CSS `--yellow`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**Tr 3 A**, **Ppneuemontreal** and **Ppneuemontreal Book** share the interface. Fallback stack: `Tr 3 A, Arial, sans-serif`.

- **display-hero:** Tr 3 A 80px at weight 700, line height 1. Oversized hero statements.
- **headline-display:** Tr 3 A 76px at weight 700, line height 1.03. Page title (h1).
- **headline-lg:** Tr 3 A 66px at weight 500, line height 1. Section headings (h2).
- **headline-md:** Tr 3 A 46px at weight 500, line height 1. Sub-section headings.
- **headline-sm:** Ppneuemontreal 30px at weight 700, line height 1. Card and feature titles.
- **title-lg:** Tr 3 A 28px at weight 500, line height 1. Small titles.
- **body-md:** Ppneuemontreal Book 17px at weight 400, line height 1.6. Body text.
- **body-lg:** Tr 3 A 19px at weight 500, line height 1.4, tracking -0.008em. Lead paragraphs.
- **body-sm:** Tr 3 A 14px at weight 400, line height 1.6. Secondary and small text.
- **label-md:** Tr 3 A 15px at weight 500, line height 1.1. Buttons, navigation and labels.
- **label-sm:** Ppneuemontreal 14px at weight 700, line height 1. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 5% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** sm 5.76px, md 9.94px, lg 18px, xl 49.97px.
- **Sections:** 144px vertical padding between major sections.
- **Gaps:** 20.02px is the most common gap in flex and grid layouts.
- **Breakpoints:** 479px, 767px, 768px, 991px, 992px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **md (11.95px):** 48 elements.
- **lg (38.02px):** 32 elements.
- **full (9999px):** 24 elements.
- **sm (8.06px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Book a Call Book a Call”):** #FFFF23 fill, #000000 text, 16.992px/500, 11.952px radius, padding 0px.
- **button-ghost (“Why Webflow instead of custom co”):** transparent fill, #222222 text, 19.008px/500, padding 18px 24.05px.
- **card:** #C2B8AC4D fill, #FFFFFF text, 16.992px/500, 8.064px radius, padding 24.05px 32.98px 24.05px 24.05px.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #D5CFBE for the page.
- Do keep text in 3 levels: #000000, #222222, #3F3E39.
- Do use #FFFF23 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (5.76px, 9.94px, 18px).
- Do make buttons and chips fully rounded (9999px); most other elements use 11.95px corners.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Tr 3 A, Ppneuemontreal and Ppneuemontreal Book.
- Don't use #FFFF23 for large backgrounds or body text.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.25s, 0.3s, 0.4s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/heynesh.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```