# ISKCON Gurugram design system

> ISKCON Gurugram design system measured from iskcongurugram.com: Marcellus font, #173A52 primary, 17 color hex codes, type scale, spacing and a free DESIGN.md.

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

ISKCON Gurugram’s website (iskcongurugram.com) uses the Marcellus font and #173A52 as its main color on a #FBF7EF background. Measured by Sitepeel on November 6, 2026.

## What font does ISKCON Gurugram use?

ISKCON Gurugram uses Marcellus (weight 400) and Arial (weight 400) on iskcongurugram.com. Page titles are 64px at weight 400 (32px on phones) and body text is 16px. Measured on November 6, 2026.

- Marcellus (weights 400)
- Arial (weights 400)
- Inter (weights 400, 600, 750)

## ISKCON Gurugram colors: palette and hex codes

ISKCON Gurugram’s main colors are #FBF7EF (warm snow) for the background, #233642 (deep blue) for text and #173A52 (deep blue) as the main accent, with #387FAA (blue) and #E8892B (vivid orange) as other accents. Measured on November 6, 2026.

- #FBF7EF: warm snow
- #233642: deep blue
- #000000: near black
- #173A52: deep blue
- #6A7783: blue
- #FFFFFF: white
- #F4EBD9: pale orange
- #387FAA: blue

## What is ISKCON Gurugram built with?

ISKCON Gurugram’s website (iskcongurugram.com) is built with Cloudflare and Google Fonts. Measured on November 6, 2026.

- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics
- Fonts & icons: Google Fonts

## Questions and answers

### What font does ISKCON Gurugram use?

