# YAAS Energy design system

> YAAS Energy design system measured from yaas-energy.com: Soledago font, 10 color hex codes, type scale, spacing and a free DESIGN.md. Measured November 5, 2026.

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

YAAS Energy’s website (yaas-energy.com) uses the Soledago font on a #0B0A09 background. Measured by Sitepeel on November 5, 2026.

## What font does YAAS Energy use?

YAAS Energy uses Soledago (weight 400) and Helvetica Neue (weights 400 and 700) on yaas-energy.com. Page titles are 92px at weight 400 and body text is 16px. Measured on November 5, 2026.

- Soledago (weights 400)
- Helvetica Neue (weights 400, 700)
- Bounded (weights 500)

## YAAS Energy colors: palette and hex codes

YAAS Energy’s main colors are #0B0A09 (near black) for the background and #FFFFFF (white) for text, with #E53A6B (pink) and #0085C6 (cyan) as other accents. Measured on November 5, 2026.

- #0B0A09: near black
- #FFFFFF: white
- #DBDADA: silver
- #212121: charcoal
- #E53A6B: pink
- #0085C6: cyan

## What is YAAS Energy built with?

YAAS Energy’s website (yaas-energy.com) is built with React, React Router, GSAP, Three.js and Nginx. Measured on November 5, 2026.

- JavaScript framework: React 18.3.1, React Router 6.x
- Animation & 3D: GSAP 3.15.0, Three.js r169, GSAP ScrollTrigger, React Three Fiber
- Server: Nginx 1.24.0

## Questions and answers

### What font does YAAS Energy use?

YAAS Energy’s website uses Soledago (weight 400) and Helvetica Neue (weights 400 and 700). Page titles are 92px at weight 400 and body text is 16px. Measured on November 5, 2026.

### What are the YAAS Energy colors and hex codes?

On yaas-energy.com: #0B0A09 (near black) for the background and #FFFFFF (white) for text, with #E53A6B (pink) and #0085C6 (cyan) as other accents. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the YAAS Energy design system?

The design system on this page is yaas-energy.com’s, as measured on November 5, 2026: Soledago type and 20px corners, written down as a DESIGN.md. It is not YAAS Energy’s own documentation.

### What is YAAS Energy built with?

YAAS Energy’s website (yaas-energy.com) is built with React, React Router, GSAP, Three.js and Nginx. The full tech stack Sitepeel found: React, React Router, GSAP, Three.js, Nginx, GSAP ScrollTrigger and React Three Fiber. Measured on November 5, 2026.

### What is the YAAS Energy DESIGN.md?

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

No. Sitepeel measured it from yaas-energy.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by YAAS Energy.

### Can I use YAAS Energy’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 YAAS Energy’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/yaas-energy.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 YAAS Energy.

## The DESIGN.md file

