# Yeahright design system

> Yeahright design system measured from yeahright.co: Druk font, 6 color hex codes, type scale, spacing and a free DESIGN.md. Dark theme with 4px corners.

Canonical page: https://sitepeel.dev/design-md/yeahright.co/

Yeahright’s website (yeahright.co) uses the Druk font on a #071919 background. Measured by Sitepeel on November 5, 2026.

## What font does Yeahright use?

Yeahright uses Druk (weight 400), with Share Tech Mono for code on yeahright.co. Page titles are 450px at weight 400 (122px on phones). Measured on November 5, 2026.

- Druk (weights 400)
- Share Tech Mono (weights 400)

## Yeahright colors: palette and hex codes

Yeahright’s main colors are #071919 (deep cyan) for the background and #E5F9D7 (pale green) for text. Measured on November 5, 2026.

- #071919: deep cyan
- #E5F9D7: pale green
- #000000: near black

## What is Yeahright built with?

Yeahright’s website (yeahright.co) is built with Astro, Netlify, GSAP, Lenis and Three.js. Measured on November 5, 2026.

- Animation & 3D: GSAP 3.15.0, Lenis 1.3.25, Three.js r181
- Hosting & CDN: Netlify
- JavaScript framework: Astro

## Questions and answers

### What font does Yeahright use?

Yeahright’s website uses Druk (weight 400), with Share Tech Mono for code. Page titles are 450px at weight 400 (122px on phones). Measured on November 5, 2026.

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

On yeahright.co: #071919 (deep cyan) for the background and #E5F9D7 (pale green) for text. The color palette above lists all 6 colors with their hex codes and where each one is used.

### What is the Yeahright design system?

The design system on this page is yeahright.co’s, as measured on November 5, 2026: Druk type and 4px corners, written down as a DESIGN.md. It is not Yeahright’s own documentation.

### What is Yeahright built with?

Yeahright’s website (yeahright.co) is built with Astro, Netlify, GSAP, Lenis and Three.js. Measured on November 5, 2026.

### What is the Yeahright DESIGN.md?

A plain-text file with Yeahright’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 Yeahright’s official design system?

No. Sitepeel measured it from yeahright.co’s public page on November 5, 2026. It is an independent analysis, not made or approved by Yeahright.

### Can I use Yeahright’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 Yeahright’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/yeahright.co/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 Yeahright.

## The DESIGN.md file

```markdown
---
version: alpha
name: Yeahright
description: "Dark interface measured from yeahright.co: Druk type, pale green accents, flat surfaces and 4px corners."
colors:
  background: "#071919"
  surface: "#071919"
  on-surface: "#E5F9D7"
  on-background: "#E5F9D7"
  outline: "#E5F9D740"
  primary: "#E5F9D7"
  on-primary: "#000000"
  success: "#C9F7B2"
typography:
  headline-display:
    fontFamily: Druk
    fontSize: 450px
    fontWeight: 400
    lineHeight: 1
  headline-lg:
    fontFamily: Druk
    fontSize: 259px
    fontWeight: 400
    lineHeight: 0.8
  headline-md:
    fontFamily: Druk
    fontSize: 150px
    fontWeight: 400
    lineHeight: 0.8
  code:
    fontFamily: Share Tech Mono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-display-mobile:
    fontFamily: Druk
    fontSize: 122px
    fontWeight: 400
    lineHeight: 1
  headline-md-mobile:
    fontFamily: Druk
    fontSize: 75px
    fontWeight: 400
    lineHeight: 0.8
rounded:
  md: 4px
spacing:
  md: 15px
  lg: 28px
  xl: 50px
  section: 120px
  margin: 15px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.code}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Yeahright Design System

## Overview

Yeahright describes itself as: “Tom Barrow is a Manchester-based creative developer with over 15 years building websites for agencies, startups and brands. Full-time tinkerer, part-time pizza extraordinaire.” The interface is dark, built on **Deep Cyan (#071919)** with **Pale Green (#E5F9D7)** text, and **Pale Green (#E5F9D7)** as the main accent.

Type is set in **Druk**, with **Share Tech Mono** for code. Headlines run large; body text is compact. The surface language is flat. Corners are mostly 4px.

Measured from [yeahright.co](https://yeahright.co/) on November 5, 2026 at 1440×900 and 390×844 from 146 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 6 roles, plus gradient stops #E5F9D7, #C9F7B2.

- **Deep Cyan (#071919):** Page background, seen 1 time. Token `background`, CSS `--colour-dark`.
- **Pale Green (#E5F9D7):** Primary text and headings, seen 32 times. Token `on-surface`, CSS `--colour-light`.
- **Pale Green 25% (#E5F9D740):** Borders and dividers, seen 6 times. Token `outline`.
- **Pale Green (#E5F9D7):** Primary actions (the main text color; the palette is monochrome), seen 41 times. Token `primary`, CSS `--colour-light`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Light Green (#C9F7B2):** Success and positive states, seen 5 times. Token `success`, CSS `--colour-mid`.

## Typography

**Druk** and **Share Tech Mono** (monospace) share the interface. Fallback stack: `Druk`.

- **headline-display:** Druk 450px at weight 400, line height 1, uppercase (122px on mobile). Page title (h1).
- **headline-lg:** Druk 259px at weight 400, line height 0.8. Section headings (h2).
- **headline-md:** Druk 150px at weight 400, line height 0.8, uppercase (75px on mobile). Sub-section headings.
- **code:** Share Tech Mono 16px at weight 400, line height 1, tracking -0.03em. Code and technical values.

## Layout

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

- **Scale:** md 15px, lg 28px, xl 50px.
- **Sections:** 120px vertical padding between major sections.
- **Page margin:** 15px on each side of full-width sections.
- **Breakpoints:** 575.98px, 576px, 767.98px, 768px, 991.98px, 992px, 1200px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #E5F9D740 borders.

## Shapes

Most elements use 4px corners. Measured radii, most used first:

- **md (4px):** 28 elements.

## Components

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

- **button-ghost (“BORED? B O R E D ?”):** transparent fill, #E5F9D7 text, 16px/400, padding 0px.
- **link:** transparent fill, #E5F9D7 text, padding 0px.

## Do's and Don'ts

- Do use #071919 for the page.
- Do reserve #E5F9D7 for primary actions and key highlights.
- Do reuse the measured spacing steps (15px, 28px).
- Do use 4px corners on most elements.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Druk and Share Tech Mono.
- Don't use #E5F9D7 for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.5s. Longer ambient animations run 1s, 3s, 2s.

- **Easing:** `cubic-bezier(1, 0.01, 0.43, 0.95)`, `cubic-bezier(0.4, -0.01, 0, 0.99)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```