# Velorn design system

> Velorn design system measured from velorn.framer.website: Inter font, #FC201F primary on #000000, 7 color hex codes, type scale, spacing and a free DESIGN.md.

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

Velorn’s website (velorn.framer.website) uses the Inter font and #FC201F as its main color on a black background. Measured by Sitepeel on November 7, 2026.

## What font does Velorn use?

Velorn uses Inter (weights 400 and 500), with IBM Plex Mono for code on velorn.framer.website. Page titles are 132px at weight 400 (58px on phones) and body text is 16px. Measured on November 7, 2026.

- Inter (weights 400, 500)
- sans-serif (weights 400)
- IBM Plex Mono (weights 400)

## Velorn colors: palette and hex codes

Velorn’s main colors are #000000 (near black) for the background, #FEFEFE (white) for text and #FC201F (vivid red) as the main accent. Measured on November 7, 2026.

- #000000: near black
- #FEFEFE: white
- #E3E3E3: mist
- #0D0D0D: charcoal
- #FC201F: vivid red

## What is Velorn built with?

Velorn’s website (velorn.framer.website) is built with Framer, React, Lenis, Motion and Google Fonts. Measured on November 7, 2026.

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

## Questions and answers

### What font does Velorn use?

Velorn’s website uses Inter (weights 400 and 500), with IBM Plex Mono for code. Page titles are 132px at weight 400 (58px on phones) and body text is 16px. Measured on November 7, 2026.

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

On velorn.framer.website: #000000 (near black) for the background, #FEFEFE (white) for text and #FC201F (vivid red) 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 Velorn design system?

The design system on this page is velorn.framer.website’s, as measured on November 7, 2026: Inter type, #FC201F as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Velorn’s own documentation.

### What is Velorn built with?

Velorn’s website (velorn.framer.website) is built with Framer, React, Lenis, Motion and Google Fonts. Measured on November 7, 2026.

### What is the Velorn DESIGN.md?

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

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

### Can I use Velorn’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 Velorn’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/velorn.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 Velorn.

## The DESIGN.md file

```markdown
---
version: alpha
name: Velorn
description: "Dark interface measured from velorn.framer.website: Inter type with sans-serif, vivid red accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#FEFEFE"
  on-background: "#FEFEFE"
  on-surface-variant: "#E3E3E3"
  surface-container-low: "#0D0D0D"
  outline: "#FFFFFF29"
  primary: "#FC201F"
  on-primary: "#000000"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 132px
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: -0.065em
  headline-lg:
    fontFamily: Inter
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.065em
  headline-md:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.045em
  headline-sm:
    fontFamily: Inter
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.045em
  title-lg:
    fontFamily: Inter
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.045em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.025em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.3
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  code:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 58px
    fontWeight: 400
    lineHeight: 0.98
    letterSpacing: -0.065em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.065em
rounded:
  sm: 14px
  md: 100px
  full: 9999px
spacing:
  xs: 3.5px
  sm: 6px
  md: 12px
  lg: 30px
  xl: 48px
  gutter: 30px
components:
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 17px
    height: 44px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 17px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 6px
---

# Velorn Design System

## Overview

Velorn describes itself as: “Independent design studio for distinctive brands, websites and digital products. Explore our work, meet the team and find the right scope for your next project.” The interface is dark, built on **Near Black (#000000)** with **White (#FEFEFE)** text, and **Vivid Red (#FC201F)** as the main accent.

Type is set in **Inter** and **sans-serif**, with **IBM Plex Mono** for code. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Controls are pill-shaped.

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

## Colors

The palette has 7 roles.

- **Near Black (#000000):** Page background, seen 2 times. Token `background`.
- **White (#FEFEFE):** Primary text and headings, seen 73 times. Token `on-surface`.
- **Mist (#E3E3E3):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Charcoal (#0D0D0D):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **White 16% (#FFFFFF29):** Borders and dividers, seen 27 times. Token `outline`.
- **Vivid Red (#FC201F):** Most used accent color, seen 18 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**Inter**, **sans-serif** and **IBM Plex Mono** (monospace) share the interface. Fallback stack: `Inter, Inter Placeholder, sans-serif`.

- **headline-display:** Inter 132px at weight 400, line height 0.98, tracking -0.065em (58px on mobile). Page title (h1).
- **headline-lg:** Inter 96px at weight 400, line height 1.05, tracking -0.065em (42px on mobile). Section headings (h2).
- **headline-md:** Inter 80px at weight 400, line height 1, tracking -0.045em. Sub-section headings.
- **headline-sm:** Inter 38px at weight 400, line height 1.02, tracking -0.045em. Card and feature titles.
- **title-lg:** Inter 23px at weight 400, line height 1.3, tracking -0.045em. Small titles.
- **body-md:** Inter 16px at weight 400, line height 1.5, tracking -0.025em. Body text.
- **body-lg:** Inter 18px at weight 500, line height 1.3. Lead paragraphs.
- **body-sm:** Inter 14px at weight 400, line height 1.5. Secondary and small text.
- **label-md:** sans-serif 12px at weight 400. Buttons, navigation and labels.
- **code:** IBM Plex Mono 12px at weight 400, line height 1.5. Code and technical values.

## Layout

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

- **Scale:** xs 3.5px, sm 6px, md 12px, lg 30px, xl 48px.
- **Gaps:** 30px is the most common gap in flex and grid layouts.
- **Breakpoints:** 480px, 809px, 809.98px, 810px, 1199px, 1199.98px, 1200px, 1439px.

## Elevation & Depth

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

## Shapes

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

- **full (9999px):** 16 elements.
- **sm (14px):** 4 elements.
- **md (100px):** 4 elements.

## Components

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

- **button-outline (“M M C C E E L L N N O O U U S S ”):** transparent fill, #FEFEFE text, 12px/400, 100px radius, padding 0px 17px, border 1px solid #FEFEFE.
- **button-ghost (“M M C C E E L L N N O O U U S S ”):** transparent fill, #FEFEFE text, 12px/400, 100px radius, padding 0px 17px, border 1px solid #FEFEFE.
- **card:** #0D0D0D fill, #E3E3E3 text, 12px/400, 14px radius, padding 6px.

## Do's and Don'ts

- Do use #000000 for the page and lift surfaces in small steps: #0D0D0D.
- Do keep text in 2 levels: #FEFEFE, #E3E3E3.
- Do reserve #FC201F for primary actions and key highlights.
- Do set headlines in Inter with tight tracking (-0.065em).
- Do reuse the measured spacing steps (6px, 12px, 30px).
- Do make buttons and chips fully rounded (9999px); most other elements use 14px corners.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Inter, sans-serif and IBM Plex Mono.
- Don't use #FC201F for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.5s, 0.45s, 0.3s, 0.25s.

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

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

```