# Razorpay design system

> Razorpay design system measured from razorpay.com: TASA Orbiter Display Regular font, 11 color hex codes, type scale and spacing. Light theme with 4px corners.

Canonical page: https://sitepeel.dev/design-md/razorpay.com/

Razorpay’s website (razorpay.com) uses the TASA Orbiter Display Regular font and #305EFF as its main color on a white background. Measured by Sitepeel on November 6, 2026.

## What font does Razorpay use?

Razorpay uses TASA Orbiter Display Regular (weight 400) and Inter Tight Regular (weight 400) on razorpay.com. Page titles are 64px at weight 400 (34px on phones) and body text is 16px. Measured on November 6, 2026.

- TASA Orbiter Display Regular (weights 400)
- Inter Tight Regular (weights 400)
- Inter (weights 400)
- Inter-SemiBold (weights 600)

## Razorpay colors: palette and hex codes

Razorpay’s main colors are #FFFFFF (white) for the background, #000000 (near black) for text and #305EFF (vivid blue) as the main accent, with #0D1A48 (deep blue) and #2950DA (blue) as other accents. Measured on November 6, 2026.

- #FFFFFF: white
- #000000: near black
- #192839: deep blue
- #40566D: dark blue
- #768EA7: blue
- #305EFF: vivid blue
- #0D1A48: deep blue
- #2950DA: blue

## What is Razorpay built with?

Razorpay’s website (razorpay.com) is built with Framer, React, Amazon CloudFront, Motion and Google Fonts. Measured on November 6, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Analytics: Meta Pixel 2.9.437, Segment 1.84.3, Google Ads, Sentry
- Hosting & CDN: Amazon CloudFront
- Animation & 3D: Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Razorpay use?

Razorpay’s website uses TASA Orbiter Display Regular (weight 400) and Inter Tight Regular (weight 400). Page titles are 64px at weight 400 (34px on phones) and body text is 16px. Measured on November 6, 2026.

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

On razorpay.com: #FFFFFF (white) for the background, #000000 (near black) for text and #305EFF (vivid blue) as the main accent, with #0D1A48 (deep blue) and #2950DA (blue) as other accents. The color palette above lists all 11 colors with their hex codes and where each one is used.

### What is the Razorpay design system?

The design system on this page is razorpay.com’s, as measured on November 6, 2026: TASA Orbiter Display Regular type, #305EFF as the main color and 4px corners, written down as a DESIGN.md. It is not Razorpay’s own documentation.

### What is Razorpay built with?

Razorpay’s website (razorpay.com) is built with Framer, React, Amazon CloudFront, Motion and Google Fonts. The full tech stack Sitepeel found: Framer, React, Meta Pixel, Segment, Amazon CloudFront, Google Ads, Sentry, Motion, Google Fonts and Google Analytics. Measured on November 6, 2026.

### What is the Razorpay DESIGN.md?

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

No. Sitepeel measured it from razorpay.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by Razorpay.

### Can I use Razorpay’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 Razorpay’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/razorpay.com/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 Razorpay.

## The DESIGN.md file

