# Bhakti Nam Jap design system

> Bhakti Nam Jap design system measured from bhaktinamjap.com: Tiro Devanagari Hindi font, 17 color hex codes, type scale and spacing. Measured November 6, 2026.

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

Bhakti Nam Jap’s website (bhaktinamjap.com) uses the Tiro Devanagari Hindi font and #B0561D as its main color on a #FDF8F0 background. Measured by Sitepeel on November 6, 2026.

## What font does Bhakti Nam Jap use?

Bhakti Nam Jap uses Tiro Devanagari Hindi (weight 400) and Inter (weights 400, 500, 600 and 650) on bhaktinamjap.com. Page titles are 40px at weight 400 (28px on phones) and body text is 17px. Measured on November 6, 2026.

- Tiro Devanagari Hindi (weights 400)
- Inter (weights 400, 500, 600, 650, 700)
- Google Sans (weights 700)

## Bhakti Nam Jap colors: palette and hex codes

Bhakti Nam Jap’s main colors are #FDF8F0 (warm snow) for the background, #1F1A14 (warm charcoal) for text and #B0561D (orange) as the main accent, with #944815 (dark orange) and #F5B324 (vivid amber) as other accents. Measured on November 6, 2026.

- #FDF8F0: warm snow
- #1F1A14: warm charcoal
- #3C4043: cool graphite
- #5C5145: dark orange
- #766A5C: orange
- #FDFAF5: warm snow
- #ECF8EE: mist
- #FFFFFF: white

## What is Bhakti Nam Jap built with?

Bhakti Nam Jap’s website (bhaktinamjap.com) is built with Next.js, React and Google Fonts. Measured on November 6, 2026.

- JavaScript framework: Next.js 16.3.7, React 19.3.0-canary-cbb046ab-2
- Fonts & icons: Google Fonts
- Analytics: Google Analytics, Google Tag Manager

## Questions and answers

### What font does Bhakti Nam Jap use?

Bhakti Nam Jap’s website uses Tiro Devanagari Hindi (weight 400) and Inter (weights 400, 500, 600 and 650). Page titles are 40px at weight 400 (28px on phones) and body text is 17px. Measured on November 6, 2026.

### What are the Bhakti Nam Jap colors and hex codes?

On bhaktinamjap.com: #FDF8F0 (warm snow) for the background, #1F1A14 (warm charcoal) for text and #B0561D (orange) as the main accent, with #944815 (dark orange) and #F5B324 (vivid amber) as other accents. The color palette above lists all 17 colors with their hex codes and where each one is used.

### What is the Bhakti Nam Jap design system?

The design system on this page is bhaktinamjap.com’s, as measured on November 6, 2026: Tiro Devanagari Hindi type, #B0561D as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Bhakti Nam Jap’s own documentation.

### What is Bhakti Nam Jap built with?

Bhakti Nam Jap’s website (bhaktinamjap.com) is built with Next.js, React and Google Fonts. The full tech stack Sitepeel found: Next.js, React, Google Fonts, Google Analytics and Google Tag Manager. Measured on November 6, 2026.

### What is the Bhakti Nam Jap DESIGN.md?

A plain-text file with Bhakti Nam Jap’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 Bhakti Nam Jap’s official design system?

No. Sitepeel measured it from bhaktinamjap.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by Bhakti Nam Jap.

### Can I use Bhakti Nam Jap’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 Bhakti Nam Jap’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/bhaktinamjap.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 Bhakti Nam Jap.

## The DESIGN.md file

