DESIGN.md · measured November 5, 2026

VAYNEX design system

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.

#06080C
#FFFFFF
#134A3C

Download DESIGN.md

From vaynex.framer.website ↗ · 349 elements at 1440×900 and 390×844 Independent analysis, not affiliated with VAYNEX

VAYNEX color palette

11 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Near Black#06080CbackgroundPage background

Deep Teal 3%#0E5C4808overlayTranslucent fill for cards and controls · 4×

White 70%#FFFFFFB3overlay-strongStronger translucent fill · 2×

Text

White#FFFFFFon-surfacePrimary text and headings · 15×

Silver#BABABBon-surface-variantSecondary text · 3×

Slate#5F706Aon-surface-mutedMuted text and metadata · 54×

White#FFFFFFon-primaryText and icons on primary

Accents

Deep Teal#134A3CprimaryBrand color in logos and imagery

Borders

Deep Teal#0B4436outlineBorders and dividers · 3×

Deep Teal 8%#0B2A2214outline-variantSecondary dividers · 3×

Status

Deep Teal#0E5C48successSuccess and positive states · 11×

Gradients

VAYNEX fonts and type scale

3 families.

AaGeneral SansWeights 500, 600General Sans, General Sans Placeholder, sans-serif

AaInterWeights 400, 500, 600Inter, Inter Placeholder, sans-serif

AaGeist MonoMonospace · Weights 500Geist Mono, Geist Mono Placeholder, monospace

headline-displayPage title (h1)VAYNEX68px · 600 · 1.02 · -0.04em
mobile 40px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog60px · 600 · 1 · -0.045em

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog52px · 600 · 1.06 · -0.035em
mobile 34px

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog32px · 600 · 1 · -0.035em

title-lgSmall titlesThe quick brown fox jumps over the lazy dog30px · 600 · 1.15 · -0.025em
mobile 24px

body-mdBody textThe quick brown fox jumps over the lazy dog20px · 500 · 1.25 · -0.015em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog15px · 400 · 1.6

captionCaptions and fine printThe quick brown fox jumps over the lazy dog13px · 400 · 1.5

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog15px · 500 · 1 · -0.01em

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 600 · 1.3 · -0.01em

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 500 · 1.35 · -0.005em

codeCode and technical valuesconst ready = true;12px · 500 · 1.2 · 0.08em

Contrast

Text on #06080C

AaAAA20.0:1

AaAAA10.3:1

AaLarge only3.8:1

Spacing

No strict grid · 10% are multiples of 4px

md15px

lg26px

xl40px

gutter10px

margin40px

Breakpoints: 809px 809.98px 810px 1199px 1199.98px

Shapes

Corner radii, most used first.

xl100px · 68×

sm9px · 16×

md22px · 4×

lg36px · 4×

Depth

Shadow

VAYNEX UI components

Rebuilt from the measured CSS.

Explore VAYNEX Explore VAYNE

button-primaryFilled button

Start for Free Start for Fre

button-secondaryFilled button

Get Started Get Started

button-tertiaryFilled button

button-ghostText button

Enter your email

input-fieldInput field

Inline link

linkInline link

Motion

Interface transitions

0.2s

cubic-bezier(0.44, 0, 0.56, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

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

VAYNEX DESIGN.md256 lines

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

Fonts

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.

AaGeneral Sans · 500, 600
AaInter · 400, 500, 600
AaGeist Mono · 500

Find every font on vaynex.framer.website with Font finder →

Colors

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

Get vaynex.framer.website’s palette as CSS or Tailwind with Colors →

Tech stack

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

Check vaynex.framer.website live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Hermes Agent hermes-agent.nousresearch.com · Rules Gothic Condensed

NASA nasa.gov · inter

Sitepeel sitepeel.dev · Inter

NeonBrand neon.tech · Inter

DenoBrand deno.com · Inter

NuxtBrand nuxt.com · Outfit

Another site? Make a DESIGN.md from any link.

FAQ

VAYNEX design system questions

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.