Sanjay Raval | Voice of Transformation

Design Specification — Sanjay Raval | Voice of Transformation

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#6B1C23). Display headings use a distinct face (var(--font-serif)) over the body stack (var(--font-body)). Detected font weights: 100, 200, 300, 400, 500, 600, 700. Shapes are dominated by pill radii (9999px) — the page otherwise favors sharp, unrounded edges. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora.

Logo asset(s): https://sanjaysraval.com/assets/img/logo-white.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• radial-gradient(ellipse at center, transparent 0%, 70%)
• `radial-gradient(circle at 20% 30%, rgba(201, 162, 39, 0.03) 0%, transparent 40%),

radial-gradient(circle at 80% 70%, rgba(107, 28, 35, 0.05) 0%, transparent 40%)`

• `linear-gradient(90deg, rgba(3, 3, 2, 0.82) 0%, rgba(3, 3, 2, 0.38) 34%, rgba(3, 3, 2, 0.08) 58%, rgba(3, 3, 2, 0.44) 100%),

linear-gradient(180deg, rgba(3, 3, 2, 0.72) 0%, rgba(3, 3, 2, 0.08) 34%, rgba(3, 3, 2, 0.86) 100%)`

• `linear-gradient(180deg, rgba(3, 3, 2, 0.5) 0%, rgba(3, 3, 2, 0.14) 32%, rgba(3, 3, 2, 0.9) 100%),

linear-gradient(90deg, rgba(3, 3, 2, 0.58) 0%, rgba(3, 3, 2, 0.08) 62%, rgba(3, 3, 2, 0.32) 100%)`

• `radial-gradient(circle at 18% 20%, rgba(201, 162, 39, 0.16), transparent 30%),

radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.08), transparent 32%),

linear-gradient(180deg, rgba(3, 3, 3, 0.88), rgba(3, 3, 3, 0.62) 46%, rgba(3, 3, 3, 0.92))`

• linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.35), transparent)
• `linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.82)),

linear-gradient(135deg, rgba(201, 162, 39, 0.2), transparent 52%)`

• radial-gradient(ellipse at center, rgba(201, 162, 39, 0.03), transparent 60%)
• linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.06) 100%)
• `radial-gradient(ellipse at center, transparent 20%, rgba(10,9,8,0.85) 85%),

linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.2) 40%, rgba(10,9,8,0.9) 100%)`

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-body) — stack: var(--font-body)

Display / heading typeface: var(--font-serif) (used for large headings; body uses the primary stack)

Font stacks (most used first)

• var(--font-body)
• 'Cormorant Garamond'
• var(--font-display)
• var(--font-serif)
• 'Outfit'
• 'Bebas Neue'

Web font sources

• fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Bebas+Neue&family=Outfit:wght@100;200;300;400;500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(201, 162, 39, 0.16)
• 0 24px 80px rgba(0, 0, 0, 0.28)
• 0 34px 100px rgba(0, 0, 0, 0.52)
• 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,162,39,0.12)
• 0 0 16px rgba(201, 162, 39, 0.55)
• 0 0 24px rgba(201, 162, 39, 0.85)
• 0 28px 80px rgba(0, 0, 0, 0.38)
• 0 30px 70px rgba(0, 0, 0, 0.55)

Layout

Container max-width: 900px

Grid columns (largest detected grid): 5

Breakpoints

• 560px
• 760px
• 768px
• 900px
• 992px
• 1180px
• 1200px

Animation & Motion

Transitions

• all 0.5s
• transform 0.4s
• all 0.3s
• all 0.4s
• `color 0.3s ,

gap 0.3s`

• `transform 0.7s ,

border-color 0.7s ,

box-shadow 0.7s`

• opacity 0.7s
• `opacity 0.8s ,

filter 0.8s ,

transform 1.2s`

• `color 0.5s ,

transform 0.7s`

• `transform 0.55s ,

opacity 0.55s`

• none
• opacity 0.8s

Keyframes

@keyframes fadeIn { to { opacity: 1; } }
@keyframes loadBar { to { width: 100%; } }
@keyframes loaderRing { to { transform: rotate(360deg); } }
@keyframes spriteBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes spriteFrame { 0%, 10% { background-position: 0% 0%; } 11%, 21% { background-position: 50% 0%; } 22%, 32% { background-position: 100% 0%; } 33%, 43% { background-position: 0% 50%; } 44%, 54% { background-position: 50% 50%; } 55%, 65% { background-position: 100% 50%; } 66%, 76% { background-position: 0% 100%; } 77%, 87% { background-position: 50% 100%; } 88%, 100% { background-position: 100% 100%; } }
@keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.6); opacity: 0.5; } }
@keyframes playPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0; } }
@keyframes journeyLoad { 0% { left: -50%; } 100% { left: 100%; } }

Animations

• fadeIn 0.9s ease 0.1s forwards
• loaderRing 2.4s linear infinite
• spriteFrame 1.8s steps(1, end) infinite, spriteBreathe 2.8s ease-in-out infinite
• fadeIn 1s ease forwards
• loadBar 2s ease forwards
• none
• scrollPulse 2s ease-in-out infinite

CTA labels found on page

• Watch Latest Talk
• Enter the Journey
• Visit the full store on RazorPay →
• [email protected]

Effects

• backdrop-filter: blur(20px)
• backdrop-filter: blur(18px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: var(--color-bg-deep);
  --body-color: var(--color-cream);
}

Do's and Don'ts

Do

• Do reserve the accent #6B1C23 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--font-serif), and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't round cards or containers; only pill-shaped elements (9999px) carry a radius on this page.

Design Tokens (copy-paste)

:root {
  --color-primary: #C9A227;
  --color-accent: #6B1C23;
  --color-background: #FFFFFF;
  --color-surface: #F5F1E8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #EBE7DE;
  --color-border: #699196;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: var(--font-body);
  --font-size-display: 64px;
  --font-size-headline-lg: 32px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 22.4px;
  --font-size-body-lg: 17.6px;
  --font-size-body-md: 16.8px;
  --font-size-label-md: 14.4px;
  --font-size-label-sm: 12.8px;
  --radius-pill: 50%;
  --shadow-sm: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(201, 162, 39, 0.16);
  --shadow-md: 0 0 16px rgba(201, 162, 39, 0.55);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --font-display: var(--font-serif);
  --tracking-label: 0.5em;
  --container-max: 900px;
}