# Shourya Parashar design system

> Shourya Parashar design system measured from shouryaparashar.in: Handjet font, #F7C948 primary, 14 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/shouryaparashar.in/

Shourya Parashar’s website (shouryaparashar.in) uses the Handjet font and #F7C948 as its main color on a #191510 background. Measured by Sitepeel on November 6, 2026.

## What font does Shourya Parashar use?

Shourya Parashar uses Handjet (weight 800), with DM Mono for code on shouryaparashar.in. Page titles are 144px at weight 800 (72px on phones) and body text is 16px. Measured on November 6, 2026.

- Handjet (weights 800)
- system-ui (weights 400, 600)
- DM Mono (weights 500)

## Shourya Parashar colors: palette and hex codes

Shourya Parashar’s main colors are #191510 (warm charcoal) for the background, #FFFFFF (white) for text and #F7C948 (amber) as the main accent, with #FF4D8D (pink) and #FF6A35 (vivid orange) as other accents. Measured on November 6, 2026.

- #191510: warm charcoal
- #FFFFFF: white
- #ECE3D1: pale orange
- #D9D0BE: light amber
- #A39A88: amber
- #F7C948: amber
- #000000: near black
- #FF4D8D: pink

## What is Shourya Parashar built with?

Shourya Parashar’s website (shouryaparashar.in) is built with Next.js, React, Tailwind CSS, Vercel and GSAP. Measured on November 6, 2026.

- JavaScript framework: Next.js 16.2.4, React 19.3.0-canary-3f0b9e61-2
- Hosting & CDN: Vercel
- Animation & 3D: GSAP 3.15.0
- Analytics: Vercel Web Analytics
- UI & CSS: Tailwind CSS 4.x

## Questions and answers

### What font does Shourya Parashar use?