```markdown
---
version: alpha
name: Razorpay
description: "Light interface measured from razorpay.com: TASA Orbiter Display Regular type with Inter Tight Regular, vivid blue accents, flat surfaces and 4px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#192839"
  on-surface-muted: "#40566D"
  on-surface-subtle: "#768EA7"
  overlay: "#FFFFFFCC"
  outline: "#4345473D"
  primary: "#305EFF"
  on-primary: "#FFFFFF"
  secondary: "#0D1A48"
  tertiary: "#2950DA"
typography:
  headline-display:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.03
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.04em
  headline-sm:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.04em
  title-lg:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  body-md:
    fontFamily: Inter Tight Regular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
  body-lg:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
  body-sm:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
  label-lg:
    fontFamily: Inter-SemiBold
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  label-md:
    fontFamily: Inter Tight Medium
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.01em
  label-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  headline-display-mobile:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.04em
  headline-lg-mobile:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  headline-sm-mobile:
    fontFamily: TASA Orbiter Display Regular
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.04em
rounded:
  sm: 4px
  md: 12px
spacing:
  xs: 4px
  md: 10px
  lg: 20px
  xl: 60px
  gutter: 10px
  section: 120px
  margin: 80px
  container: 1280px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 0px
    height: 36px
  button-primary-hover:
    backgroundColor: "#2950DB"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4.86px 10.52px
    height: 29px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: 0px
    padding: 18px 0px
  link:
    textColor: "{colors.tertiary}"
---

# Razorpay Design System

## Overview

Razorpay describes itself as: “Accept online payments in the US with Razorpay using cards, ACH, digital wallets and more. Sell in India, settle in USD and scale with easy integrations.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Vivid Blue (#305EFF)** as the main accent.

Type is set in **TASA Orbiter Display Regular** and **Inter Tight Regular**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 4px.

Measured from [razorpay.com/us](https://razorpay.com/us/) (the site sent our reader to its /us version; razorpay.com was asked for) on November 6, 2026 at 1440×900 and 390×844 from 311 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 11 roles.

- **White (#FFFFFF):** Page background, seen 7 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 19 times. Token `on-surface`.
- **Deep Blue (#192839):** Secondary text, seen 21 times. Token `on-surface-variant`.
- **Dark Blue (#40566D):** Muted text and metadata, seen 16 times. Token `on-surface-muted`.
- **Blue (#768EA7):** Subtle text and placeholders, seen 5 times. Token `on-surface-subtle`.
- **White 80% (#FFFFFFCC):** Translucent fill for cards and controls, seen 6 times. Token `overlay`.
- **Graphite 24% (#4345473D):** Borders and dividers, seen 6 times. Token `outline`.
- **Vivid Blue (#305EFF):** Primary buttons and calls to action, seen 6 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Blue (#0D1A48):** Secondary buttons, seen 2 times. Token `secondary`.
- **Blue (#2950DA):** Accent in text, fills and borders, seen 17 times. Token `tertiary`.

## Typography

**TASA Orbiter Display Regular**, **Inter Tight Regular**, **Inter**, **Inter-SemiBold**, **Inter Tight Medium** and **sans-serif** share the interface. Fallback stack: `TASA Orbiter Display Regular, TASA Orbiter Display Regular Placeholder, sans-serif`. Other loaded fonts: Inter Tight, TASA Orbiter Display SemiBold.

- **headline-display:** TASA Orbiter Display Regular 64px at weight 400, line height 1.03, tracking -0.04em (34px on mobile). Page title (h1).
- **headline-lg:** TASA Orbiter Display Regular 56px at weight 400, line height 1, tracking -0.04em (34px on mobile). Section headings (h2).
- **headline-md:** TASA Orbiter Display Regular 32px at weight 400, line height 1.13, tracking -0.04em. Sub-section headings.
- **headline-sm:** TASA Orbiter Display Regular 24px at weight 400, line height 1.1, tracking -0.04em (22px on mobile). Card and feature titles.
- **title-lg:** TASA Orbiter Display Regular 20px at weight 400, line height 1.2, tracking -0.02em. Small titles.
- **body-md:** Inter Tight Regular 16px at weight 400, line height 1.25. Body text.
- **body-lg:** TASA Orbiter Display Regular 18px at weight 400, line height 1.33. Lead paragraphs.
- **body-sm:** Inter 10px at weight 400, line height 1.4. Secondary and small text.
- **label-lg:** Inter-SemiBold 16px at weight 600, line height 1.5. Large buttons and tabs.
- **label-md:** Inter Tight Medium 14px at weight 500, line height 1.43, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** sans-serif 12px at weight 400. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, md 10px, lg 20px, xl 60px.
- **Sections:** 120px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 80px on each side of full-width sections.
- **Breakpoints:** 767px, 768px, 799.98px, 800px, 1023px, 1199.98px, 1200px, 1439.98px.

## Elevation & Depth

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

## Shapes

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

- **sm (4px):** 32 elements.
- **md (12px):** 8 elements.

## Components

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

- **button-primary (“Sign Up”):** #305EFF fill, #FFFFFF text, 12px/400, 4px radius, padding 0px.
- **button-primary-hover:** background #2950DB, text #FFFFFF on hover.
- **button-secondary (“Get Started”):** #0D1A48 fill, #FFFFFF text, 12px/400, 4px radius, padding 4.86px 10.52px.
- **button-ghost (“Cards”):** transparent fill, #000000 text, 12px/400, padding 18px 0px.
- **link:** transparent fill, #2950DA text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 4 levels: #000000, #192839, #40566D, #768EA7.
- Do reserve #305EFF for primary actions and key highlights.
- Do set headlines in TASA Orbiter Display Regular with tight tracking (-0.04em).
- Do reuse the measured spacing steps (10px, 20px).
- Do use 4px corners on most elements; larger surfaces also use 12px.
- Don't use #768EA7 for body text; it reaches 3.39:1 on #FFFFFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond TASA Orbiter Display Regular, Inter Tight Regular, Inter, Inter-SemiBold, Inter Tight Medium and sans-serif.
- Don't use #305EFF for large backgrounds or body text.

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

```