# Vercel design system

> Vercel design system measured from rajaslightandsound.vercel.app: Georgia font, #A52220 primary, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/rajaslightandsound.vercel.app/

Vercel’s website (rajaslightandsound.vercel.app) uses the Georgia font and #A52220 as its main color on a #F2ECDF background. Measured by Sitepeel on November 7, 2026.

## What font does Vercel use?

Vercel uses Georgia (weights 400, 700 and 900) and Manrope (weight 400) on rajaslightandsound.vercel.app. Page titles are 60.5px at weight 900 (38px on phones) and body text is 16px. Measured on November 7, 2026.

- Georgia (weights 400, 700, 900)
- Manrope (weights 400)

## Vercel colors: palette and hex codes

Vercel’s main colors are #F2ECDF (pale amber) for the background, #22231F (charcoal) for text and #A52220 (red) as the main accent. Measured on November 7, 2026.

- #F2ECDF: pale amber
- #22231F: charcoal
- #5C5C51: warm slate
- #B8B1A1: amber
- #A52220: red

## What is Vercel built with?

Vercel’s website (rajaslightandsound.vercel.app) is built with Next.js, React and Vercel. Measured on November 7, 2026.

- JavaScript framework: Next.js 16.4.5, React 19.3.0-canary-278794d7-2
- Hosting & CDN: Vercel

## Questions and answers

### What font does Vercel use?

Vercel’s website uses Georgia (weights 400, 700 and 900) and Manrope (weight 400). Page titles are 60.5px at weight 900 (38px on phones) and body text is 16px. Measured on November 7, 2026.

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

On rajaslightandsound.vercel.app: #F2ECDF (pale amber) for the background, #22231F (charcoal) for text and #A52220 (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 Vercel design system?

The design system on this page is rajaslightandsound.vercel.app’s, as measured on November 7, 2026: Georgia type, #A52220 as the main color and 3px corners, written down as a DESIGN.md. It is not Vercel’s own documentation.

### What is Vercel built with?

Vercel’s website (rajaslightandsound.vercel.app) is built with Next.js, React and Vercel. Measured on November 7, 2026.

### What is the Vercel DESIGN.md?

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

No. Sitepeel measured it from rajaslightandsound.vercel.app’s public page on November 7, 2026. It is an independent analysis, not made or approved by Vercel.

### Can I use Vercel’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 Vercel’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/rajaslightandsound.vercel.app/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 Vercel.

## The DESIGN.md file

