# ĀRATI design system

> ĀRATI design system measured from hindu-spiritual-website-template-56739.revamp.page: Cormorant Garamond font, 13 color hex codes, type scale and spacing.

Canonical page: https://sitepeel.dev/design-md/hindu-spiritual-website-template-56739.revamp.page/

ĀRATI’s website (hindu-spiritual-website-template-56739.revamp.page) uses the Cormorant Garamond font and #FFFFFF as its main color on a #101419 background. Measured by Sitepeel on November 6, 2026.

## What font does ĀRATI use?

ĀRATI uses Cormorant Garamond (weight 400) and DM Sans (weights 400 and 600) on hindu-spiritual-website-template-56739.revamp.page. Page titles are 148px at weight 400 (66px on phones) and body text is 15px. Measured on November 6, 2026.

- Cormorant Garamond (weights 400)
- DM Sans (weights 400, 600)

## ĀRATI colors: palette and hex codes

ĀRATI’s main colors are #101419 (cool charcoal) for the background, #F5F0E6 (warm mist) for text and #FFFFFF (white) as the main accent, with #B86724 (orange) and #ED9D43 (vivid orange) as other accents. Measured on November 6, 2026.

- #101419: cool charcoal
- #F5F0E6: warm mist
- #B5B3AD: warm gray
- #A5A39E: warm gray
- #70716D: slate
- #172123: cool charcoal
- #181B1C: charcoal
- #FFFFFF: white

## What is ĀRATI built with?

ĀRATI’s website (hindu-spiritual-website-template-56739.revamp.page) is built with React, vinext, Vite, Cloudflare and Motion. Measured on November 6, 2026.

- JavaScript framework: React 19.2.8, vinext, Vite
- Hosting & CDN: Cloudflare
- Analytics: Cloudflare Web Analytics
- Animation & 3D: Motion
- Fonts & icons: Lucide

## Questions and answers

### What font does ĀRATI use?

ĀRATI’s website uses Cormorant Garamond (weight 400) and DM Sans (weights 400 and 600). Page titles are 148px at weight 400 (66px on phones) and body text is 15px. Measured on November 6, 2026.

### What are the ĀRATI colors and hex codes?

On hindu-spiritual-website-template-56739.revamp.page: #101419 (cool charcoal) for the background, #F5F0E6 (warm mist) for text and #FFFFFF (white) as the main accent, with #B86724 (orange) and #ED9D43 (vivid orange) as other accents. The color palette above lists all 13 colors with their hex codes and where each one is used.

### What is the ĀRATI design system?

The design system on this page is hindu-spiritual-website-template-56739.revamp.page’s, as measured on November 6, 2026: Cormorant Garamond type, #FFFFFF as the main color and 12px corners, written down as a DESIGN.md. It is not ĀRATI’s own documentation.

### What is ĀRATI built with?

ĀRATI’s website (hindu-spiritual-website-template-56739.revamp.page) is built with React, vinext, Vite, Cloudflare and Motion. The full tech stack Sitepeel found: React, vinext, Vite, Cloudflare, Cloudflare Web Analytics, Motion and Lucide. Measured on November 6, 2026.

### What is the ĀRATI DESIGN.md?

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

No. Sitepeel measured it from hindu-spiritual-website-template-56739.revamp.page’s public page on November 6, 2026. It is an independent analysis, not made or approved by ĀRATI.

### Can I use ĀRATI’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 ĀRATI’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/hindu-spiritual-website-template-56739.revamp.page/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 ĀRATI.

## The DESIGN.md file