Shourya Parashar’s website uses Handjet (weight 800), with DM Mono for code. Page titles are 144px at weight 800 (72px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the Shourya Parashar colors and hex codes?

On shouryaparashar.in: #191510 (warm charcoal) for the background, #FFFFFF (white) for text and #F7C948 (amber) as the main accent, with #FF4D8D (pink) and #FF6A35 (vivid orange) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Shourya Parashar design system?

The design system on this page is shouryaparashar.in’s, as measured on November 6, 2026: Handjet type, #F7C948 as the main color and 10px corners, written down as a DESIGN.md. It is not Shourya Parashar’s own documentation.

### What is Shourya Parashar built with?

Shourya Parashar’s website (shouryaparashar.in) is built with Next.js, React, Tailwind CSS, Vercel and GSAP. The full tech stack Sitepeel found: Next.js, Vercel, React, GSAP, Vercel Web Analytics and Tailwind CSS. Measured on November 6, 2026.

### What is the Shourya Parashar DESIGN.md?

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

No. Sitepeel measured it from shouryaparashar.in’s public page on November 6, 2026. It is an independent analysis, not made or approved by Shourya Parashar.

### Can I use Shourya Parashar’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 Shourya Parashar’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/shouryaparashar.in/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 Shourya Parashar.

## The DESIGN.md file

```markdown
---
version: alpha
name: Shourya Parashar
description: "Dark interface measured from shouryaparashar.in: Handjet type with system-ui, amber accents, flat surfaces and 10px corners."
colors:
  background: "#191510"
  surface: "#191510"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#ECE3D1"
  on-surface-muted: "#D9D0BE"
  on-surface-subtle: "#A39A88"
  overlay: "#ECE3D18C"
  overlay-strong: "#FFFFFF99"
  outline: "#19151024"
  outline-variant: "#FFFFFF1A"
  primary: "#F7C948"
  on-primary: "#000000"
  secondary: "#FF4D8D"
  tertiary: "#FF6A35"
  warning: "#F3E2AD"
typography:
  headline-display:
    fontFamily: Handjet
    fontSize: 144px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: 0.01em
  headline-lg:
    fontFamily: Handjet
    fontSize: 136px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: 0.01em
  headline-md:
    fontFamily: Handjet
    fontSize: 128px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: 0.01em
  headline-sm:
    fontFamily: system-ui
    fontSize: 60px
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -0.03em
  title-lg:
    fontFamily: system-ui
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  body-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: system-ui
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.63
  body-sm:
    fontFamily: system-ui
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.63
  caption:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: system-ui
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  code:
    fontFamily: DM Mono
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-display-mobile:
    fontFamily: Handjet
    fontSize: 72px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: 0.01em
  headline-md-mobile:
    fontFamily: Handjet
    fontSize: 64px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: 0.01em
  headline-sm-mobile:
    fontFamily: system-ui
    fontSize: 34px
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -0.03em
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 24px
  xl: 48px
  gutter: 8px
  section: 144px
components:
  button-primary:
    textColor: "#FDFDFB"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 0px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.on-surface-variant}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 11.2px 17.6px
    height: 42px
  button-outline:
    textColor: "#FDFDFB"
    rounded: 0px
    padding: 10px 16px
    height: 41px
  card:
    backgroundColor: "#2B57D6"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 48px
  link:
    textColor: "{colors.background}"
---

# Shourya Parashar Design System

## Overview

Shourya Parashar describes itself as: “Shourya Parashar is a full-stack developer and CS undergraduate at SRMIST, Chennai, building with TypeScript, Python, React, Next.js, Node.js and FastAPI.” The interface is dark, built on **Warm Charcoal (#191510)** with **White (#FFFFFF)** text, and **Amber (#F7C948)** as the main accent.

Type is set in **Handjet** and **system-ui**, with **DM Mono** for code. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 10px.

Measured from [shouryaparashar.in](https://shouryaparashar.in/) on November 6, 2026 at 1440×900 and 390×844 from 410 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 14 roles, plus gradient stops #F7C948B3, #A39A88.

- **Warm Charcoal (#191510):** Page background, seen 36 times. Token `background`, CSS `--sidebar-primary-foreground`.
- **White (#FFFFFF):** Primary text and headings, seen 31 times. Token `on-surface`, CSS `--accent-foreground`.
- **Pale Orange (#ECE3D1):** Secondary text, seen 4 times. Token `on-surface-variant`, CSS `--card-foreground`.
- **Light Amber (#D9D0BE):** Muted text and metadata, seen 2 times. Token `on-surface-muted`, CSS `--ink`.
- **Amber (#A39A88):** Subtle text and placeholders, seen 19 times. Token `on-surface-subtle`, CSS `--ink-muted`.
- **Pale Orange 55% (#ECE3D18C):** Translucent fill for cards and controls, seen 12 times. Token `overlay`.
- **White 60% (#FFFFFF99):** Stronger translucent fill, seen 3 times. Token `overlay-strong`.
- **Warm Charcoal 14% (#19151024):** Borders and dividers, seen 10 times. Token `outline`.
- **White 10% (#FFFFFF1A):** Secondary dividers, seen 2 times. Token `outline-variant`.
- **Amber (#F7C948):** Brand accent (CSS variable), seen 9 times. Token `primary`, CSS `--c-yellow`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Pink (#FF4D8D):** Accent in text, fills and borders, seen 5 times. Token `secondary`.
- **Vivid Orange (#FF6A35):** Accent, seen 21 times. Token `tertiary`.
- **Light Amber (#F3E2AD):** Warnings and highlights, seen 6 times. Token `warning`.

## Typography

**Handjet**, **system-ui** and **DM Mono** (monospace) share the interface. Fallback stack: `Handjet, Handjet Fallback, Arial Black, sans-serif`. Other loaded fonts: Google Sans, Just Me Again Down Here.

- **headline-display:** Handjet 144px at weight 800, line height 0.85, tracking 0.01em, uppercase (72px on mobile). Page title (h1).
- **headline-lg:** Handjet 136px at weight 800, line height 0.85, tracking 0.01em. Section headings (h2).
- **headline-md:** Handjet 128px at weight 800, line height 0.85, tracking 0.01em, uppercase (64px on mobile). Sub-section headings.
- **headline-sm:** system-ui 60px at weight 600, line height 0.95, tracking -0.03em (34px on mobile). Card and feature titles.
- **title-lg:** system-ui 26px at weight 600, line height 1.1, tracking -0.025em. Small titles.
- **body-md:** system-ui 16px at weight 400, line height 1.5. Body text.
- **body-lg:** system-ui 17px at weight 400, line height 1.63. Lead paragraphs.
- **body-sm:** system-ui 15px at weight 400, line height 1.63. Secondary and small text.
- **caption:** system-ui 14px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** system-ui 13px at weight 400, line height 1.5. Buttons, navigation and labels.
- **code:** DM Mono 10px at weight 500, line height 1.5, tracking 0.12em. Code and technical values.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 10px, lg 24px, xl 48px.
- **Sections:** 144px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 767px, 768px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.2) 0px 1.5px 1px 0px`
- `rgb(25, 21, 16) 0px 3px 0px 0px`
- `rgba(0, 0, 0, 0.25) 0px 2px 0px 0px, rgba(0, 0, 0, 0.25) 0px 10px 20px 0px`

## Shapes

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

- **lg (10px):** 42 elements.
- **xl (16px):** 24 elements.
- **full (9999px):** 16 elements.
- **sm (6px):** 14 elements.
- **md (8px):** 12 elements.

## Components

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

- **button-primary (“GitHub”):** transparent fill, #FDFDFB text, 16px/400, 8px radius, padding 0px.
- **button-secondary (“Email me”):** #ECE3D1 fill, #191510 text, 13px/500, 999px radius, padding 11.2px 17.6px.
- **button-outline (“LET'S TALK”):** transparent fill, #FDFDFB text, 11px/500, padding 10px 16px, border 2px solid #ECE3D1.
- **card:** #2B57D6 fill, #FFFFFF text, 16px/400, padding 48px.
- **link:** transparent fill, #191510 text, padding 0px.

## Do's and Don'ts

- Do use #191510 for the page.
- Do keep text in 4 levels: #FFFFFF, #ECE3D1, #D9D0BE, #A39A88.
- Do use #F7C948 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (8px, 10px, 24px).
- Do use 10px corners on most elements; larger surfaces also use 16px, 6px and 8px.
- Don't introduce new font families beyond Handjet, system-ui and DM Mono.
- Don't use #F7C948 for large backgrounds or body text.
- Don't make interface transitions slower than 0.45s.

## Motion

Interface transitions are quick: 0.15s, 0.22s, 0.2s, 0.14s. Longer ambient animations run 2.8s, 9s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.5, 0, 0.75, 0)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```