# Shahnawaz Anasri design system

> Shahnawaz Anasri design system measured from shanu-visuals.netlify.app: Space Grotesk font, 14 color hex codes, type scale and spacing. Free DESIGN.md file.

Canonical page: https://sitepeel.dev/design-md/shanu-visuals.netlify.app/

Shahnawaz Anasri’s website (shanu-visuals.netlify.app) uses the Space Grotesk font and #B4A6FF as its main color on a #0B0914 background. Measured by Sitepeel on November 5, 2026.

## What font does Shahnawaz Anasri use?

Shahnawaz Anasri uses Space Grotesk (weights 600 and 700) and Inter (weights 400 and 600), with JetBrains Mono for code on shanu-visuals.netlify.app. Page titles are 84px at weight 700 (40px on phones) and body text is 16px. Measured on November 5, 2026.

- Space Grotesk (weights 600, 700)
- Inter (weights 400, 600)
- JetBrains Mono (weights 400)

## Shahnawaz Anasri colors: palette and hex codes

Shahnawaz Anasri’s main colors are #0B0914 (cool charcoal) for the background, #F3F1FA (cool snow) for text and #B4A6FF (light indigo) as the main accent, with #7C5CFC (violet) and #2C2257 (dark indigo) as other accents. Measured on November 5, 2026.

- #0B0914: cool charcoal
- #F3F1FA: cool snow
- #FFFFFF: white
- #9791AE: violet
- #120F22: deep indigo
- #151329: deep indigo
- #B4A6FF: light indigo
- #000000: near black

## What is Shahnawaz Anasri built with?

Shahnawaz Anasri’s website (shanu-visuals.netlify.app) is built with Netlify and Google Fonts. Measured on November 5, 2026.

- Hosting & CDN: Netlify
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Shahnawaz Anasri use?

Shahnawaz Anasri’s website uses Space Grotesk (weights 600 and 700) and Inter (weights 400 and 600), with JetBrains Mono for code. Page titles are 84px at weight 700 (40px on phones) and body text is 16px. Measured on November 5, 2026.

### What are the Shahnawaz Anasri colors and hex codes?

On shanu-visuals.netlify.app: #0B0914 (cool charcoal) for the background, #F3F1FA (cool snow) for text and #B4A6FF (light indigo) as the main accent, with #7C5CFC (violet) and #2C2257 (dark indigo) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Shahnawaz Anasri design system?

The design system on this page is shanu-visuals.netlify.app’s, as measured on November 5, 2026: Space Grotesk type, #B4A6FF as the main color and 100px corners, written down as a DESIGN.md. It is not Shahnawaz Anasri’s own documentation.

### What is Shahnawaz Anasri built with?

Shahnawaz Anasri’s website (shanu-visuals.netlify.app) is built with Netlify and Google Fonts. Measured on November 5, 2026.

### What is the Shahnawaz Anasri DESIGN.md?

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

No. Sitepeel measured it from shanu-visuals.netlify.app’s public page on November 5, 2026. It is an independent analysis, not made or approved by Shahnawaz Anasri.

### Can I use Shahnawaz Anasri’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 Shahnawaz Anasri’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/shanu-visuals.netlify.app/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 Shahnawaz Anasri.

## The DESIGN.md file