```markdown
---
version: alpha
name: Bhakti Nam Jap
description: "Light interface measured from bhaktinamjap.com: Tiro Devanagari Hindi type with Inter, orange accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#FDF8F0"
  surface: "#FDF8F0"
  on-surface: "#1F1A14"
  on-background: "#1F1A14"
  on-surface-variant: "#3C4043"
  on-surface-muted: "#5C5145"
  on-surface-subtle: "#766A5C"
  surface-container-low: "#FDFAF5"
  surface-container: "#ECF8EE"
  surface-container-high: "#FFFFFF"
  surface-container-highest: "#FBEEE1"
  overlay: "#0000003D"
  overlay-strong: "#FDF8F0E0"
  outline: "#ECE0CD"
  outline-variant: "#E6CBA7"
  primary: "#B0561D"
  on-primary: "#FFFFFF"
  secondary: "#944815"
  tertiary: "#F5B324"
typography:
  headline-display:
    fontFamily: Tiro Devanagari Hindi
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.25
  headline-lg:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.015em
  body-md:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.75
  body-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 650
    lineHeight: 1.35
    letterSpacing: -0.01em
  body-sm:
    fontFamily: Inter
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.65
  caption:
    fontFamily: Inter
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.35
  label-lg:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 700
  label-md:
    fontFamily: Inter
    fontSize: 14.5px
    fontWeight: 500
    lineHeight: 1.65
  label-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Tiro Devanagari Hindi
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.015em
rounded:
  sm: 10px
  md: 12px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 5px
  md: 10px
  lg: 28px
  xl: 48px
  gutter: 8px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px 16px
    height: 40px
  button-outline:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 1px 6px
    height: 40px
  button-secondary:
    textColor: "#1F1405"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 15px 20px
    height: 58px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px 16px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.xl}"
    padding: 22px 16px 6px 16px
  link:
    textColor: "{colors.primary}"
---

# Bhakti Nam Jap Design System

## Overview

Bhakti Nam Jap describes itself as: “Bhakti Nam Jap is an online Nam Jap counter to track daily mantra chanting. Stay focused, deepen devotion, and grow spiritually with ease.” The interface is light, built on **Warm Snow (#FDF8F0)** with **Warm Charcoal (#1F1A14)** text, and **Orange (#B0561D)** as the main accent.

Type is set in **Tiro Devanagari Hindi** and **Inter**. Headlines run large; body text is 17px. Depth comes from soft drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 17 roles, plus gradient stops #B0561D, #944815, #9B2C2C, #FFBD3A.

- **Warm Snow (#FDF8F0):** Page background, seen 1 time. Token `background`, CSS `--bg`.
- **Warm Charcoal (#1F1A14):** Primary text and headings, seen 35 times. Token `on-surface`, CSS `--fg`.
- **Cool Graphite (#3C4043):** Secondary text, seen 3 times. Token `on-surface-variant`.
- **Dark Orange (#5C5145):** Muted text and metadata, seen 110 times. Token `on-surface-muted`, CSS `--fg-muted`.
- **Orange (#766A5C):** Subtle text and placeholders, seen 6 times. Token `on-surface-subtle`, CSS `--fg-subtle`.
- **Warm Snow (#FDFAF5):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`, CSS `--surface-2`.
- **Mist (#ECF8EE):** Cards and panels, seen 1 time. Token `surface-container`.
- **White (#FFFFFF):** Hover and pressed fills, seen 12 times. Token `surface-container-high`, CSS `--fg-on-accent`.
- **Pale Orange (#FBEEE1):** Highest raised elements, seen 4 times. Token `surface-container-highest`, CSS `--accent-soft`.
- **Near Black 24% (#0000003D):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Warm Snow 88% (#FDF8F0E0):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Pale Orange (#ECE0CD):** Borders and dividers, seen 8 times. Token `outline`, CSS `--border`.
- **Light Orange (#E6CBA7):** Secondary dividers, seen 6 times. Token `outline-variant`, CSS `--accent-line`.
- **Orange (#B0561D):** Primary buttons and calls to action, seen 56 times. Token `primary`, CSS `--accent`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Orange (#944815):** Accent (CSS variable). Token `secondary`, CSS `--accent-hover`.
- **Vivid Amber (#F5B324):** Accent in text, fills and borders, seen 3 times. Token `tertiary`.

## Typography

**Tiro Devanagari Hindi**, **Inter** and **Google Sans** share the interface. Fallback stack: `Tiro Devanagari Hindi, Tiro Devanagari Hindi Fallback, Noto Sans Devanagari, Noto Sans Devanagari Fallback`. Other loaded fonts: Literata, Noto Sans Devanagari.

- **headline-display:** Tiro Devanagari Hindi 40px at weight 400, line height 1.25 (28px on mobile). Page title (h1).
- **headline-lg:** Inter 28px at weight 700, line height 1.3, tracking -0.015em (22px on mobile). Section headings (h2).
- **body-md:** Inter 17px at weight 400, line height 1.75. Body text.
- **body-lg:** Inter 20px at weight 650, line height 1.35, tracking -0.01em. Lead paragraphs.
- **body-sm:** Inter 14.5px at weight 400, line height 1.65. Secondary and small text.
- **caption:** Inter 13.5px at weight 400, line height 1.35. Captions and fine print.
- **label-lg:** Google Sans 16px at weight 700. Large buttons and tabs.
- **label-md:** Inter 14.5px at weight 500, line height 1.65. Buttons, navigation and labels.
- **label-sm:** Inter 14px at weight 600, line height 1.2. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 5px, md 10px, lg 28px, xl 48px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 359px, 459px, 460px, 520px, 599px, 600px, 767px, 768px, 860px, 900px, 1023px, 1024px, 1239px, 1280px, 1440px.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(255, 255, 255, 0.12) 0px 1px 0px 0px inset`
- `rgba(31, 26, 20, 0.04) 0px 1px 2px 0px, rgba(31, 26, 20, 0.03) 0px 1px 3px 0px`
- `rgba(176, 86, 29, 0.55) 0px 6px 18px -6px, rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 128 elements.
- **sm (10px):** 20 elements.
- **lg (16px):** 20 elements.
- **xl (24px):** 16 elements.
- **md (12px):** 8 elements.

## Components

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

- **button-primary (“Get Premium”):** #B0561D fill, #FFFFFF text, 14px/600, 999px radius, padding 0px 16px, border 1px solid #B0561D, shadow `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(255, 255, 255, 0.12) 0px 1px 0px 0px inset`.
- **button-outline (“अ”):** #FFFFFF fill, #5C5145 text, 14px/400, 999px radius, padding 1px 6px, border 1px solid #ECE0CD.
- **button-secondary (“GET PREMIUM · ₹200”):** transparent fill, #1F1405 text, 17px/800, 9999px radius, padding 15px 20px, shadow `rgba(214, 140, 20, 0.8) 0px 8px 20px -8px`.
- **button-ghost (“Log in”):** transparent fill, #1F1A14 text, 14px/600, 999px radius, padding 0px 16px.
- **card:** #FDFAF5 fill, #1F1A14 text, 16px/400, 24px radius, padding 22px 16px 6px 16px, shadow `rgba(0, 0, 0, 0.45) 0px 24px 60px -12px`.
- **link:** transparent fill, #B0561D text, padding 0px.

## Do's and Don'ts

- Do use #FDF8F0 for the page and lift surfaces in small steps: #FDFAF5, #ECF8EE, #FFFFFF, #FBEEE1.
- Do keep text in 4 levels: #1F1A14, #3C4043, #5C5145, #766A5C.
- Do reserve #B0561D for primary actions and key highlights.
- Do reuse the measured spacing steps (5px, 10px, 28px).
- Do make buttons and chips fully rounded (9999px); most other elements use 10px corners.
- Don't introduce new font families beyond Tiro Devanagari Hindi, Inter and Google Sans.
- Don't use #B0561D for large backgrounds or body text.
- Don't make interface transitions slower than 0.32s.

## Motion

Interface transitions are quick: 0.2s, 0.18s, 0.22s, 0.26s. Longer ambient animations run 5.5s.

- **Easing:** `cubic-bezier(0.32, 0.72, 0, 1)`, `ease-in-out`, `cubic-bezier(0.16, 1, 0.3, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```