DESIGN.md · Analysis

Razorpay

dashboard.razorpay.com · 12 Sept 2026 · 47 colors · Inter

Razorpay

Razorpay is a fintech platform trusted by 8M+ businesses worldwide, enabling fast, reliable online payments with seamless integrations and 24/7 support. The design system reflects a professional, accessible, and conversion-focused aesthetic.

Colors

surface#ffffff

surface-dim#f8f9fa

surface-bright#ffffff

surface-container-lowest#f0f2f5

surface-container-low#e9ecef

surface-container#e8eaed

surface-container-high#d0d0d0

surface-container-highest#c1c1c1

on-surface#202124

on-surface-variant#5f6368

inverse-surface#202124

inverse-on-surface#e8eaed

outline#c4c7c5

outline-variant#dadce0

surface-tint#1a73e8

primary#2e5bff

on-primary#ffffff

primary-container#4285f4

on-primary-container#ffffff

inverse-primary#4285f4

secondary#1a73e8

on-secondary#ffffff

secondary-container#e8f0fe

on-secondary-container#1a73e8

tertiary#6c757d

on-tertiary#ffffff

tertiary-container#e9ecef

on-tertiary-container#202124

error#d32f2f

on-error#ffffff

error-container#ffebee

on-error-container#c62828

primary-fixed#4285f4

primary-fixed-dim#1a73e8

on-primary-fixed#ffffff

on-primary-fixed-variant#ffffff

secondary-fixed#e8f0fe

secondary-fixed-dim#c5d9f1

on-secondary-fixed#1a73e8

on-secondary-fixed-variant#1a73e8

tertiary-fixed#e9ecef

tertiary-fixed-dim#d0d0d0

on-tertiary-fixed#202124

on-tertiary-fixed-variant#5f6368

background#ffffff

on-background#202124

surface-variant#e8eaed

Typography

display: fontFamily: Inter · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Inter · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Inter · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.02em
body-md: fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Inter · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Inter · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.05em

Design guidance

Overview