```markdown
---
version: alpha
name: Shahnawaz Anasri
description: "Dark interface measured from shanu-visuals.netlify.app: Space Grotesk type with Inter, light indigo accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#0B0914"
  surface: "#0B0914"
  on-surface: "#F3F1FA"
  on-background: "#F3F1FA"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#9791AE"
  surface-container-low: "#120F22"
  surface-container: "#151329"
  overlay: "#F0EDFA0D"
  overlay-strong: "#FFFFFF38"
  outline: "#F0EDFA17"
  outline-variant: "#B4A6FF4D"
  primary: "#B4A6FF"
  on-primary: "#000000"
  secondary: "#7C5CFC"
  tertiary: "#2C2257"
typography:
  headline-display:
    fontFamily: Space Grotesk
    fontSize: 84px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 46px
    fontWeight: 600
    letterSpacing: -0.02em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 19px
    fontWeight: 600
    letterSpacing: -0.02em
  body-sm:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: Inter
    fontSize: 13.5px
    fontWeight: 400
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
  label-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
  code:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: 400
  headline-display-mobile:
    fontFamily: Space Grotesk
    fontSize: 40px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Space Grotesk
    fontSize: 30px
    fontWeight: 600
    letterSpacing: -0.02em
rounded:
  sm: 14px
  md: 100px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 9px
  lg: 22px
  xl: 52px
  gutter: 8px
  section: 130px
components:
  button-primary:
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 11px 8px 11px 22px
    height: 48px
  button-secondary:
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.caption}"
    padding: 0px
    height: 60px
  button-outline:
    backgroundColor: "#F0EDFA24"
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.caption}"
    padding: 0px
    height: 76px
  button-ghost:
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 11px 8px 11px 22px
  input-field:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 15px 16px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Shahnawaz Anasri Design System

## Overview

The interface is dark, built on **Cool Charcoal (#0B0914)** with **Cool Snow (#F3F1FA)** text, and **Light Indigo (#B4A6FF)** as the main accent.

Type is set in **Space Grotesk** and **Inter**, with **JetBrains Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [shanu-visuals.netlify.app](https://shanu-visuals.netlify.app/) on November 5, 2026 at 1440×900 and 390×844 from 207 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 14 roles, plus gradient stops #7C5CFC, #6A4CFF, #C9BFFF, #B4A6FF.

- **Cool Charcoal (#0B0914):** Page background, seen 1 time. Token `background`, CSS `--bg`.
- **Cool Snow (#F3F1FA):** Primary text and headings, seen 29 times. Token `on-surface`, CSS `--text`.
- **White (#FFFFFF):** Headings and emphasis, seen 4 times. Token `on-surface-strong`.
- **Violet (#9791AE):** Secondary text, seen 63 times. Token `on-surface-variant`, CSS `--text-mute`.
- **Deep Indigo (#120F22):** Raised areas one step from the page, seen 6 times. Token `surface-container-low`.
- **Deep Indigo (#151329):** Cards and panels, seen 6 times. Token `surface-container`, CSS `--surface`.
- **Cool Mist 5% (#F0EDFA0D):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White 22% (#FFFFFF38):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **Cool Mist 9% (#F0EDFA17):** Borders and dividers, seen 26 times. Token `outline`, CSS `--line`.
- **Light Indigo 30% (#B4A6FF4D):** Secondary dividers, seen 6 times. Token `outline-variant`.
- **Light Indigo (#B4A6FF):** Most used accent color, seen 26 times. Token `primary`, CSS `--accent2`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Violet (#7C5CFC):** Accent (CSS variable). Token `secondary`, CSS `--accent`.
- **Dark Indigo (#2C2257):** Accent in logos and imagery. Token `tertiary`.

## Typography

**Space Grotesk**, **Inter** and **JetBrains Mono** (monospace) share the interface. Fallback stack: `Space Grotesk, sans-serif`.

- **headline-display:** Space Grotesk 84px at weight 700, line height 0.98, tracking -0.02em (40px on mobile). Page title (h1).
- **headline-lg:** Space Grotesk 46px at weight 600, tracking -0.02em (30px on mobile). Section headings (h2).
- **body-md:** Inter 16px at weight 400. Body text.
- **body-lg:** Space Grotesk 19px at weight 600, tracking -0.02em. Lead paragraphs.
- **body-sm:** Inter 15px at weight 400, line height 1.6. Secondary and small text.
- **caption:** Inter 13.5px at weight 400. Captions and fine print.
- **label-md:** Inter 14px at weight 600. Buttons, navigation and labels.
- **label-sm:** Inter 13px at weight 400. Small labels and badges.
- **code:** JetBrains Mono 11px at weight 400. Code and technical values.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 9px, lg 22px, xl 52px.
- **Sections:** 130px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 480px, 860px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#120F22 → #151329):

- `rgba(124, 92, 252, 0.5) 0px 0px 0px 0px`

A few raised panels add a soft drop shadow: `rgb(180, 166, 255) 0px 0px 12px 0px`.

## Shapes

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

- **md (100px):** 80 elements.
- **full (9999px):** 48 elements.
- **sm (14px):** 36 elements.

## Components

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

- **button-primary (“Book a call”):** transparent fill, #FFFFFF text, 14px/600, 100px radius, padding 11px 8px 11px 22px, shadow `rgba(124, 92, 252, 0.5) 0px 0px 0px 0px`.
- **button-secondary (“Open chat”):** transparent fill, #FFFFFF text, 13.3333px/400, 50% radius, padding 0px, shadow `rgba(124, 92, 252, 0.45) 0px 10px 30px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 0px`.
- **button-outline (“Play showreel”):** #F0EDFA24 fill, #FFFFFF text, 13.3333px/400, 50% radius, padding 0px, border 1px solid #F0EDFA47.
- **button-ghost (“Book a call”):** transparent fill, #FFFFFF text, 14px/600, 100px radius, padding 11px 8px 11px 22px, shadow `rgba(124, 92, 252, 0.5) 0px 0px 0px 0px`.
- **input-field:** #F0EDFA0D fill, #F3F1FA text, 14.5px/400, 14px radius, padding 15px 16px, border 1px solid #F0EDFA17.
- **card:** #151329 fill, #F3F1FA text, 16px/400, 14px radius, padding 0px, border 1px solid #F0EDFA17.
- **link:** transparent fill, #B4A6FF text, padding 0px.

## Do's and Don'ts

- Do use #0B0914 for the page and lift surfaces in small steps: #120F22, #151329.
- Do keep text in 3 levels: #F3F1FA, #FFFFFF, #9791AE.
- Do reserve #B4A6FF for primary actions and key highlights.
- Do set headlines in Space Grotesk with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 9px, 22px).
- Do make buttons and chips fully rounded (9999px); most other elements use 100px corners.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond Space Grotesk, Inter and JetBrains Mono.
- Don't use #B4A6FF for large backgrounds or body text.
- Don't make interface transitions slower than 0.45s.

## Motion

Interface transitions are quick: 0.2s, 0.4s, 0.25s, 0.3s. Longer ambient animations run 0.9s.

- **Easing:** `ease`, `cubic-bezier(0.2, 0.9, 0.25, 1)`, `cubic-bezier(0.34, 1.56, 0.64, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```