ISKCON Gurugram’s website uses Marcellus (weight 400) and Arial (weight 400). Page titles are 64px at weight 400 (32px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the ISKCON Gurugram colors and hex codes?

On iskcongurugram.com: #FBF7EF (warm snow) for the background, #233642 (deep blue) for text and #173A52 (deep blue) as the main accent, with #387FAA (blue) and #E8892B (vivid orange) as other accents. The color palette above lists all 17 colors with their hex codes and where each one is used.

### What is the ISKCON Gurugram design system?

The design system on this page is iskcongurugram.com’s, as measured on November 6, 2026: Marcellus type, #173A52 as the main color and 100px corners, written down as a DESIGN.md. It is not ISKCON Gurugram’s own documentation.

### What is ISKCON Gurugram built with?

ISKCON Gurugram’s website (iskcongurugram.com) is built with Cloudflare and Google Fonts. The full tech stack Sitepeel found: Cloudflare, Cloudflare Web Analytics and Google Fonts. Measured on November 6, 2026.

### What is the ISKCON Gurugram DESIGN.md?

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

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

### Can I use ISKCON Gurugram’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 ISKCON Gurugram’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/iskcongurugram.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 ISKCON Gurugram.

## The DESIGN.md file

```markdown
---
version: alpha
name: ISKCON Gurugram
description: "Light interface measured from iskcongurugram.com: Marcellus type with Arial, deep blue accents, tonal surfaces and 100px corners."
colors:
  background: "#FBF7EF"
  surface: "#FBF7EF"
  on-surface: "#233642"
  on-background: "#233642"
  on-surface-strong: "#000000"
  on-surface-variant: "#173A52"
  on-surface-muted: "#6A7783"
  surface-container-low: "#FFFFFFEB"
  surface-container: "#FFFFFF"
  surface-container-high: "#F4EBD9"
  overlay: "#FFFFFF14"
  overlay-strong: "#FFFFFF29"
  outline: "#173A521F"
  outline-variant: "#C1A24A29"
  primary: "#173A52"
  on-primary: "#FFFFFF"
  secondary: "#387FAA"
  tertiary: "#E8892B"
  warning: "#F4A733"
typography:
  headline-display:
    fontFamily: Marcellus
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.003em
  headline-lg:
    fontFamily: Marcellus
    fontSize: 46.5px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.004em
  headline-md:
    fontFamily: Marcellus
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.007em
  headline-sm:
    fontFamily: Arial
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
  title-lg:
    fontFamily: Marcellus
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.01em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-lg:
    fontFamily: Marcellus
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.01em
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.6
  label-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 750
    lineHeight: 1.6
  headline-display-mobile:
    fontFamily: Marcellus
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.006em
  headline-lg-mobile:
    fontFamily: Marcellus
    fontSize: 30.5px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.007em
rounded:
  xs: 10px
  sm: 12px
  md: 14px
  lg: 16px
  xl: 100px
  full: 9999px
spacing:
  xs: 4px
  sm: 5px
  md: 14px
  lg: 24.32px
  xl: 40px
  gutter: 8.36px
  section: 76px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: 10px 26px
    height: 36px
  button-secondary:
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 12.92px 24.32px
    height: 52px
  button-outline:
    backgroundColor: "#FFFFFFB8"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.xl}"
    padding: 11px 19px
    height: 47px
  button-ghost:
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 12.92px 24.32px
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xs}"
    padding: 12px 14px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 18px
    padding: 0px
---

# ISKCON Gurugram Design System

## Overview

ISKCON Gurugram describes itself as: “ISKCON Gurugram (Sri Sri Radha Damodar Temple) — daily darshan & aarti timings, festivals, free Gita classes, kirtans, seva and community programs in Gurugram.” The interface is light, built on **Warm Snow (#FBF7EF)** with **Deep Blue (#233642)** text, and **Deep Blue (#173A52)** as the main accent.

Type is set in **Marcellus** and **Arial**. Headlines run large; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 100px.

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

## Colors

The palette has 17 roles, plus gradient stops #E8892B, #F4A733, #0B1E2BCC, #091824E6.

- **Warm Snow (#FBF7EF):** Page background, seen 3 times. Token `background`, CSS `--cream`.
- **Deep Blue (#233642):** Primary text and headings, seen 12 times. Token `on-surface`, CSS `--ink`.
- **Near Black (#000000):** Headings and emphasis, seen 3 times. Token `on-surface-strong`.
- **Deep Blue (#173A52):** Secondary text, seen 43 times. Token `on-surface-variant`, CSS `--brand-ink`.
- **Blue (#6A7783):** Muted text and metadata, seen 12 times. Token `on-surface-muted`, CSS `--muted`.
- **White 92% (#FFFFFFEB):** Raised areas one step from the page, seen 6 times. Token `surface-container-low`.
- **White (#FFFFFF):** Cards and panels, seen 32 times. Token `surface-container`.
- **Pale Orange (#F4EBD9):** Hover and pressed fills, seen 2 times. Token `surface-container-high`, CSS `--cream-2`.
- **White 8% (#FFFFFF14):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White 16% (#FFFFFF29):** Stronger translucent fill, seen 4 times. Token `overlay-strong`.
- **Deep Blue 12% (#173A521F):** Borders and dividers, seen 15 times. Token `outline`, CSS `--line`.
- **Amber 16% (#C1A24A29):** Secondary dividers, seen 9 times. Token `outline-variant`.
- **Deep Blue (#173A52):** Primary buttons and calls to action, seen 47 times. Token `primary`, CSS `--brand-ink`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Blue (#387FAA):** Accent on large areas, seen 28 times. Token `secondary`, CSS `--brand`.
- **Vivid Orange (#E8892B):** Accent in text, fills and borders, seen 13 times. Token `tertiary`, CSS `--saffron`.
- **Vivid Orange (#F4A733):** Warnings and highlights, seen 6 times. Token `warning`, CSS `--saffron-2`.

## Typography

**Marcellus**, **Arial** and **Inter** share the interface. Fallback stack: `Marcellus, serif`. Other loaded fonts: Tiro Devanagari Sanskrit.

- **headline-display:** Marcellus 64px at weight 400, line height 1.15, tracking 0.003em (32px on mobile). Page title (h1).
- **headline-lg:** Marcellus 46.5px at weight 400, line height 1.15, tracking 0.004em (30.5px on mobile). Section headings (h2).
- **headline-md:** Marcellus 27px at weight 400, line height 1.15, tracking 0.007em. Sub-section headings.
- **headline-sm:** Arial 24px at weight 400, line height 1. Card and feature titles.
- **title-lg:** Marcellus 21px at weight 400, line height 1.15, tracking 0.01em. Small titles.
- **body-md:** Inter 16px at weight 400, line height 1.6. Body text.
- **body-lg:** Marcellus 19px at weight 400, line height 1.15, tracking 0.01em. Lead paragraphs.
- **body-sm:** Inter 14px at weight 400, line height 1.6. Secondary and small text.
- **caption:** Inter 13px at weight 400, line height 1.6. Captions and fine print.
- **label-md:** Inter 15px at weight 600, line height 1.6. Buttons, navigation and labels.
- **label-sm:** Inter 14px at weight 750, line height 1.6. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 5px, md 14px, lg 24.32px, xl 40px.
- **Sections:** 76px vertical padding between major sections.
- **Gaps:** 8.36px is the most common gap in flex and grid layouts.
- **Breakpoints:** 520px, 560px, 600px, 680px, 900px, 980px, 1024px.

## Elevation & Depth

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

- `rgba(16, 43, 61, 0.26) 0px 8px 24px -12px`
- `rgba(232, 137, 43, 0.8) 0px 10px 24px -10px`
- `rgba(232, 137, 43, 0.9) 0px 6px 18px -6px`

Hairline rings and inset highlights also appear: `rgba(248, 113, 113, 0.18) 0px 0px 0px 4px`.

## Shapes

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

- **xl (100px):** 140 elements.
- **lg (16px):** 108 elements.
- **xs (10px):** 96 elements.
- **full (9999px):** 84 elements.
- **md (14px):** 20 elements.
- **sm (12px):** 16 elements.

## Components

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

- **button-primary (“One-time”):** #173A52 fill, #FFFFFF text, 14.4px/600, 100px radius, padding 10px 26px.
- **button-secondary (“Serve”):** transparent fill, #FFFFFF text, 15.2px/600, 100px radius, padding 12.92px 24.32px, shadow `rgba(232, 137, 43, 0.8) 0px 10px 24px -10px`.
- **button-outline (“Explore Pitru Paksha”):** #FFFFFFB8 fill, #173A52 text, 14.08px/750, 100px radius, padding 11px 19px, border 1px solid #173A5259.
- **button-ghost (“Serve”):** transparent fill, #FFFFFF text, 15.2px/600, 100px radius, padding 12.92px 24.32px, shadow `rgba(232, 137, 43, 0.8) 0px 10px 24px -10px`.
- **input-field (“Your name”):** #FFFFFF fill, #233642 text, 14.72px/400, 10px radius, padding 12px 14px, border 1px solid #173A521F.
- **card:** #FFFFFF fill, #233642 text, 16px/400, 18px radius, padding 0px, border 1px solid #C1A24A29, shadow `rgba(16, 43, 61, 0.26) 0px 8px 24px -12px`.

## Do's and Don'ts

- Do use #FBF7EF for the page and lift surfaces in small steps: #FFFFFFEB, #FFFFFF, #F4EBD9.
- Do keep text in 4 levels: #233642, #000000, #173A52, #6A7783.
- Do reserve #173A52 for primary actions and key highlights.
- Do reuse the measured spacing steps (5px, 14px, 24.32px).
- Do use 100px corners on most elements; larger surfaces also use 16px, 10px and 14px.
- Don't use #6A7783 for body text; it reaches 4.29:1 on #FBF7EF. Keep it for large text or metadata.
- Don't introduce new font families beyond Marcellus, Arial and Inter.
- Don't use #173A52 for large backgrounds or body text.
- Don't make interface transitions slower than 0.32s.

## Motion

Interface transitions are quick: 0.18s, 0.2s, 0.15s, 0.32s.

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

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

```