Razorpay design system

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