```markdown
---
version: alpha
name: Vercel
description: "Light interface measured from rajaslightandsound.vercel.app: Georgia type with Manrope, red accents, flat surfaces and 3px corners."
colors:
  background: "#F2ECDF"
  surface: "#F2ECDF"
  on-surface: "#22231F"
  on-background: "#22231F"
  on-surface-variant: "#5C5C51"
  overlay: "#F2ECDFCC"
  outline: "#B8B1A1"
  primary: "#A52220"
  on-primary: "#22231F"
typography:
  headline-display:
    fontFamily: Georgia
    fontSize: 60.5px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Georgia
    fontSize: 56px
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Georgia
    fontSize: 50.5px
    fontWeight: 700
    lineHeight: 1.03
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Georgia
    fontSize: 49px
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: -0.05em
  body-md:
    fontFamily: Georgia
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Georgia
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.75
  body-sm:
    fontFamily: Georgia
    fontSize: 15px
    fontWeight: 400
  caption:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.75
  label-md:
    fontFamily: Georgia
    fontSize: 15px
    fontWeight: 700
  label-sm:
    fontFamily: Georgia
    fontSize: 14px
    fontWeight: 400
  headline-display-mobile:
    fontFamily: Georgia
    fontSize: 38px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.04em
  headline-lg-mobile:
    fontFamily: Georgia
    fontSize: 40px
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: -0.05em
  headline-md-mobile:
    fontFamily: Georgia
    fontSize: 37px
    fontWeight: 700
    lineHeight: 1.03
    letterSpacing: -0.03em
rounded:
  md: 3px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 44px
  gutter: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: 0px
    padding: 16px 0px
    height: 49px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 0px 24px
    height: 52px
  button-ghost:
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: 0px
    padding: 0px 1px
---

# Vercel Design System

## Overview

Vercel describes itself as: “Rajas Light & Sounds, Veloor, Kottayam. Sound systems, stage lighting, illumination and generators. Call 9447151585.” The interface is light, built on **Pale Amber (#F2ECDF)** with **Charcoal (#22231F)** text, and **Red (#A52220)** as the main accent.

Type is set in **Georgia** and **Manrope**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 3px.

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

## Colors

The palette has 7 roles.

- **Pale Amber (#F2ECDF):** Page background, seen 2 times. Token `background`, CSS `--paper`.
- **Charcoal (#22231F):** Primary text and headings, seen 30 times. Token `on-surface`, CSS `--ink`.
- **Warm Slate (#5C5C51):** Secondary text, seen 9 times. Token `on-surface-variant`, CSS `--muted`.
- **Pale Amber 80% (#F2ECDFCC):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Amber (#B8B1A1):** Borders and dividers, seen 2 times. Token `outline`.
- **Red (#A52220):** Primary buttons and calls to action, seen 32 times. Token `primary`, CSS `--red`.
- **Charcoal (#22231F):** Text and icons on primary. Token `on-primary`.

## Typography

**Georgia** and **Manrope** share the interface. Fallback stack: `Georgia, serif`. Other loaded fonts: Malayalam, League Spartan.

- **headline-display:** Georgia 60.5px at weight 900, line height 1.05, tracking -0.04em (38px on mobile). Page title (h1).
- **headline-lg:** Georgia 56px at weight 700, line height 0.94, tracking -0.05em (40px on mobile). Section headings (h2).
- **headline-md:** Georgia 50.5px at weight 700, line height 1.03, tracking -0.03em (37px on mobile). Sub-section headings.
- **headline-sm:** Georgia 49px at weight 700, line height 0.94, tracking -0.05em. Card and feature titles.
- **body-md:** Georgia 16px at weight 400. Body text.
- **body-lg:** Georgia 17px at weight 400, line height 1.75. Lead paragraphs.
- **body-sm:** Georgia 15px at weight 400. Secondary and small text.
- **caption:** Manrope 14px at weight 400, line height 1.75. Captions and fine print.
- **label-md:** Georgia 15px at weight 700. Buttons, navigation and labels.
- **label-sm:** Georgia 14px at weight 400. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 44px.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Breakpoints:** 360px, 700px, 701px, 760px, 761px, 1000px, 1050px, 1100px, 1150px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #B8B1A1 borders.

## Shapes

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

- **md (3px):** 4 elements.

## Components

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

- **button-primary (“Services”):** #A52220 fill, #22231F text, 15px/400, padding 16px 0px.
- **button-secondary (“Call”):** #A52220 fill, #F2ECDF text, 18px/700, 3px radius, padding 0px 24px.
- **button-ghost (“Sound Systems”):** transparent fill, #A52220 text, 14px/400, padding 0px 1px.

## Do's and Don'ts

- Do use #F2ECDF for the page.
- Do keep text in 2 levels: #22231F, #5C5C51.
- Do reserve #A52220 for primary actions and key highlights.
- Do set headlines in Georgia with tight tracking (-0.04em).
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do use 3px corners on most elements.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Georgia and Manrope.
- Don't use #A52220 for large backgrounds or body text.
- Don't make interface transitions slower than 0.26s.

## Motion

Interface transitions are quick: 0.1s, 0.18s, 0.2s, 0.26s. Longer ambient animations run 1.3s, 1s, 0.8s.

- **Easing:** `ease-out`, `cubic-bezier(0.77, 0, 0.175, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```