# VAYNEX design system

> VAYNEX design system measured from vaynex.framer.website: General Sans font, #134A3C primary, 11 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/vaynex.framer.website/

VAYNEX’s website (vaynex.framer.website) uses the General Sans font and #134A3C as its main color on a #06080C background. Measured by Sitepeel on November 5, 2026.

## What font does VAYNEX use?

VAYNEX uses General Sans (weights 500 and 600) and Inter (weights 400, 500 and 600), with Geist Mono for code on vaynex.framer.website. Page titles are 68px at weight 600 (40px on phones) and body text is 20px. Measured on November 5, 2026.

- General Sans (weights 500, 600)
- Inter (weights 400, 500, 600)
- Geist Mono (weights 500)

## VAYNEX colors: palette and hex codes

VAYNEX’s main colors are #06080C (near black) for the background, #FFFFFF (white) for text and #134A3C (deep teal) as the main accent. Measured on November 5, 2026.

- #06080C: near black
- #FFFFFF: white
- #BABABB: silver
- #5F706A: slate
- #0B4436: deep teal
- #134A3C: deep teal

## What is VAYNEX built with?

VAYNEX’s website (vaynex.framer.website) is built with Framer, React, Motion and Google Fonts. Measured on November 5, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Animation & 3D: Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does VAYNEX use?

VAYNEX’s website uses General Sans (weights 500 and 600) and Inter (weights 400, 500 and 600), with Geist Mono for code. Page titles are 68px at weight 600 (40px on phones) and body text is 20px. Measured on November 5, 2026.

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

On vaynex.framer.website: #06080C (near black) for the background, #FFFFFF (white) for text and #134A3C (deep teal) as the main accent. The color palette above lists all 11 colors with their hex codes and where each one is used.

### What is the VAYNEX design system?

The design system on this page is vaynex.framer.website’s, as measured on November 5, 2026: General Sans type, #134A3C as the main color and 100px corners, written down as a DESIGN.md. It is not VAYNEX’s own documentation.

### What is VAYNEX built with?

VAYNEX’s website (vaynex.framer.website) is built with Framer, React, Motion and Google Fonts. Measured on November 5, 2026.

### What is the VAYNEX DESIGN.md?

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

No. Sitepeel measured it from vaynex.framer.website’s public page on November 5, 2026. It is an independent analysis, not made or approved by VAYNEX.

### Can I use VAYNEX’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 VAYNEX’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/vaynex.framer.website/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 VAYNEX.

## The DESIGN.md file

