Viraasat Handlooms

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/saree-store-demo.vercel.app -->
<!-- Extracted: 2026-10-10T08:53:33.357Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Viraasat Handlooms"
description: "Viraasat Handlooms | Handcrafted Sarees Demo presents a professional web presence."
colors:
  neutral: "#4b5563"
  surface: "#f3f4f6"
  on-surface: "#18181a"
  on-surface-secondary: "#4b5563"
  link: "#18181a"
typography:
  headline-lg:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: "700"
    lineHeight: "18px"
    letterSpacing: "1.2px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "13px"
    fontWeight: "700"
    lineHeight: "19.5px"
    letterSpacing: "0.65px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "4px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#18181a"
    rounded: "3.35544e+07px"
    padding: "9px 18px"
    fontSize: "11px"
    fontWeight: "700"
    borderWidth: "1px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
---

# Viraasat Handlooms — Design System

## Overview

Viraasat Handlooms | Handcrafted Sarees Demo presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 3 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#f3f4f6` | White Smoke |
| text | `#18181a` | Near-Black |
| secondary text | `#4b5563` | Dark Gray |
| link | `#18181a` | Near-Black |
| muted | `#4b5563` | Dark Gray |

## Typography

Type is set in Inter, Inter, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 400, 700 |
| Inter | heading | google-fonts | 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Inter | 12px | 700 | 18px | 1.2px |
| Heading 3 | Inter | 13px | 700 | 19.5px | 0.65px |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — uppercase
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| navigation | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` |

## Shapes

Border-radius scale:

- `md` — 4px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#18181a`
- Radius — `3.35544e+07px`
- Padding — `9px 18px`
- Font size — `11px`
- Font weight — `700`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Sample copy — "Visit Social Hub"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/saree-store-demo.vercel.app) | 100% |
| favicon | — | svg | [link](brands/saree-store-demo.vercel.app/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/saree-store-demo.vercel.app/logo-1.png) | 95% |
| favicon | — | png | [link](brands/saree-store-demo.vercel.app/logo-2.png) | 95% |
| favicon | — | png | [link](brands/saree-store-demo.vercel.app/logo-3.png) | 95% |
| favicon | — | ico | [link](brands/saree-store-demo.vercel.app/logo-4.ico) | 95% |

## Sources

- Official brand guidelines — https://saree-store-demo.vercel.app/brand
- Live brand page — https://extractvibe.com/brand/saree-store-demo.vercel.app
- Raw JSON — https://extractvibe.com/api/brand/saree-store-demo.vercel.app
- DESIGN.md (this file) — https://extractvibe.com/api/brand/saree-store-demo.vercel.app/design.md
- Extracted — 2026-10-10T08:53:33.357Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md