# Kashmiri Realtor design system

> Kashmiri Realtor design system measured from kashmirirealtor.com: Montserrat font, 14 color hex codes, type scale and spacing. Light theme with pill corners.

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

Kashmiri Realtor’s website (kashmirirealtor.com) uses the Montserrat font and #EBC75D as its main color on a #F7F6F3 background. Measured by Sitepeel on November 5, 2026.

## What font does Kashmiri Realtor use?

Kashmiri Realtor uses Montserrat (weights 400, 600 and 800) on kashmirirealtor.com. Page titles are 60px at weight 800 (34px on phones) and body text is 19px. Measured on November 5, 2026.

- Montserrat (weights 400, 600, 800)

## Kashmiri Realtor colors: palette and hex codes

Kashmiri Realtor’s main colors are #F7F6F3 (snow) for the background, #130F25 (deep indigo) for text and #EBC75D (amber) as the main accent, with #BF8210 (orange) and #F5EFDE (pale amber) as other accents. Measured on November 5, 2026.

- #F7F6F3: snow
- #130F25: deep indigo
- #4B475E: dark indigo
- #8B8798: cool gray
- #FFFFFF: white
- #EBC75D: amber
- #000000: near black
- #BF8210: orange

## What is Kashmiri Realtor built with?

Kashmiri Realtor’s website (kashmirirealtor.com) is built with Next.js, React, CSS Modules, Radix UI and Google Cloud. Measured on November 5, 2026.

- JavaScript framework: Next.js 15.5.20, React 19.2.0-canary-0bdb9206-2
- Hosting & CDN: Google Cloud
- UI & CSS: CSS Modules, Radix UI
- Animation & 3D: Motion
- Fonts & icons: Lucide

## Questions and answers

### What font does Kashmiri Realtor use?

Kashmiri Realtor’s website uses Montserrat (weights 400, 600 and 800). Page titles are 60px at weight 800 (34px on phones) and body text is 19px. Measured on November 5, 2026.

### What are the Kashmiri Realtor colors and hex codes?

On kashmirirealtor.com: #F7F6F3 (snow) for the background, #130F25 (deep indigo) for text and #EBC75D (amber) as the main accent, with #BF8210 (orange) and #F5EFDE (pale amber) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Kashmiri Realtor design system?

The design system on this page is kashmirirealtor.com’s, as measured on November 5, 2026: Montserrat type, #EBC75D as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Kashmiri Realtor’s own documentation.

### What is Kashmiri Realtor built with?

Kashmiri Realtor’s website (kashmirirealtor.com) is built with Next.js, React, CSS Modules, Radix UI and Google Cloud. The full tech stack Sitepeel found: Next.js, React, Google Cloud, CSS Modules, Radix UI, Motion and Lucide. Measured on November 5, 2026.

### What is the Kashmiri Realtor DESIGN.md?

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

No. Sitepeel measured it from kashmirirealtor.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Kashmiri Realtor.

### Can I use Kashmiri Realtor’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 Kashmiri Realtor’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/kashmirirealtor.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 Kashmiri Realtor.

## The DESIGN.md file