```markdown
---
version: alpha
name: VAYNEX
description: "Dark interface measured from vaynex.framer.website: General Sans type with Inter, deep teal accents, flat surfaces and 100px corners."
colors:
  background: "#06080C"
  surface: "#06080C"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#BABABB"
  on-surface-muted: "#5F706A"
  overlay: "#0E5C4808"
  overlay-strong: "#FFFFFFB3"
  outline: "#0B4436"
  outline-variant: "#0B2A2214"
  primary: "#134A3C"
  on-primary: "#FFFFFF"
  success: "#0E5C48"
typography:
  headline-display:
    fontFamily: General Sans
    fontSize: 68px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: General Sans
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.045em
  headline-md:
    fontFamily: General Sans
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1.06
    letterSpacing: -0.035em
  headline-sm:
    fontFamily: General Sans
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.035em
  title-lg:
    fontFamily: General Sans
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.025em
  body-md:
    fontFamily: General Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.015em
  body-sm:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.005em
  code:
    fontFamily: Geist Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-display-mobile:
    fontFamily: General Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.04em
  headline-md-mobile:
    fontFamily: General Sans
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.06
    letterSpacing: -0.035em
  title-lg-mobile:
    fontFamily: General Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.025em
rounded:
  sm: 9px
  md: 22px
  lg: 36px
  xl: 100px
spacing:
  md: 15px
  lg: 26px
  xl: 40px
  gutter: 10px
  margin: 40px
components:
  button-primary:
    backgroundColor: "#FFFFFF1F"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.xl}"
    padding: 15px 26px
    height: 45px
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#0B2A22"
    typography: "{typography.label-sm}"
    rounded: "{rounded.xl}"
    padding: 15px 26px
    height: 45px
  button-tertiary:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.xl}"
    padding: 15px 26px
    height: 45px
  button-ghost:
    textColor: "#000000"
    typography: "{typography.label-sm}"
    rounded: "{rounded.xl}"
    padding: 17px 24px
  input-field:
    textColor: "#0B2A22"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface-muted}"
---

# VAYNEX Design System

## Overview

VAYNEX describes itself as: “VAYNEX brings spending, payments, savings, and investments into one intelligent financial app.” The interface is dark, built on **Near Black (#06080C)** with **White (#FFFFFF)** text, and **Deep Teal (#134A3C)** as the main accent.

Type is set in **General Sans** and **Inter**, with **Geist Mono** for code. Headlines run large with tight negative tracking; body text is 20px. Depth comes from soft drop shadows. Corners are mostly 100px.

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

## Colors

The palette has 11 roles, plus gradient stops #17735A, #0D4F3E, #8DBFAA, #1B6550.

- **Near Black (#06080C):** Page background. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 15 times. Token `on-surface`.
- **Silver (#BABABB):** Secondary text, seen 3 times. Token `on-surface-variant`.
- **Slate (#5F706A):** Muted text and metadata, seen 54 times. Token `on-surface-muted`.
- **Deep Teal 3% (#0E5C4808):** Translucent fill for cards and controls, seen 4 times. Token `overlay`.
- **White 70% (#FFFFFFB3):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **Deep Teal (#0B4436):** Borders and dividers, seen 3 times. Token `outline`.
- **Deep Teal 8% (#0B2A2214):** Secondary dividers, seen 3 times. Token `outline-variant`.
- **Deep Teal (#134A3C):** Brand color in logos and imagery. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Teal (#0E5C48):** Success and positive states, seen 11 times. Token `success`.

## Typography

**General Sans**, **Inter** and **Geist Mono** (monospace) share the interface. Fallback stack: `General Sans, General Sans Placeholder, sans-serif`. Other loaded fonts: Instrument Serif.

- **headline-display:** General Sans 68px at weight 600, line height 1.02, tracking -0.04em (40px on mobile). Page title (h1).
- **headline-lg:** General Sans 60px at weight 600, line height 1, tracking -0.045em. Section headings (h2).
- **headline-md:** General Sans 52px at weight 600, line height 1.06, tracking -0.035em (34px on mobile). Sub-section headings.
- **headline-sm:** General Sans 32px at weight 600, line height 1, tracking -0.035em. Card and feature titles.
- **title-lg:** General Sans 30px at weight 600, line height 1.15, tracking -0.025em (24px on mobile). Small titles.
- **body-md:** General Sans 20px at weight 500, line height 1.25, tracking -0.015em. Body text.
- **body-sm:** Inter 15px at weight 400, line height 1.6. Secondary and small text.
- **caption:** Inter 13px at weight 400, line height 1.5. Captions and fine print.
- **label-lg:** Inter 15px at weight 500, line height 1, tracking -0.01em. Large buttons and tabs.
- **label-md:** Inter 14px at weight 600, line height 1.3, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** Inter 12px at weight 500, line height 1.35, tracking -0.005em. Small labels and badges.
- **code:** Geist Mono 12px at weight 500, line height 1.2, tracking 0.08em. Code and technical values.

## Layout

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

- **Scale:** md 15px, lg 26px, xl 40px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Page margin:** 40px on each side of full-width sections.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(13, 79, 62, 0.55) 0px 10px 24px -10px`
- `rgba(11, 42, 34, 0.45) 0px 10px 22px -12px`
- `rgba(11, 42, 34, 0.06) 0px 1px 2px 0px, rgba(11, 42, 34, 0.25) 0px 10px 24px -12px`

Hairline rings and inset highlights also appear: `rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset`.

## Shapes

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

- **xl (100px):** 68 elements.
- **sm (9px):** 16 elements.
- **md (22px):** 4 elements.
- **lg (36px):** 4 elements.

## Components

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

- **button-primary (“Explore VAYNEX Explore VAYNEX”):** #FFFFFF1F fill, #FFFFFF text, 12px/400, 100px radius, padding 15px 26px, shadow `rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset`.
- **button-secondary (“Start for Free Start for Free”):** #FFFFFF fill, #0B2A22 text, 12px/400, 100px radius, padding 15px 26px, shadow `rgba(11, 42, 34, 0.06) 0px 1px 2px 0px, rgba(11, 42, 34, 0.25) 0px 10px 24px -12px`.
- **button-tertiary (“Get Started Get Started”):** transparent fill, #FFFFFF text, 12px/400, 100px radius, padding 15px 26px, shadow `rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(13, 79, 62, 0.55) 0px 10px 24px -10px`.
- **button-ghost (“Subscribe”):** transparent fill, #000000 text, 12px/400, 100px radius, padding 17px 24px, shadow `rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(13, 79, 62, 0.55) 0px 10px 24px -10px`.
- **input-field (“Enter your email”):** transparent fill, #0B2A22 text, 15px/400, padding 0px.
- **link:** transparent fill, #5F706A text, padding 0px.

## Do's and Don'ts

- Do use #06080C for the page.
- Do keep text in 3 levels: #FFFFFF, #BABABB, #5F706A.
- Do use #134A3C as the brand accent: header, logo and key highlights.
- Do set headlines in General Sans with tight tracking (-0.04em).
- Do reuse the measured spacing steps (15px, 26px).
- Do use 100px corners on most elements; larger surfaces also use 9px, 22px and 36px.
- Don't use #5F706A for body text; it reaches 3.83:1 on #06080C. Keep it for large text or metadata.
- Don't introduce new font families beyond General Sans, Inter and Geist Mono.
- Don't use #134A3C for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s.

- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`.

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

```