```markdown
---
version: alpha
name: ĀRATI
description: "Dark monochrome interface measured from hindu-spiritual-website-template-56739.revamp.page: Cormorant Garamond type with DM Sans, tonal surfaces and pill-shaped controls."
colors:
  background: "#101419"
  surface: "#101419"
  on-surface: "#F5F0E6"
  on-background: "#F5F0E6"
  on-surface-variant: "#B5B3AD"
  on-surface-muted: "#A5A39E"
  on-surface-subtle: "#70716D"
  surface-container-low: "#172123"
  outline: "#181B1C30"
  outline-variant: "#181B1C"
  primary: "#FFFFFF"
  on-primary: "#202031"
  inverse-surface: "#F1EEE6"
  secondary: "#B86724"
  tertiary: "#ED9D43"
typography:
  headline-display:
    fontFamily: Cormorant Garamond
    fontSize: 148px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Cormorant Garamond
    fontSize: 102px
    fontWeight: 400
    lineHeight: 0.88
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Cormorant Garamond
    fontSize: 92px
    fontWeight: 400
    lineHeight: 0.91
    letterSpacing: -0.045em
  body-md:
    fontFamily: DM Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
  body-lg:
    fontFamily: Cormorant Garamond
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: DM Sans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.08em
  label-md:
    fontFamily: DM Sans
    fontSize: 9px
    fontWeight: 600
    lineHeight: 1.65
    letterSpacing: 0.19em
  headline-display-mobile:
    fontFamily: Cormorant Garamond
    fontSize: 66px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: -0.045em
  headline-lg-mobile:
    fontFamily: Cormorant Garamond
    fontSize: 62.5px
    fontWeight: 400
    lineHeight: 0.88
    letterSpacing: -0.045em
rounded:
  md: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 13px
  lg: 22px
  xl: 43.2px
  gutter: 22px
  section: 129.6px
  margin: 76.32px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 9px 12px
    height: 40px
  button-outline:
    textColor: "#F5F0E5"
    typography: "{typography.body-md}"
    padding: 0px
    height: 48px
---

# ĀRATI Design System

## Overview

ĀRATI describes itself as: “A living guide to Hindu practice, ritual and reflection. Find a rhythm that brings the sacred into your everyday.” The interface is dark, built on **Cool Charcoal (#101419)** with **Warm Mist (#F5F0E6)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Cormorant Garamond** and **DM Sans**. Headlines run large with tight negative tracking; body text is 15px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [hindu-spiritual-website-template-56739.revamp.page](https://hindu-spiritual-website-template-56739.revamp.page/) on November 6, 2026 at 1440×900 and 390×844 from 99 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 13 roles.

- **Cool Charcoal (#101419):** Page background, seen 1 time. Token `background`.
- **Warm Mist (#F5F0E6):** Primary text and headings, seen 7 times. Token `on-surface`.
- **Warm Gray (#B5B3AD):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Warm Gray (#A5A39E):** Muted text and metadata, seen 4 times. Token `on-surface-muted`.
- **Slate (#70716D):** Subtle text and placeholders, seen 3 times. Token `on-surface-subtle`.
- **Cool Charcoal (#172123):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`, CSS `--night-soft`.
- **Charcoal 19% (#181B1C30):** Borders and dividers, seen 6 times. Token `outline`, CSS `--line`.
- **Charcoal (#181B1C):** Secondary dividers, seen 1 time. Token `outline-variant`, CSS `--ink`.
- **White (#FFFFFF):** Primary buttons and calls to action, seen 1 time. Token `primary`, CSS `--tw-ring-offset-color`.
- **Cool Graphite (#202031):** Text and icons on primary. Token `on-primary`.
- **Warm Mist (#F1EEE6):** High-contrast fills, seen 4 times. Token `inverse-surface`, CSS `--canvas`.
- **Orange (#B86724):** Accent in text, fills and borders, seen 13 times. Token `secondary`, CSS `--saffron-deep`.
- **Vivid Orange (#ED9D43):** Accent in text, fills and borders, seen 2 times. Token `tertiary`, CSS `--saffron`.

## Typography

**Cormorant Garamond** and **DM Sans** share the interface. Fallback stack: `Cormorant Garamond, Cormorant Garamond Fallback, Georgia, serif`.

- **headline-display:** Cormorant Garamond 148px at weight 400, line height 0.83, tracking -0.045em (66px on mobile). Page title (h1).
- **headline-lg:** Cormorant Garamond 102px at weight 400, line height 0.88, tracking -0.045em (62.5px on mobile). Section headings (h2).
- **headline-md:** Cormorant Garamond 92px at weight 400, line height 0.91, tracking -0.045em. Sub-section headings.
- **body-md:** DM Sans 15px at weight 400, line height 1.65. Body text.
- **body-lg:** Cormorant Garamond 17px at weight 400, line height 1.65. Lead paragraphs.
- **body-sm:** DM Sans 11px at weight 400, line height 1.65, tracking 0.08em. Secondary and small text.
- **label-md:** DM Sans 9px at weight 600, line height 1.65, tracking 0.19em, uppercase. Buttons, navigation and labels.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 13px, lg 22px, xl 43.2px.
- **Sections:** 129.6px vertical padding between major sections.
- **Gaps:** 22px is the most common gap in flex and grid layouts.
- **Page margin:** 76.32px on each side of full-width sections.
- **Breakpoints:** 480px, 800px.

## Elevation & Depth

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

- `rgba(32, 32, 49, 0.04) 0px 2px 6px 0px, rgba(32, 32, 49, 0.08) 0px 8px 24px 0px`

## Shapes

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

- **md (12px):** 4 elements.
- **full (9999px):** 4 elements.

## Components

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

- **button-primary (“Made with Revamp”):** #FFFFFF fill, #202031 text, 12px/500, 12px radius, padding 9px 12px, border 1px solid #E5E5EA, shadow `rgba(32, 32, 49, 0.04) 0px 2px 6px 0px, rgba(32, 32, 49, 0.08) 0px 8px 24px 0px`.
- **button-outline (“Explore the way”):** transparent fill, #F5F0E5 text, 15px/400, 50% radius, padding 0px, border 1px solid #F5F0E594.

## Do's and Don'ts

- Do use #101419 for the page and lift surfaces in small steps: #172123.
- Do keep text in 4 levels: #F5F0E6, #B5B3AD, #A5A39E, #70716D.
- Do let contrast carry emphasis; primary actions use #FFFFFF on #101419.
- Do set headlines in Cormorant Garamond with tight tracking (-0.045em).
- Do reuse the measured spacing steps (8px, 13px, 22px).
- Do make buttons and chips fully rounded (9999px); most other elements use 12px corners.
- Don't use #70716D for body text; it reaches 3.76:1 on #101419. Keep it for large text or metadata.
- Don't introduce new font families beyond Cormorant Garamond and DM Sans.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.28s.

## Motion

Interface transitions are quick: 0.25s, 0.2s, 0.28s.

- **Easing:** `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/hindu-spiritual-website-template-56739.revamp.page/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```