```markdown
---
version: alpha
name: Kashmiri Realtor
description: "Light interface measured from kashmirirealtor.com: Montserrat type, amber accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#F7F6F3"
  surface: "#F7F6F3"
  on-surface: "#130F25"
  on-background: "#130F25"
  on-surface-variant: "#4B475E"
  on-surface-muted: "#8B8798"
  surface-container-low: "#FFFFFFEB"
  surface-container: "#FFFFFF"
  overlay: "#130F2540"
  overlay-strong: "#130F258C"
  outline: "#130F251A"
  outline-variant: "#130F252E"
  primary: "#EBC75D"
  on-primary: "#000000"
  secondary: "#BF8210"
  tertiary: "#F5EFDE"
typography:
  headline-display:
    fontFamily: Montserrat
    fontSize: 60px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-md:
    fontFamily: Montserrat
    fontSize: 19px
    fontWeight: 800
    lineHeight: 1.6
  body-sm:
    fontFamily: Montserrat
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label-sm:
    fontFamily: Montserrat
    fontSize: 14.5px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.01em
  headline-display-mobile:
    fontFamily: Montserrat
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Montserrat
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
rounded:
  sm: 10px
  md: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 6px
  md: 10px
  lg: 18px
  xl: 50.69px
  gutter: 8px
  section: 144px
components:
  button-primary:
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    padding: 0px 14px
    height: 34px
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    padding: 0px
    height: 44px
  button-ghost:
    textColor: "#EEEEEED9"
    rounded: "{rounded.full}"
    padding: 10px 14px
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px
  link:
    textColor: "{colors.surface-container}"
---

# Kashmiri Realtor Design System

## Overview

Kashmiri Realtor describes itself as: “Buy, Sell, Rent & Lease residential and commercial properties across Srinagar and Kashmir. Verified plots, villas, apartments, shops, offices and investment opportunities with Kashmiri Realtor.” The interface is light, built on **Snow (#F7F6F3)** with **Deep Indigo (#130F25)** text, and **Amber (#EBC75D)** as the main accent.

Type is set in **Montserrat**. Headlines run large with tight negative tracking; body text is 19px. Depth comes from soft drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 14 roles, plus gradient stops #EBC75D, #BF8210, #130F25, #1B1633.

- **Snow (#F7F6F3):** Page background, seen 1 time. Token `background`, CSS `--bg`.
- **Deep Indigo (#130F25):** Primary text and headings, seen 80 times. Token `on-surface`, CSS `--surface-inverse`.
- **Dark Indigo (#4B475E):** Secondary text, seen 17 times. Token `on-surface-variant`, CSS `--text-secondary`.
- **Cool Gray (#8B8798):** Muted text and metadata, seen 36 times. Token `on-surface-muted`, CSS `--text-muted`.
- **White 92% (#FFFFFFEB):** Raised areas one step from the page, seen 50 times. Token `surface-container-low`.
- **White (#FFFFFF):** Cards and panels, seen 66 times. Token `surface-container`.
- **Deep Indigo 25% (#130F2540):** Translucent fill for cards and controls, seen 11 times. Token `overlay`.
- **Deep Indigo 55% (#130F258C):** Stronger translucent fill, seen 8 times. Token `overlay-strong`.
- **Deep Indigo 10% (#130F251A):** Borders and dividers, seen 71 times. Token `outline`, CSS `--border`.
- **Deep Indigo 18% (#130F252E):** Secondary dividers, seen 10 times. Token `outline-variant`, CSS `--border-strong`.
- **Amber (#EBC75D):** Brand accent (CSS variable), seen 15 times. Token `primary`, CSS `--brand-gold`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Orange (#BF8210):** Accent (CSS variable), seen 8 times. Token `secondary`, CSS `--accent`.
- **Pale Amber (#F5EFDE):** Accent (CSS variable). Token `tertiary`.

## Typography

**Montserrat** carries the whole interface. Fallback stack: `Montserrat, Montserrat Fallback, Montserrat, -apple-system`.

- **headline-display:** Montserrat 60px at weight 800, line height 1.2, tracking -0.02em (34px on mobile). Page title (h1).
- **headline-lg:** Montserrat 30px at weight 800, line height 1.2, tracking -0.01em (22px on mobile). Section headings (h2).
- **body-md:** Montserrat 19px at weight 800, line height 1.6. Body text.
- **body-sm:** Montserrat 12.5px at weight 400, line height 1.6. Secondary and small text.
- **label-md:** Montserrat 15px at weight 400, line height 1.6. Buttons, navigation and labels.
- **label-sm:** Montserrat 14.5px at weight 600, line height 1.4, tracking -0.01em. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 6px, md 10px, lg 18px, xl 50.69px.
- **Sections:** 144px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 380px, 420px, 440px, 480px, 560px, 600px, 640px, 720px, 760px, 768px, 860px, 880px, 900px, 960px, 1024px, 1080px.

## Elevation & Depth

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

- `rgba(19, 15, 37, 0.06) 0px 2px 8px 0px`
- `rgba(19, 15, 37, 0.08) 0px 6px 24px 0px`

## Shapes

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

- **full (9999px):** 336 elements.
- **md (20px):** 260 elements.
- **sm (10px):** 20 elements.

## Components

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

- **button-primary (“Post Property FREE”):** transparent fill, #130F25 text, 13px/600, 999px radius, padding 0px 14px, shadow `rgba(19, 15, 37, 0.06) 0px 2px 8px 0px`.
- **button-outline (“Scroll forward”):** #FFFFFF fill, #130F25 text, 15px/400, 50% radius, padding 0px, border 1px solid #130F251A, shadow `rgba(19, 15, 37, 0.08) 0px 6px 24px 0px`.
- **button-ghost (“For Buyers”):** transparent fill, #EEEEEED9 text, 13.5px/600, 999px radius, padding 10px 14px.
- **input-field (“Search city, locality or project”):** transparent fill, #130F25 text, 15px/400, padding 0px.
- **card:** #FFFFFF fill, #130F25 text, 15px/400, 20px radius, padding 0px, border 1px solid #130F251A, shadow `rgba(19, 15, 37, 0.06) 0px 2px 8px 0px`.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #F7F6F3 for the page and lift surfaces in small steps: #FFFFFFEB, #FFFFFF.
- Do keep text in 3 levels: #130F25, #4B475E, #8B8798.
- Do use #EBC75D as the brand accent: header, logo and key highlights.
- Do set headlines in Montserrat with tight tracking (-0.02em).
- Do reuse the measured spacing steps (6px, 10px, 18px).
- Do make buttons and chips fully rounded (9999px); most other elements use 20px corners.
- Don't use #8B8798 for body text; it reaches 3.23:1 on #F7F6F3. Keep it for large text or metadata.
- Don't introduce new font families beyond Montserrat.
- Don't use #EBC75D for large backgrounds or body text.
- Don't make interface transitions slower than 0.28s.

## Motion

Interface transitions are quick: 0.16s, 0.28s.

- **Easing:** `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/kashmirirealtor.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```