Velorn design system

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