```markdown
---
version: alpha
name: YAAS Energy
description: "Dark monochrome interface measured from yaas-energy.com: Soledago type with Helvetica Neue, tonal surfaces and 20px corners."
colors:
  background: "#0B0A09"
  surface: "#0B0A09"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#DBDADA"
  surface-container-low: "#212121"
  overlay: "#D9D9D90D"
  outline: "#212121"
  primary: "#FFFFFF"
  on-primary: "#212121"
  secondary: "#E53A6B"
  tertiary: "#0085C6"
typography:
  headline-display:
    fontFamily: Soledago
    fontSize: 92px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Soledago
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Soledago
    fontSize: 41px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Helvetica Neue
    fontSize: 32px
    fontWeight: 700
  body-md:
    fontFamily: Helvetica Neue
    fontSize: 16px
    fontWeight: 400
  label-lg:
    fontFamily: Bounded
    fontSize: 16px
    fontWeight: 500
    letterSpacing: -0.013em
  label-md:
    fontFamily: Bounded
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
  label-sm:
    fontFamily: Bounded
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
  headline-lg-mobile:
    fontFamily: Soledago
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-md-mobile:
    fontFamily: Soledago
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
rounded:
  sm: 10px
  md: 20px
  lg: 100px
  full: 9999px
spacing:
  sm: 8px
  md: 10px
  lg: 25.61px
  xl: 51.22px
  gutter: 20px
  section: 122.94px
  container: 1440px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 10px 20px
    height: 38px
  button-outline:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 8px 20px
    height: 34px
  button-ghost:
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: 8.2px 14.34px
  link:
    textColor: "{colors.on-primary}"
---

# YAAS Energy Design System

## Overview

YAAS Energy describes itself as: “YAAS — zero-sugar, 5-calorie energy drink in 5 bold flavors: Citrus Lemon, Blueberry Rush, Wild Strawberry, Solar Orange, Green Apple. No crash.” The interface is dark, built on **Near Black (#0B0A09)** with **White (#FFFFFF)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Soledago** and **Helvetica Neue**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 20px.

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

## Colors

The palette has 10 roles, plus gradient stops #E53A6B, #A8194B, #0085C6, #00517A.

- **Near Black (#0B0A09):** Page background, seen 1 time. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 47 times. Token `on-surface`, CSS `--ink`.
- **Silver (#DBDADA):** Secondary text, seen 5 times. Token `on-surface-variant`, CSS `--ink-soft`.
- **Charcoal (#212121):** Raised areas one step from the page, seen 17 times. Token `surface-container-low`, CSS `--ink-on-light`.
- **Silver 5% (#D9D9D90D):** Translucent fill for cards and controls, seen 10 times. Token `overlay`.
- **Charcoal (#212121):** Borders and dividers, seen 2 times. Token `outline`, CSS `--ink-on-light`.
- **White (#FFFFFF):** Primary buttons and calls to action, seen 67 times. Token `primary`, CSS `--ink`.
- **Charcoal (#212121):** Text and icons on primary. Token `on-primary`.
- **Pink (#E53A6B):** Accent in text, fills and borders, seen 12 times. Token `secondary`.
- **Cyan (#0085C6):** Accent in text, fills and borders, seen 2 times. Token `tertiary`.

## Typography

**Soledago**, **Helvetica Neue** and **Bounded** share the interface. Fallback stack: `Soledago, Arial Narrow, system-ui, -apple-system`. Other loaded fonts: Soledago PL.

- **headline-display:** Soledago 92px at weight 400, line height 1.1, tracking -0.02em. Page title (h1).
- **headline-lg:** Soledago 60px at weight 400, line height 1.1, tracking -0.025em (40px on mobile). Section headings (h2).
- **headline-md:** Soledago 41px at weight 400, line height 1.1, tracking -0.02em (26px on mobile). Sub-section headings.
- **headline-sm:** Helvetica Neue 32px at weight 700. Card and feature titles.
- **body-md:** Helvetica Neue 16px at weight 400. Body text.
- **label-lg:** Bounded 16px at weight 500, tracking -0.013em. Large buttons and tabs.
- **label-md:** Bounded 13px at weight 500, line height 1.2. Buttons, navigation and labels.
- **label-sm:** Bounded 12px at weight 500, line height 1.5. Small labels and badges.

## Layout

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

- **Scale:** sm 8px, md 10px, lg 25.61px, xl 51.22px.
- **Sections:** 122.94px vertical padding between major sections.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1440px.
- **Breakpoints:** 599px, 639px, 640px, 959px, 960px, 1023px, 1199px, 1200px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#212121) and #212121 borders.

## Shapes

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

- **md (20px):** 56 elements.
- **lg (100px):** 52 elements.
- **sm (10px):** 16 elements.
- **full (9999px):** 4 elements.

## Components

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

- **button-primary (“See the Flavors →”):** #FFFFFF fill, #212121 text, 16px/500, 100px radius, padding 10px 20px, border 1px solid #FFFFFF.
- **button-outline (“Flavors”):** #D9D9D90D fill, #FFFFFF text, 16px/500, 100px radius, padding 8px 20px, border 1px solid #FFFFFF.
- **button-ghost (“No thanks”):** transparent fill, #212121 text, 13.3181px/500, 100px radius, padding 8.2px 14.34px, border 1px solid #212121.
- **link:** transparent fill, #212121 text, padding 0px.

## Do's and Don'ts

- Do use #0B0A09 for the page and lift surfaces in small steps: #212121.
- Do keep text in 2 levels: #FFFFFF, #DBDADA.
- Do let contrast carry emphasis; primary actions use #FFFFFF on #0B0A09.
- Do set headlines in Soledago with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 10px, 25.61px).
- Do use 20px corners on most elements; larger surfaces also use 100px and 10px.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Soledago, Helvetica Neue and Bounded.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.2s, 0.25s. Longer ambient animations run 0.65s.

- **Easing:** `ease`, `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```