Razorpay is a fintech platform designed for businesses seeking fast, reliable payment processing with seamless integrations and enterprise-grade support. The design system embodies 'Professional Clarity'—a modern, accessible aesthetic that prioritizes conversion and user confidence through clean typography, purposeful color hierarchy, and predictable interaction patterns. The UI communicates trust through consistent spacing (8px grid), precise shadows (0 4px 12px rgba(0,0,0,0.08) on elevated surfaces), and a dominant blue accent (#2e5bff) that signals action and security. The brand voice is direct, reassuring, and jargon-light: 'Get started with your email or phone number' rather than 'Initiate account provisioning.' Every interaction—from form submission to error recovery—feels intentional and supportive, never punitive.

Colors

The color system is anchored by a vibrant primary blue (#2e5bff) used exclusively for call-to-action buttons, links, and focus states. This accent sits atop a neutral, light-mode foundation: surfaces are pure white (#ffffff), text is near-black (#202124), and supporting elements use a carefully calibrated gray scale (#5f6368 for secondary text, #c4c7c5 for borders, #e8eaed for container backgrounds). Secondary blue (#1a73e8) provides depth for hover states and secondary actions. The error state is a clear, accessible red (#d32f2f) with a light container (#ffebee) for validation messaging. All interactive elements use the primary blue; disabled states drop to #6c757d (tertiary gray) with reduced opacity. Shadows employ black at 6–12% opacity (rgba(0,0,0,0.06) for subtle elevation, rgba(0,0,

Typography

The type system uses Inter across all scales, chosen for its exceptional legibility at small sizes (12px labels) and its modern, neutral personality. Display (60px, 700 weight, -0.04em tracking) anchors hero messaging; headline-lg (40px, 600 weight, -0.02em) frames section titles; body-md (16px, 400 weight) carries form labels and body copy. The weight hierarchy is strict: 700 for display, 600 for headlines and button labels, 400 for body and input text. Line-height is generous (1.5× for body, 1.33× for headlines) to support readability on both desktop and mobile. On small labels over busy backgrounds (e.g., badge text on colored containers), apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) to ensure 4.5:1 contrast. Letter-spacing is negative on large scales (-0.04em at 60px) to tighten visual

Layout

The page uses a 12-column grid with a max-width of 1280px, centering content on desktop and flowing edge-to-edge on mobile (16px gutter on each side). Section separation uses lg spacing (40px) between major blocks; internal card padding uses md spacing (24px). The hero occupies full viewport height with a background image and overlay, transitioning to a white modal card (border-radius: 12px, box-shadow: 0 16px 40px rgba(0,0,0,0.12)) positioned right-center. Form fields stack vertically with sm spacing (12px) between label and input, and md spacing (24px) between field groups. The 'Continue with Google' button mirrors the primary button's height (48px) but uses a white background with a 1px border (#dadce0) and left-aligned Google icon. All interactive elements maintain a minimum 44px touch

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle background color shifts. Level 1 (Base): white surface (#ffffff) with no shadow, used for input fields and standard cards. Level 2 (Elevated): 0 4px 12px rgba(0,0,0,0.08) with background #f8f9fa, applied to hover states and secondary cards. Level 3 (Modal): 0 16px 40px rgba(0,0,0,0.12) with a 1px border (#dadce0), used for the login modal and full-screen overlays. The modal overlay itself uses a semi-transparent black (rgba(0,0,0,0.5)) with a 4px blur backdrop-filter to soften the background without obscuring it entirely. Buttons

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are present but restrained, signaling friendliness without sacrificing professional credibility. Buttons and primary inputs use 8px border-radius (lg), creating a soft-edged, modern appearance while remaining distinctly rectangular. Secondary elements (badges, small buttons, checkboxes) use 4px (sm) for a tighter, more technical feel. The modal card uses 12px (xl) to emphasize its elevated, contained nature. Dividers and subtle separators have no radius (0px). The Google sign-in button mirrors the primary button's 8px radius to m

Components

Action Elements Buttons are the primary driver of conversion. The primary button (button-primary) uses #2e5bff background, white text, 48px height, 12px horizontal padding, and 8px border-radius. On hover, the background shifts to #1a73e8 and gains a 0 4px 12px rgba(26,115,232,0.3) shadow with a 0.2s ease-in-out transition. On active/press, the background darkens to #1557b0 and shadow reduces to 0 2px 4px. The secondary button (button-secondary) inverts this: white background with a 1px #dadce0 border, dark text, and a subtle 0 1px 2px rgba(0,0,0,0.06) shadow. On hover, the background lifts to #e9ecef and border becomes #c4c7c5. The ghost button removes the border and background entirely, showing only text in primary blue; on hover, a light background (#e9ecef) appears. All buttons use

---
version: alpha
name: Razorpay
description: >-
  Razorpay is a fintech platform trusted by 8M+ businesses worldwide, enabling fast, reliable online payments with
  seamless integrations and 24/7 support. The design system reflects a professional, accessible, and conversion-focused
  aesthetic.
logo:
  src: https://razorpay.com/favicon.png
colors:
  surface: '#ffffff'
  surface-dim: '#f8f9fa'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f0f2f5'
  surface-container-low: '#e9ecef'
  surface-container: '#e8eaed'
  surface-container-high: '#d0d0d0'
  surface-container-highest: '#c1c1c1'
  on-surface: '#202124'
  on-surface-variant: '#5f6368'
  inverse-surface: '#202124'
  inverse-on-surface: '#e8eaed'
  outline: '#c4c7c5'
  outline-variant: '#dadce0'
  surface-tint: '#1a73e8'
  primary: '#2e5bff'
  on-primary: '#ffffff'
  primary-container: '#4285f4'
  on-primary-container: '#ffffff'
  inverse-primary: '#4285f4'
  secondary: '#1a73e8'
  on-secondary: '#ffffff'
  secondary-container: '#e8f0fe'
  on-secondary-container: '#1a73e8'
  tertiary: '#6c757d'
  on-tertiary: '#ffffff'
  tertiary-container: '#e9ecef'
  on-tertiary-container: '#202124'
  error: '#d32f2f'
  on-error: '#ffffff'
  error-container: '#ffebee'
  on-error-container: '#c62828'
  primary-fixed: '#4285f4'
  primary-fixed-dim: '#1a73e8'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#ffffff'
  secondary-fixed: '#e8f0fe'
  secondary-fixed-dim: '#c5d9f1'
  on-secondary-fixed: '#1a73e8'
  on-secondary-fixed-variant: '#1a73e8'
  tertiary-fixed: '#e9ecef'
  tertiary-fixed-dim: '#d0d0d0'
  on-tertiary-fixed: '#202124'
  on-tertiary-fixed-variant: '#5f6368'
  background: '#ffffff'
  on-background: '#202124'
  surface-variant: '#e8eaed'
typography:
  display:
    fontFamily: Inter
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.02em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 4px 12px rgba(0, 0, 0, 0.08)
  lg: 0 16px 40px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: none
    boxShadow: 0 2px 8px rgba(46, 91, 255, 0.2)
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    boxShadow: 0 4px 12px rgba(26, 115, 232, 0.3)
    transition: all 0.2s ease-in-out
  button-primary-active:
    backgroundColor: '#1557b0'
    boxShadow: 0 2px 4px rgba(26, 115, 232, 0.4)
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: 1px solid {colors.outline-variant}
    boxShadow: 0 1px 2px rgba(0, 0, 0, 0.06)
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-low}'
    borderColor: '{colors.outline}'
    transition: all 0.2s ease-in-out
  button-ghost:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: none
  button-ghost-hover:
    backgroundColor: '{colors.surface-container-low}'
    transition: background-color 0.2s ease-in-out
  input-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
    height: 48px
    boxShadow: 0 1px 2px rgba(0, 0, 0, 0.06)
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(46, 91, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
    outline: none
  input-field-error:
    borderColor: '{colors.error}'
    boxShadow: 0 0 0 3px rgba(211, 47, 47, 0.1)
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.xl}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container-lowest}'
    boxShadow: '{elevation.md}'
    transition: all 0.2s ease-in-out
  modal-overlay:
    backgroundColor: rgba(0, 0, 0, 0.5)
    backdropFilter: blur(4px)
  modal-card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.xl}'
    padding: '{spacing.lg}'
    boxShadow: '{elevation.lg}'
    border: 1px solid {colors.outline-variant}
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.secondary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  badge-error:
    backgroundColor: '{colors.error-container}'
    textColor: '{colors.error}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    border: none
  list-item-hover:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.primary}'
    transition: background-color 0.15s ease-in-out
  divider:
    backgroundColor: '{colors.outline-variant}'
    height: 1px
    margin: '{spacing.md} 0'
  checkbox:
    width: 20px
    height: 20px
    rounded: '{rounded.sm}'
    border: 2px solid {colors.outline}
    backgroundColor: '{colors.surface}'
  checkbox-checked:
    backgroundColor: '{colors.primary}'
    borderColor: '{colors.primary}'
  radio:
    width: 20px
    height: 20px
    rounded: '{rounded.full}'
    border: 2px solid {colors.outline}
    backgroundColor: '{colors.surface}'
  radio-checked:
    borderColor: '{colors.primary}'
    boxShadow: inset 0 0 0 4px {colors.primary}
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary driver of conversion. The primary button (button-primary) uses #2e5bff background, white text, 48px height, 12px horizontal padding, and 8px border-radius. On hover, the background shifts to #1a73e8 and gains a 0 4px 12px rgba(26,115,232,0.3) shadow with a 0.2s ease-in-out transition. On active/press, the background darkens to #1557b0 and shadow reduces to 0 2px 4px. The secondary button (button-secondary) inverts this: white background with a 1px #dadce0 border, dark text, and a subtle 0 1px 2px rgba(0,0,0,0.06) shadow. On hover, the background lifts to #e9ecef and border becomes #c4c7c5. The ghost button removes the border and background entirely, showing only text in primary blue; on hover, a light background (#e9ecef) appears. All buttons use

Edit, then copy or download.