---
version: alpha
name: NMG
description: >
  NMG. The DESIGN.md-native brand. The first design system built so AI agents
  read it before designers do. NMG is a digital-first agency group — engineered
  in Gurugram (delivery), sold from Los Angeles and London (sales) — comprising
  three sub-brands (NMG Technologies, NMG Digital, NMG AI Hub) sharing one DNA:
  signature red dot, warm canvas, bold serif wordmark, and a strict restraint
  principle. Red is rare, intentional, and never repeated on the same view.
  Designs feel premium, journalistic, and data-confident — never loud. The brand
  fuses Indian craft (the red dot as bindu, applied with intent) with Western
  journalistic minimalism. Source of truth: nmg-brand-guidelines.netlify.app
  (v3.15, May 2026). Modernized to Google DESIGN.md spec for Stitch and coding
  agents.


# ──────────────────────────────────────────────────────────────────────────────
# AGENT PERSONA — when an AI agent generates NMG-branded work, it inhabits
# this role. This block is what makes NMG outputs unmistakable.
# ──────────────────────────────────────────────────────────────────────────────
agent_persona:
  role: "Senior brand designer at NMG (Gurugram · Los Angeles · London)"
  instincts:
    - "Reach for one red element. Verify there isn't a second."
    - "Open with a warm white canvas (#F8F7F4). Never pure white."
    - "Lead every section with eyebrow + heading + 3px accent bar — The NMG Section Stack."
    - "Show real numbers. Real screenshots. Real names."
    - "Tabular numerals on every datum that lives in a column (font-feature-settings: 'tnum' 1, 'lnum' 1)."
    - "If a chart needs a 7th series, collapse the data — never add a color."
  forbidden:
    - "Multi-color illustrations or duotone icons (the red dot motif is the only fill)"
    - "Stock photography of 'business teams' or abstract gradients"
    - "Exclamation marks, emojis, or hype words in client-facing docs"
    - "More than one red element per visible region"
    - "Pure white #FFFFFF for the page canvas — always warm white #F8F7F4"
    - "Glassmorphism, neumorphism, or color-tinted shadows"
  voice: "Confident, direct, data-led. Educate, don't sell. Short sentences."
  default_tokens:
    body: "{typography.body-md}"
    button_radius: "{rounded.md}"
    card_radius: "{rounded.lg}"
    primary_action: "{colors.primary}"
    section_spacing: "{spacing.4xl}"
  if_in_doubt: "Subtract. Then subtract again. The less red you use, the more it means."

# ──────────────────────────────────────────────────────────────────────────────
# COLORS — semantic token model (Stitch-friendly), with NMG aliases.
# Light is the default theme. Dark mode lives under "Layout > Theme Mapping".
# ──────────────────────────────────────────────────────────────────────────────
colors:
  # Brand anchor — used SPARINGLY (the red dot rule)
  primary:               "#FF0000"      # NMG Red — accent only
  on-primary:            "#FFFFFF"      # text/icon on primary
  primary-hover:         "#CC0000"
  primary-active:        "#AA0000"
  primary-soft:          "#F9D9D7"      # red @ ~10% — backgrounds for warning rows
  primary-ghost:         "#FFF0F0"      # red @ ~3% — hover ghosts

  # Grounding neutrals
  secondary:             "#1B1B1B"      # NMG Near-Black — primary text & dark mode bg
  on-secondary:          "#F8F7F4"
  secondary-hover:       "#2A2A2A"
  secondary-active:      "#0F0F0F"

  # Warm canvas (never pure white)
  background:            "#F8F7F4"      # NMG Warm White — page canvas
  on-background:         "#1B1B1B"
  surface:               "#FFFFFF"      # cards, elevated panels
  on-surface:            "#1B1B1B"
  surface-variant:       "#F0EFEC"      # muted surface, code blocks, disabled
  on-surface-variant:    "#5A5862"

  # Text scale
  text-primary:          "#1B1B1B"
  text-secondary:        "#5A5862"
  text-muted:            "#8A8892"
  text-inverse:          "#F8F7F4"

  # Borders / outlines
  outline:               "#E6E4DF"      # rgba(0,0,0,0.08) baked
  outline-strong:        "#D4D1CB"      # rgba(0,0,0,0.15) baked
  outline-focus:         "#FF0000"      # focus ring uses brand red @ full

  # Tertiary accent (warm, used in data viz; NEVER replaces primary)
  tertiary:              "#F3724F"      # NMG Coral
  on-tertiary:           "#1B1B1B"

  # Semantic / status (data-viz + form feedback)
  success:               "#16A34A"
  on-success:            "#FFFFFF"
  warning:               "#F59E0B"
  on-warning:            "#1B1B1B"
  info:                  "#3B82F6"
  on-info:               "#FFFFFF"
  error:                 "#FF0000"      # routes to NMG Red — keep distinct from primary in usage
  on-error:              "#FFFFFF"

  # Data-viz ordered palette (use in order; never recolor at random)
  chart-1:               "#FF0000"      # primary metric only
  chart-2:               "#F3724F"      # secondary
  chart-3:               "#3B82F6"      # tertiary
  chart-4:               "#16A34A"      # quaternary
  chart-5:               "#8B5CF6"      # quinary
  chart-6:               "#F59E0B"      # senary
  chart-grid:            "#E6E4DF"
  chart-axis:            "#8A8892"

  # Dark-mode equivalents (apply via [data-theme="dark"])
  dark-background:       "#1A1A1F"
  dark-on-background:    "#F8F7F4"
  dark-surface:          "#242428"
  dark-on-surface:       "#F8F7F4"
  dark-surface-variant:  "#2C2C32"
  dark-outline:          "#33323A"
  dark-outline-strong:   "#3F3E48"
  dark-text-secondary:   "#C8C5BE"
  dark-text-muted:       "#8A8892"

# ──────────────────────────────────────────────────────────────────────────────
# TYPOGRAPHY — Montserrat (display) + Inter (text). All weights explicit.
# Names follow Stitch/Material-3 conventions; legacy NMG aliases included.
# ──────────────────────────────────────────────────────────────────────────────
typography:
  display-lg:
    fontFamily: Montserrat
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.025em
  display-md:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.02em
  display-sm:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-lg:                          # H1
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-md:                          # H2
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  headline-sm:                          # H3
    fontFamily: Montserrat
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0
  title-lg:                             # card titles
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0
  title-md:                             # section subtitles
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.45
    letterSpacing: 0
  body-lg:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0
  body-md:                              # default body
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0
  body-sm:                              # captions
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0
  label-lg:                             # button text
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.01em
  label-md:                             # form labels, table headers
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.04em
  label-caps:                           # the EYEBROW — NMG signature
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.18em
  micro:                                # badges, tags, footnotes
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.06em
  kpi-number:                           # the big metric on dashboards
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  code:
    fontFamily: "JetBrains Mono"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0

# ──────────────────────────────────────────────────────────────────────────────
# SHAPES — corner radii used across components.
# ──────────────────────────────────────────────────────────────────────────────
rounded:
  none: 0px
  sm:   4px         # inputs in tight grids, tags
  md:   8px         # buttons, inputs
  lg:   12px        # cards, modals
  xl:   16px        # hero panels
  pill: 9999px      # pill buttons (rare — used for status chips)

# ──────────────────────────────────────────────────────────────────────────────
# SPACING — 4px base. Use scale tokens, never raw numbers.
# ──────────────────────────────────────────────────────────────────────────────
spacing:
  none: 0px
  xs:   4px
  sm:   8px
  md:   16px
  lg:   24px
  xl:   32px
  2xl:  48px
  3xl:  64px
  4xl:  96px
  page: 48px        # page side padding (web)
  page-mobile: 20px

# ──────────────────────────────────────────────────────────────────────────────
# COMPONENTS — every interactive primitive that AI agents might compose.
# Variants (hover/active/disabled/focus) are separate entries per Stitch spec.
# ──────────────────────────────────────────────────────────────────────────────
components:

  # ── Mandatory NMG signature ────────────────────────────────────────────────
  accent-bar:
    backgroundColor: "{colors.primary}"
    height: 3px
    width: 100%
    rounded: "{rounded.none}"
    padding: 0px

  # ── Buttons ────────────────────────────────────────────────────────────────
  button-primary:                 # ONE per view — the rule
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
  button-primary-disabled:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-muted}"
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-secondary:               # default for most actions
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
  button-secondary-hover:
    backgroundColor: "{colors.secondary-hover}"
    textColor: "{colors.on-secondary}"
  button-secondary-active:
    backgroundColor: "{colors.secondary-active}"
    textColor: "{colors.on-secondary}"

  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
  button-outline-hover:
    backgroundColor: "{colors.primary-ghost}"
    textColor: "{colors.primary}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 36px
  button-ghost-hover:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-primary}"

  # ── Cards ──────────────────────────────────────────────────────────────────
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px

  card-feature:                   # case-study / hero card with red accent
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 32px

  # ── KPI / Metric Cards ─────────────────────────────────────────────────────
  kpi-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.kpi-number}"
    rounded: "{rounded.lg}"
    padding: 20px 24px
  kpi-label:
    backgroundColor: "transparent"
    textColor: "{colors.text-muted}"
    typography: "{typography.label-caps}"
    padding: 0px
  kpi-delta-positive:
    backgroundColor: "transparent"
    textColor: "{colors.success}"
    typography: "{typography.label-md}"
  kpi-delta-negative:
    backgroundColor: "transparent"
    textColor: "{colors.error}"
    typography: "{typography.label-md}"

  # ── Eyebrow label (NMG signature) ──────────────────────────────────────────
  eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    padding: 0px

  # ── Form Inputs ────────────────────────────────────────────────────────────
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 44px
  input-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
  input-disabled:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-muted}"
  input-error:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.error}"

  textarea:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 14px

  select:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 44px

  checkbox:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 18px
  checkbox-checked:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 18px

  radio:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    size: 18px
  radio-checked:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    size: 18px

  toggle:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-muted}"
    rounded: "{rounded.pill}"
    height: 24px
    width: 44px
  toggle-on:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"

  # ── Navigation ─────────────────────────────────────────────────────────────
  nav-bar:                        # top nav / app bar
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-primary}"
    height: 64px
    padding: 0 32px
  nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  nav-item-active:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.label-lg}"

  side-nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  side-nav-item-active:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.md}"
    padding: 10px 14px

  tab:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  tab-active:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.label-lg}"

  # ── Links ──────────────────────────────────────────────────────────────────
  link:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary-hover}"
  link-visited:
    backgroundColor: "transparent"
    textColor: "{colors.primary-active}"

  # ── Tags / Chips / Badges ──────────────────────────────────────────────────
  tag:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-secondary}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  tag-priority-high:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  tag-priority-medium:
    backgroundColor: "#FFF6E5"
    textColor: "{colors.warning}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  tag-success:
    backgroundColor: "#E7F7EE"
    textColor: "{colors.success}"
    typography: "{typography.micro}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # ── Tables ─────────────────────────────────────────────────────────────────
  table-header:
    backgroundColor: "transparent"
    textColor: "{colors.text-muted}"
    typography: "{typography.label-md}"
    padding: 12px 16px
  table-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    typography: "{typography.body-sm}"
    padding: 12px 16px
  table-row-hover:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-primary}"

  # ── Alerts / Toasts ────────────────────────────────────────────────────────
  alert-info:
    backgroundColor: "#EAF2FF"
    textColor: "{colors.info}"
    rounded: "{rounded.md}"
    padding: 16px
  alert-success:
    backgroundColor: "#E7F7EE"
    textColor: "{colors.success}"
    rounded: "{rounded.md}"
    padding: 16px
  alert-warning:
    backgroundColor: "#FFF6E5"
    textColor: "{colors.warning}"
    rounded: "{rounded.md}"
    padding: 16px
  alert-error:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.error}"
    rounded: "{rounded.md}"
    padding: 16px
  toast:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.md}"
    padding: 12px 16px

  # ── Modals / Dialogs / Tooltips ────────────────────────────────────────────
  modal:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 32px
  modal-overlay:
    backgroundColor: "rgba(27,27,27,0.6)"
    textColor: "transparent"
  tooltip:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 6px 10px

  # ── Code / Pre ─────────────────────────────────────────────────────────────
  code-block:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px
  code-inline:
    backgroundColor: "{colors.surface-variant}"
    textColor: "{colors.text-primary}"
    typography: "{typography.code}"
    rounded: "{rounded.sm}"
    padding: 2px 6px

  # ── Dividers ───────────────────────────────────────────────────────────────
  divider:
    backgroundColor: "{colors.outline}"
    textColor: "transparent"
    height: 1px

  # ── Avatar ─────────────────────────────────────────────────────────────────
  avatar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.pill}"
    size: 40px

  # ── Empty State ────────────────────────────────────────────────────────────
  empty-state:
    backgroundColor: "transparent"
    textColor: "{colors.text-muted}"
    typography: "{typography.body-md}"
    padding: 48px
---

## Overview

NMG is a digital-first agency group — engineered in Gurugram, sold from Los Angeles and London — three sub-brands
sharing one DNA: **bold serif wordmark, signature red dot, warm canvas, and
restrained confidence**. The system serves three operating modes —
**`nmg.tech`** (technology and software development), **`nmg.digital`**
(SEO, paid media, and AI-search optimization), and **`nmg.ai`** (AI
products, in incubation) — under a Branded House model where the parent
`nmg.` mark anchors every sub-brand and the descriptor is set in a lighter
weight than the wordmark.

The visual language is **journalistic minimalism dressed for a boardroom**.
The page opens on a warm white canvas (`#F8F7F4`) — *The Three-Tick Warmth*, three lightness ticks below pure white. Never `#FFFFFF` for the page; the brand has temperature. Headlines are set in Montserrat 800 with
slight negative tracking, body in Inter 500 with a generous 1.7 line-height,
and a single 3-pixel red bar (`#FF0000`) sits fixed at the top of every
deliverable. That bar is the entire system's signature: a full stop at the
end of a confident sentence. The canvas, the headline, and the bar carry
the brand. Everything else is restraint.

The defining principle is **the red dot rule**: red is rare here. The dot
in the wordmark, the 3-pixel accent bar, the eyebrow above section heads,
a downtrend indicator, a single primary CTA per view — never all of them
at once. *"If everything is red, nothing is."* The less red on a page, the
more it means when it appears. This is what separates NMG from "loud"
brands — discipline, not volume.

The brand has a second signature: **the eyebrow + heading + accent-bar
section header**. Every NMG document, dashboard, and slide repeats this
three-tier pattern: a red `label-caps` eyebrow above a Montserrat 800
heading, separated from content by a 3-pixel red bar full-width. The
pattern is so identifiable that any deliverable using it reads as NMG
within the first second of viewing.

Elevation is **paper, not glass**. Single-layer gray shadows, no blue tint,
no glow, no glassmorphism, no gradient lifts. Cards lift 2 px on hover —
never 4, never with color shift. The visual signature lives in typography
and the red dot — never in elevation.

### Origins — Indian craft, journalistic minimalism, global agency

The NMG brand is the fusion of three traditions. The **red dot** in the
wordmark is not punctuation; it's a *bindu* — the Indian sacred mark of
intention, applied with deliberate precision. The **warm white canvas
`#F8F7F4`** is the cream of Jaipur stucco, not the antiseptic white of
Silicon Valley. The **type system** (Montserrat + Inter) is Western
journalistic minimalism — broadsheet weight, bookish line-height, designed
to be read.

Operationally, NMG is **tri-continental**: design and engineering ship
from **Gurugram** (India's National Capital Region tech corridor), and
sales presence runs from **Los Angeles** (US) and **London** (UK / EMEA).
That footprint matters because it places NMG between two design
traditions — Indian craft and Western tech — and stops the brand from
trying to "look Silicon Valley." NMG looks like itself.

This is the only catalog brand that is **DESIGN.md-native** (designed
from day one to be machine-readable), **tri-continental** (Gurugram
delivery + LA/London sales), and **built for agency deliverables, not
just web UI**. That combination is the moat.

**Key Characteristics:**
- **Single-color brand accent** — `#FF0000` (NMG Red) is the only chromatic
  signal; tertiary coral (`#F3724F`) only appears in data viz.
- **Warm white canvas** (`#F8F7F4`) — never `#FFFFFF`. The brand has
  temperature.
- **Dual-font system** — Montserrat 800 for display/headings, Inter 500 for
  body and UI. Two fonts, no exceptions.
- **Restraint principle** — one red element per view. The accent bar, an
  eyebrow, one CTA, the dot — never more than one at the same time.
- **Eyebrow + heading + accent bar** — the most ownable section-header
  pattern in the system. Reuse everywhere.
- **The Aligned Data Doctrine — Tabular numerals everywhere data lives** — `font-feature-settings:
  "tnum" 1, "lnum" 1` on tables, KPI cards, charts, and data viz.
- **Elevation is paper** — single-layer gray shadows, no glass, no glow.
- **First-class dark mode** — `#1A1A1F` canvas, `#F8F7F4` text.
- **Iconography is line-only** — Lucide or Phosphor at 1.5 px stroke,
  20 px default. Never filled, never duotone.
- **Strict 4 px base spacing scale** — never raw numbers in CSS.

---

## Colors

A unified palette shared across all three sub-brands. The system has
exactly **one** brand accent (NMG Red) plus a tertiary warm color (Coral)
reserved for data visualization. Everything else is neutrals, semantic
status, and dark-mode equivalents.

### Brand Anchor

- **NMG Red** (`{colors.primary}` `#FF0000`): The brand's only chromatic
  signal. Used once per view — the dot in the wordmark, the 3-pixel top
  accent bar, the eyebrow label, a downtrend indicator, or the single
  primary CTA. A pure declarative red — no orange undertone, no pink shift
  — because the brand's restraint depends on the color being unmistakable.
- **Red Hover** (`{colors.primary-hover}` `#CC0000`): Hover state for any
  red interactive element. 80% the lightness, retains the saturation.
- **Red Active** (`{colors.primary-active}` `#AA0000`): Pressed state.
- **Red Soft** (`{colors.primary-soft}` `#F9D9D7`): Backgrounds for
  high-priority warning rows and subtle red tints. Never paired with red
  text below 14 px.
- **Red Ghost** (`{colors.primary-ghost}` `#FFF0F0`): Hover ghost
  background for outline buttons.

### Grounding Neutrals

- **Near Black** (`{colors.secondary}` `#1B1B1B`): Primary text on light
  backgrounds. The text color, not the canvas. A near-black with a faint
  warm tint — never `#000000`, which would feel cold against the warm white.
- **Warm White** (`{colors.background}` `#F8F7F4`): The page canvas. Three
  ticks below pure white in luminance — enough to read as warm without
  appearing yellowed. The brand's most copy-able single decision.
- **Pure White** (`{colors.surface}` `#FFFFFF`): Card surface only. The
  page is warm white; cards lift to pure white. This 3-percent contrast is
  what makes cards feel like paper without needing heavy shadows.
- **Surface Variant** (`{colors.surface-variant}` `#F0EFEC`): Muted
  surfaces — code blocks, disabled states, hovered table rows.

### Text Scale

- **Text Primary** (`{colors.text-primary}` `#1B1B1B`): Headings, body,
  active nav.
- **Text Secondary** (`{colors.text-secondary}` `#5A5862`): Descriptions,
  metadata, secondary nav.
- **Text Muted** (`{colors.text-muted}` `#8A8892`): Captions, axis labels,
  small print.

### Borders & Outlines

- **Outline** (`{colors.outline}` `#E6E4DF`): Standard 1 px borders for
  cards, dividers, table separators.
- **Outline Strong** (`{colors.outline-strong}` `#D4D1CB`): Heavier
  separation for grouped controls.
- **Outline Focus** (`{colors.outline-focus}` `#FF0000`): Focus rings.
  Always 2 px solid red with 2 px offset. Never remove.

### Tertiary Accent

- **Coral** (`{colors.tertiary}` `#F3724F`): Warm secondary for data
  visualization only. Never replaces red as the brand accent. Pairs well
  with red in charts because the hue is far enough away to be
  distinguishable.

### Semantic / Status

- **Success Green** (`{colors.success}` `#16A34A`): Positive trends,
  growth indicators, success badges. Fill / icon use only on light
  backgrounds (3.08:1 contrast — fails AA Large for body text).
- **Warning Amber** (`{colors.warning}` `#F59E0B`): Caution, attention
  needed. Fill / icon only.
- **Info Blue** (`{colors.info}` `#3B82F6`): Informational alerts, links
  in chart contexts. Fill / icon only on light backgrounds.
- **Error** (`{colors.error}` `#FF0000`): Routes to NMG Red. Stays distinct
  from `primary` in usage — error is feedback, primary is action.

### Data Visualization (ordered)

Use in this exact order — never recolor at random.

1. **chart-1** `#FF0000` — primary metric (the one that matters most).
2. **chart-2** `#F3724F` — secondary metric.
3. **chart-3** `#3B82F6` — tertiary.
4. **chart-4** `#16A34A` — quaternary.
5. **chart-5** `#8B5CF6` — quinary.
6. **chart-6** `#F59E0B` — senary.

If a chart needs more than six series, **collapse the data** — don't add a
seventh color.

### Dark Mode (first-class)

| Element | Light | Dark |
|---|---|---|
| Page background | `{colors.background}` (`#F8F7F4`) | `{colors.dark-background}` (`#1A1A1F`) |
| Card surface | `{colors.surface}` (`#FFFFFF`) | `{colors.dark-surface}` (`#242428`) |
| Surface variant | `{colors.surface-variant}` (`#F0EFEC`) | `{colors.dark-surface-variant}` (`#2C2C32`) |
| Primary text | `{colors.on-background}` (`#1B1B1B`) | `{colors.dark-on-background}` (`#F8F7F4`) |
| Secondary text | `{colors.text-secondary}` (`#5A5862`) | `{colors.dark-text-secondary}` (`#C8C5BE`) |
| Outline | `{colors.outline}` (`#E6E4DF`) | `{colors.dark-outline}` (`#33323A`) |
| Brand accent | `{colors.primary}` (`#FF0000`) | `{colors.primary}` (`#FF0000`) — unchanged |

Implement via `[data-theme="dark"]` swap. The brand red, success, warning,
and info colors stay constant across themes.

### Accessibility (WCAG 2.1 AA)

| Pair | Actual Ratio | Verdict |
|---|---|---|
| `secondary` on `background` | 16.1:1 | ✓ AAA |
| `on-secondary` on `secondary` | 16.1:1 | ✓ AAA |
| `primary` on `background` | 3.7:1 | AA Large only |
| `primary` on `dark-background` | 4.3:1 | AA Large only |
| `text-secondary` on `background` | 6.5:1 | ✓ AA |
| `text-muted` on `background` | 3.3:1 | AA Large only |

**Rule:** NMG Red is for eyebrow labels (11 px bold), accents, and large
text only — never body copy on light backgrounds where it falls below
4.5:1. **Coral, Warning, Success, and Info** are fill / icon / chart
colors only — never body or button text on light backgrounds (they
fall below AA Large).

---

## Typography

A dual-font system: **Montserrat** for display and headings, **Inter** for
body and UI. Both are open-source Google Fonts with excellent screen
rendering. No third font, no exceptions.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800;900&display=swap"
  rel="stylesheet"
>
```

### Hierarchy

| Role | Font | Size (px / rem) | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| `display-lg` | Montserrat | 64 / 4.0 | 900 | 1.05 | -0.025em | Hero headlines, marketing one-liners |
| `display-md` | Montserrat | 48 / 3.0 | 800 | 1.10 | -0.020em | Slide titles for dark presentations |
| `display-sm` | Montserrat | 40 / 2.5 | 800 | 1.10 | -0.020em | Section heroes |
| `headline-lg` | Montserrat | 36 / 2.25 | 800 | 1.15 | -0.020em | H1 — page titles |
| `headline-md` | Montserrat | 24 / 1.5 | 700 | 1.30 | -0.010em | H2 — section heads |
| `headline-sm` | Montserrat | 18 / 1.125 | 700 | 1.40 | 0 | H3 — subsections |
| `title-lg` | Montserrat | 16 / 1.0 | 700 | 1.40 | 0 | Card titles |
| `title-md` | Inter | 14 / 0.875 | 600 | 1.45 | 0 | Section subtitles |
| `body-lg` | Inter | 17 / 1.0625 | 500 | 1.70 | 0 | Long-form articles |
| `body-md` | Inter | 15 / 0.9375 | 500 | 1.70 | 0 | Default body |
| `body-sm` | Inter | 13 / 0.8125 | 500 | 1.60 | 0 | Captions, helper text |
| `label-lg` | Inter | 14 / 0.875 | 600 | 1.00 | +0.010em | Button text |
| `label-md` | Inter | 12 / 0.75 | 600 | 1.20 | +0.040em | Form labels, table headers |
| `label-caps` | Inter | 11 / 0.6875 | 700 | 1.00 | **+0.180em** | **The eyebrow — NMG signature** |
| `micro` | Inter | 10 / 0.625 | 600 | 1.00 | +0.060em | Badges, tags, footnotes |
| `kpi-number` | Montserrat | 36 / 2.25 | 800 | 1.05 | -0.020em | The big metric on dashboards |
| `code` | JetBrains Mono | 13 / 0.8125 | 500 | 1.60 | 0 | Code blocks |

### OpenType Features

NMG enables specific OpenType features deliberately:

```css
/* Always — applies to all text */
font-feature-settings: "kern" 1, "calt" 1, "liga" 1;

/* Numbers — applies to .kpi-card, table, .chart-label, .data-viz */
font-feature-settings: "tnum" 1, "lnum" 1;
```

- **`tnum`** (tabular numerals) — locked column widths so numbers align
  vertically in tables, KPI cards, and charts. Non-negotiable for any
  data display.
- **`lnum`** (lining figures) — modern UI numerals at consistent height.
- **`kern`** (kerning) — always on.
- **`calt`** / **`liga`** — contextual alternates and standard ligatures
  on by default for both Inter and Montserrat.

### Principles

1. **Two fonts, never three.** Display = Montserrat, Body = Inter.
   Anything else dilutes the brand.
2. **Weight is hierarchy.** 800 for display, 700 for headings, 600 for
   labels and buttons, 500 for body. No 400, no 900 except `display-lg`.
3. **Tracking pulls negative on display, neutral on body.** Headlines feel
   tighter and more confident at -0.02em. Body stays at 0 for readability.
4. **The eyebrow is `label-caps` only.** 11 px Inter 700 with 0.18em
   tracking, uppercase, in `{colors.primary}`. This is the most ownable
   typographic primitive in the system.
5. **Tabular numerals everywhere data lives.** `font-feature-settings:
   "tnum" 1, "lnum" 1` on tables, KPI cards, charts. Without this,
   columns of numbers look loose.
6. **Line-height 1.7 on body.** Generous, journalistic, easy on the eye.
   Never compress to 1.5 to fit more content.

### Header Pattern (NMG-defining)

```
EYEBROW — RED                       ← label-caps, +0.18em, uppercase
Section Heading                     ← headline-lg or headline-md, Montserrat 800
─────────────                       ← 3 px red accent bar
Body copy in Inter 500.
```

This three-tier pattern is the brand's most copy-able UI primitive.
Reuse everywhere — pitch decks, monthly reports, dashboards, blog posts,
proposals, email signatures.

---

## Layout

### Spacing — 4 px base

Use only the named scale. Never write raw `13px` or `20px`. The system
depends on rhythm; rhythm depends on consistency.

| Token | Value | Use |
|---|---|---|
| `xs` | 4 px | Tight gaps, inline icon margins |
| `sm` | 8 px | Icon gaps, small padding |
| `md` | 16 px | Card padding (compact), form gaps |
| `lg` | 24 px | Section padding, card gaps (standard) |
| `xl` | 32 px | Large section padding |
| `2xl` | 48 px | Page section spacing |
| `3xl` | 64 px | Major section dividers |
| `4xl` | 96 px | Hero break breathing room |
| `page` | 48 px | Page side padding (web) |
| `page-mobile` | 20 px | Page side padding (mobile) |

### Grid

| Breakpoint | Min width | Columns | Gutter | Margin |
|---|---|---|---|---|
| sm | 0 | 4 | 16 px | 20 px |
| md | 768 px | 8 | 20 px | 32 px |
| lg | 1024 px | 12 | 24 px | 48 px |
| xl | 1440 px | 12 | 24 px | 64 px |

- **Max content width:** 1200 px (web), 1280 px (slides).
- **Card grid gap:** 24 px standard, 16 px tight, 32 px spacious.

### Page Anatomy

1. **Accent bar** (`accent-bar` component) — 3 px fixed at top, full
   width, `{colors.primary}`.
2. **Top nav** — 64 px tall, transparent over canvas, sticky on scroll.
3. **Content** — max-width 1200 px, centered, with `{spacing.page}` side
   padding (48 px web / 20 px mobile).
4. **Footer** — `nmg.` mark, links, small print in `body-sm`.

### Density

- **Comfortable** is the default — 44 px control height, 24 px card padding.
- **Compact** for data-dense dashboards — 36 px controls, 16 px card padding.
- Never go below 32 px control height — breaks touch targets.

### Motion

| Token | Duration | Easing | Used for |
|---|---|---|---|
| `motion-fast` | 150 ms | ease-out | Hover, focus rings, micro-interactions |
| `motion-base` | 250 ms | ease-out | Card transforms, color transitions |
| `motion-slow` | 400 ms | ease-out | Page transitions, large reveals, modals |

Respect `prefers-reduced-motion: reduce` and disable any non-essential
transforms. Color and opacity transitions may remain.

---

## Elevation & Depth

NMG elevation follows **The Paper Standard** — paper, not glass. Single-layer, gray-only shadows.
No blue tint, no glow, no glassmorphism, no gradient-lifted surfaces. The
brand reads premium because elevation is restrained — a card lifts 2 px on
hover, never 4, never with color shift. The visual signature lives in
typography and the red dot — not in atmospheric depth.

| Token | Shadow | Used for |
|---|---|---|
| `elev-0` | none | Page background, dividers |
| `elev-1` | `0 1px 3px rgba(0,0,0,0.06)` | Subtle separation, table rows |
| `elev-2` | `0 2px 6px rgba(0,0,0,0.04)` | Cards, inputs (default) |
| `elev-3` | `0 8px 24px rgba(0,0,0,0.08)` | Hover lift, popovers, dropdowns |
| `elev-4` | `0 16px 48px rgba(0,0,0,0.12)` | Modals, toasts, command palettes |

In dark mode, multiply alpha by 1.5× (e.g. `0 2px 6px rgba(0,0,0,0.10)`)
to compensate for reduced contrast against dark surfaces.

**Focus ring:** always 2 px solid `{colors.primary}` with 2 px offset.
Never remove. This is non-negotiable for keyboard accessibility.

---

## Shapes

Corner radius is the silent dialect of the brand: **soft, never round**.

| Token | Value | Used for |
|---|---|---|
| `{rounded.none}` | 0 px | Accent bar, dividers, full-bleed art |
| `{rounded.sm}` | 4 px | Tags, micro-controls, table cells |
| `{rounded.md}` | 8 px | Buttons, inputs, alerts |
| `{rounded.lg}` | 12 px | Cards, modals, KPI panels |
| `{rounded.xl}` | 16 px | Hero panels, marketing cards |
| `{rounded.pill}` | 9999 px | Avatars, status chips, toggles |

Never round buttons or cards above `xl`. Heavy rounding reads as casual;
NMG is not casual.

---

## Components

Refer to the YAML `components:` block above for every token. This section
explains intent, composition rules, and the rationale behind each major
primitive. Variants (hover, active, disabled, focus) live as separate
component entries per Stitch spec.

### Buttons — The Restraint Rule

Use **exactly one** `button-primary` per view. All other actions become
`button-secondary` (NMG Black), `button-outline`, or `button-ghost`. Hover
lifts (translate −1 px) and applies the hover color token. Focus shows a
2 px red ring with 2 px offset. The single red CTA is always the most
important action — never duplicate.

### Cards

12 px radius, surface bg, 1 px outline border, `elev-2` shadow. On hover,
border tints toward `primary` at 30% alpha and lifts to `elev-3`. Cards
never carry shadows heavier than `elev-3` unless they are floating panels
(then use `modal` instead).

### The NMG Section Stack — Eyebrow + Heading + Accent Bar

Whenever you compose a content section, use this exact stack:

1. `eyebrow` (uppercase, red, +0.18em tracking, 11 px Inter 700)
2. `headline-lg` or `headline-md` (Montserrat 800)
3. 3 px `accent-bar` (full-width, `{colors.primary}`)
4. body content

This pattern is the brand's most copy-able UI primitive. Reuse everywhere.

### KPI cards

`kpi-label` (label-caps, muted) above a `kpi-number` (Montserrat 36 px /
800) with `kpi-delta-positive` (success green ▲) or `kpi-delta-negative`
(error red ▼) underneath. Always include the comparison window
("vs. last month").

### Forms

Inputs are 44 px tall, 8 px radius, 1 px outline. Focus replaces outline
with `primary` and adds a 3 px soft ring (`primary` @ 10%). Errors use
`input-error` with a `body-sm` helper line in `error`. Disabled uses
`surface-variant` background and `text-muted` text.

### Tables

Bottom-border-only rows; no zebra striping. Header uses `table-header`
token (uppercase, muted, tracked). Numbers right-aligned with tabular
figures. Sortable columns show a small caret in `text-muted`.

### Tags / chips

Use sparingly — one priority chip per row maximum. Status colors map to
semantic tokens (`success`, `warning`, `error`); never reach for raw hex
in chip styling.

### Iconography

- **Library:** Lucide (preferred) or Phosphor — both line-style, 1.5 px
  stroke, rounded joins.
- **Default size:** 20 px in body, 16 px in tight UI, 24 px on touch
  targets.
- **Color:** inherits `currentColor`. Default `text-muted`; primary
  actions use `primary`; never apply rainbow colors.
- Avoid filled or duotone icons except for the red dot motif itself.

### Photography & illustration — *Data, but warm.* (named pattern)

The NMG photographic style is a named pattern: **Data, but warm.** Three
hard rules:

1. **One imperfect red circle per dashboard.** Every screenshot of data
   (KPI cards, tables, charts) gets exactly one **hand-drawn red
   annotation circle** — slightly rotated (-3°), slightly skewed,
   intentionally imperfect, like a print editor's red pen drew it.
   Points to the most important number. One per image, never two.
2. **Every screenshot in a warm-white card.** 12 px border radius, 1 px
   `outline` border, subtle `elev-2` shadow. The screenshot floats;
   never bleeds to edge. Data is technical; framing is editorial.

These two rules together = "Data, but warm." It's the photographic
equivalent of The NMG Section Stack: a named visual move that's instantly
recognisable as NMG.

- Real screenshots, real dashboards, real people — never stock
  "team-with-laptops".
- Crop with 12 px border-radius and a 1 px `outline` border.
- Illustration, when used, is **mono-line in `secondary` with one red
  accent dot**. Never multi-color illustration. Never gradients.

### Charts

- Always label axes; always include units.
- Primary series uses `chart-1`; subsequent series follow the ordered
  palette.
- Use `chart-grid` for gridlines and `chart-axis` for axis labels.
- Tooltips use the `tooltip` component.
- Line charts: 2 px stroke, no fill unless area-chart by intent.

### Email signature

4 px red bar at top, name in Montserrat 700, role + contact in Inter 500.
Black text only. No images embedded (clip risk in Outlook/Gmail).

---

## Deliverable Templates

NMG ships more than web UI. The agency's actual outputs are pitch decks,
monthly client reports, dashboards, proposals, email signatures, and
social posts. This section gives AI agents skeleton structures (token
references only) for each format, so a single prompt can produce a
pixel-perfect NMG deliverable.

### Pitch Deck Slide (PPTX, 1280 × 720)

```
- 4px {colors.primary} bar at top, full-width
- {typography.label-caps} eyebrow in {colors.primary} (max 30 chars)
- {typography.display-md} headline in {colors.text-primary}
- 3px {colors.primary} accent bar separator
- Body in {typography.body-lg}, color {colors.text-secondary}
- One {component.button-primary} CTA, bottom-right
- nmg. logo bottom-left at 28px height
- Background: {colors.background} (light slides) OR {colors.dark-background} (dark slides)
- One red element per slide. Never more.
```

### Monthly Client Report (HTML / PDF)

```
- 3px {colors.primary} accent bar fixed at top
- nmg.digital logo top-left at 32px height
- {typography.label-caps} eyebrow "MONTHLY REPORT" in {colors.primary}
- {typography.headline-lg} report title (e.g., "Organic Growth Engine")
- {typography.body-md} description with client name + reporting period
- Grid of 4 {component.kpi-card} entries with {component.kpi-label} + KPI number + {component.kpi-delta-positive/negative}
- 12-month trend chart using {colors.chart-1} for primary metric
- Top-pages table using {component.table-header} + {component.table-row}
- Footer: nmg.digital · Gurugram · Los Angeles · London
- Single {component.button-primary} "View Full Report" CTA
```

### KPI Dashboard (Web, ≥1200px)

```
- 3px {colors.primary} accent bar at top
- {component.nav-bar} with logo + nav-items (Overview, Keywords, Backlinks, Competitors, Settings)
- {component.search} bar in nav-bar right
- 4-column grid of {component.kpi-card} with tabular numerals (font-feature-settings: 'tnum' 1, 'lnum' 1)
- 12-month line chart using {colors.chart-1} primary, {colors.chart-2} comparison
- {component.table-row} list of top pages, sortable
- {component.tab} row for Overview / Keywords / Backlinks / Content sections
- Dark mode = swap {colors.background} → {colors.dark-background}, {colors.surface} → {colors.dark-surface}
```

### Proposal Document (DOCX, A4)

```
- 3px {colors.primary} header rule at top of every page
- nmg.digital or nmg.tech logo top-right at 28px height
- {typography.label-caps} eyebrow "SEO STRATEGY PROPOSAL" in {colors.primary}
- {typography.display-md} title (e.g., "Organic Growth Engine for {ClientName}")
- {typography.body-md} body throughout, line-height 1.7
- Section headers use The NMG Section Stack
- Tables use {component.table-header} + {component.table-row}, bottom-border-only rows
- Page footer: nmg. logo + page number + "Prepared by NMG Digital · Gurugram · Los Angeles · London"
- Cover page background: {colors.background}, never pure white
```

### Email Signature (HTML)

```
- 4px {colors.primary} bar at top
- Sender name in {typography.title-lg}, {colors.text-primary}
- Role + sub-brand line: "[Role] · nmg.digital — [tagline]"
- Contact block in {typography.body-sm}, {colors.text-secondary}
- Phone, email, website
- Tagline: "Engineered in Gurugram · Sold from Los Angeles + London"
- No images embedded (clip risk in Outlook/Gmail). Pure HTML + system font fallback.
- Single {colors.primary} link color throughout. No CTAs in signatures.
```

### Social Post — Square (1080 × 1080)

```
- {colors.dark-background} #1A1A1F canvas
- {typography.label-caps} eyebrow in {colors.primary}, top-left
- {typography.display-md} headline in {colors.dark-on-background}, max 4 lines
- {typography.body-md} subhead in {colors.dark-text-secondary}, max 2 lines
- nmg. or sub-brand logo bottom-left at 32px height
- Optional: one large red dot or red statistic as the sole red element
- Margins: 64px all sides
- One red element only. Restraint = brand.
```

### Social Post — Landscape (1200 × 627, LinkedIn)

```
- Same composition as square, with horizontal rebalancing:
- Eyebrow + headline left-aligned, occupying left 60%
- Optional product screenshot or KPI graphic right 40%
- Logo + URL in bottom-left
- Always {colors.dark-background} or {colors.background} — no gradients
```

### Social Post — Story (1080 × 1920)

```
- Vertical extension of the Square format
- Eyebrow + headline upper third
- Body / KPIs middle third
- CTA + logo lower third
- Optional: animated red dot pulse 200ms ease-out at the eyebrow position (motion-fast)
```

---

When generating any of the above, the agent should follow The Restraint
Rule (one red per view), use The NMG Section Stack for headers, apply
The Three-Tick Warmth (`#F8F7F4` canvas, never pure white), and respect
The Aligned Data Doctrine (tabular numerals on every column of numbers).

## Do's and Don'ts

### Do

- **Do** start every deliverable with the 3 px `accent-bar` at the top.
- **Do** use the warm white canvas (`{colors.background}` `#F8F7F4`) —
  never `#FFFFFF` for the page.
- **Do** use one `button-primary` per view; everything else is secondary,
  outline, or ghost.
- **Do** lead headings with an `eyebrow` (red, uppercase, tracked).
- **Do** show real numbers, real screenshots, and real people.
- **Do** respect `prefers-reduced-motion` and `prefers-color-scheme: dark`.
- **Do** keep tabular figures aligned in tables and KPI cards
  (`font-feature-settings: "tnum" 1, "lnum" 1`).
- **Do** maintain WCAG AA contrast at minimum on all text.
- **Do** treat the red dot as sacred — `#FF0000`, never recolored.
- **Do** keep elevation flat — single-layer gray shadows only.

### Don't

- **Don't** stack the wordmark — `nmg.` and the descriptor stay on one line.
- **Don't** use red for body copy, large fills, or multiple elements per
  view.
- **Don't** apply gradients, textures, or noise to surfaces. The cinematic
  particle hero is the only exception, and only on marketing landings.
- **Don't** distort, recolor, rotate, or shadow the logo.
- **Don't** invent colors outside the token set. If a chart needs a 7th
  series, collapse — don't add a token.
- **Don't** use stock-photo clichés (busy "diverse business team",
  abstract blockchain glow, etc.).
- **Don't** use exclamation marks, emojis, or hype words ("revolutionary",
  "unleash") in client-facing docs.
- **Don't** ship a screen without a focus ring on interactive elements.
- **Don't** ship a chart without axis labels, units, and a legend.
- **Don't** exceed `rounded.xl` on buttons or cards. NMG is poised, not
  rounded.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key changes |
|---|---|---|
| Mobile | < 640 px | Single column; display-lg scales 64 → 36 px; nav collapses to hamburger |
| Tablet | 640–1024 px | 2-column grids; moderate padding; KPI cards 2-up |
| Desktop | 1024–1280 px | 3–4 column feature grids; full layout |
| Large Desktop | > 1280 px | Centered content with generous margins; max content 1200 px |

### Touch Targets

- Buttons hold ≥ 44 px tap height across viewports (12 px vertical padding).
- Navigation links sit at 14 px with 8–12 px horizontal padding.
- Tags / chips have ≥ 6 px horizontal padding minimum for tap targets.
- Form inputs hold a 44 px tap target on touch devices.
- Mobile nav toggle uses an 8 px radius button at 44 px square.

### Collapsing Strategy

- **Top nav:** horizontal links → hamburger toggle below 768 px.
- **KPI cards:** 4-up → 2-up at 1024 px → 1-up below 640 px.
- **Feature cards:** 3-up → 2-up at 1024 px → 1-up below 768 px.
- **Tables:** bottom-border-only rows scroll horizontally on mobile (no
  cell stacking — preserves row alignment).
- **Hero typography:** `display-lg` 64 px → `display-md` 48 px → 36 px
  scaling across breakpoints. Negative letter-spacing relaxes
  proportionally.
- **Section spacing:** `{spacing.4xl}` (96 px) → `{spacing.2xl}` (48 px)
  on mobile.
- **Pricing / comparison tables:** become per-tier accordion below 768 px.

### Image Behavior

- Dashboard / product screenshots maintain their 12 px border-radius and
  1 px outline border at all sizes. Never crop them.
- Logo PNGs scale by aspect ratio; minimum displayed width 70 px (digital)
  or 20 mm (print).
- The cinematic particle hero on the homepage simplifies on mobile —
  fewer particles, shorter animation duration.
- Customer logos in marquee bands collapse from 6-up to 3-up below 768 px.
- Code blocks maintain `JetBrains Mono` treatment and may scroll
  horizontally rather than wrap.

---

## Iteration Guide

The single most important section for AI agents. Quick references and
ready-to-paste prompts that turn any LLM into an NMG-fluent designer in
one prompt.

### Quick Color Reference

```
Primary CTA:        NMG Red          #FF0000
CTA Hover:          Red Dark         #CC0000
Page Background:    Warm White       #F8F7F4   (never pure white)
Card Surface:       Pure White       #FFFFFF
Heading Text:       Near Black       #1B1B1B
Body Text:          Slate            #5A5862
Muted Text:         Light Slate      #8A8892
Border:             Outline          #E6E4DF
Eyebrow / Accent:   NMG Red          #FF0000
Focus Ring:         NMG Red          #FF0000   (2px solid + 2px offset)
Dark Page BG:       Dark Canvas      #1A1A1F
Dark Card Surface:  Dark Surface     #242428
Success (▲):        Green            #16A34A
Error (▼):          NMG Red          #FF0000
Coral (data viz):   Coral            #F3724F
```

### Example Component Prompts

Five ready-to-paste prompts AI agents can use as templates. All use NMG
tokens and all follow the restraint principle.

**1. Hero section (warm white)**
> *"Create a hero section on `#F8F7F4` warm-white background. Above the
> headline, a red eyebrow label `MONTHLY REPORT` in Inter 700 11 px with
> 0.18em letter-spacing, color `#FF0000`. Headline `Organic Growth Engine`
> in Montserrat 800 36 px, line-height 1.15, letter-spacing -0.02em,
> color `#1B1B1B`. Below the headline, a 3 px red bar full-width, then
> body in Inter 500 15 px, color `#5A5862`, line-height 1.7. One primary
> CTA `View Full Report` (background `#FF0000`, white text, 8 px radius,
> 12 px × 24 px padding, Inter 600 14 px). One CTA only."*

**2. KPI card**
> *"Build a KPI metric card. White `#FFFFFF` background, 12 px border
> radius, 1 px solid `#E6E4DF` border, padding 20 px × 24 px. Eyebrow
> label `ORGANIC SESSIONS` in Inter 700 11 px, color `#8A8892` (muted),
> letter-spacing 0.15em, uppercase. Big number `142K` in Montserrat 800
> 36 px, color `#1B1B1B`, with `font-feature-settings: 'tnum' 1, 'lnum' 1`
> for tabular alignment. Below the number, a delta line `▲ 23% vs last
> month` in Inter 600 12 px, color `#16A34A` (success green) for positive
> trends or `#FF0000` for negative."*

**3. Data table**
> *"Build a data table with bottom-border-only rows (no zebra striping).
> Header in Inter 600 12 px, color `#8A8892` (muted), uppercase,
> letter-spacing 0.04em, padding 12 × 16 px. Rows in Inter 500 13 px,
> color `#1B1B1B`, padding 12 × 16 px, bottom border 1 px solid `#E6E4DF`.
> Numbers right-aligned with tabular figures (`font-feature-settings:
> 'tnum' 1`). On hover, row background shifts to `#F0EFEC`."*

**4. Section header (the NMG signature pattern)**
> *"Create a section header using NMG's three-tier pattern: (1) eyebrow
> label `SEO AUDIT • TECHNICAL HEALTH` in Inter 700 11 px, color `#FF0000`,
> letter-spacing 0.18em, uppercase; (2) heading `Technical Health Score`
> in Montserrat 800 36 px, color `#1B1B1B`, line-height 1.15; (3) a 3 px
> red bar `#FF0000` full-width separating header from content."*

**5. Dark-mode dashboard panel**
> *"Build a dashboard panel in dark mode. Background `#1A1A1F`, card
> surface `#242428` with 12 px radius, 1 px solid `rgba(255,255,255,0.06)`
> border. Eyebrow label in `#FF0000`, headings in `#F8F7F4`, body in
> `#C8C5BE`. Single primary CTA in NMG Red. Maintain the 3 px red accent
> bar at the very top. Same restraint principle — one red element per
> view."*

### Iteration Rules (brand DNA reminders)

1. **Run the linter after every edit.** `npx @google/design.md lint
   DESIGN.md` catches broken token references and contrast failures.
2. **Default body to `{typography.body-md}`** at weight 500. Use
   `body-lg` only for long-form articles.
3. **Default radius to `{rounded.md}`** for buttons and `{rounded.lg}`
   for cards. Use `{rounded.pill}` only for avatars and status chips.
4. **Add new component variants as separate `components:` entries** with
   the `-hover`, `-active`, `-focus`, or `-disabled` suffix. Never inline
   pseudo-classes in the YAML.
5. **Treat NMG Red as scarce.** Brand mark, accent bar, eyebrow, focus
   ring, ONE primary CTA. Never multiple red elements at once.
6. **Always enable tabular numerals** (`font-feature-settings: "tnum" 1,
   "lnum" 1`) on tables, KPI cards, and charts. Without this, columns of
   numbers look loose.
7. **Lead every section with the eyebrow + heading + accent-bar pattern.**
   This is the most ownable brand primitive — use it as the default.
8. **Reference tokens directly in prompts** — say `{colors.primary}`, not
   "red". Tokens survive theme switches; raw hex doesn't.

---

## Known Gaps

Honest list of what's NOT yet captured in this spec. AI agents reading
this section should ask before inventing tokens for these scenarios.

- **Animation library beyond fast/base/slow.** Specific entrance,
  exit, and transition curves for interactive moments (toast slide-in,
  modal fade, dropdown reveal) are not formalized as tokens — agents
  should default to `motion-base` (250 ms ease-out).
- **Marketing-hero gradient permissions.** The cinematic particle hero
  on the homepage is the only place gradients are allowed. Specific
  gradient hex values, particle count, and motion curves are not tokenized
  — they're handled in bespoke marketing CSS.
- **Mobile-specific dark mode shifts.** Dark mode tokens are documented,
  but any mobile-specific dark adaptations (e.g., reduced shadow alpha
  for small screens) are not yet captured.
- **Localization considerations.** NMG operates from Gurugram, India (delivery) with sales offices in Los Angeles and London and
  serves English-language clients globally. Brand voice rules and
  typography guidance for Hindi or other regional languages are not yet
  documented.
- **Form validation success state.** Error state is captured (`input-error`
  + helper line). A "success" state for validated form fields (e.g., a
  green check icon with success-tinted border) is not yet tokenized.
- **Print-specific tokens.** Print stylesheet conventions (CMYK
  equivalents for NMG Red, print-safe paper colors, dpi-aware logo sizing)
  are not part of this spec — print artwork is handled in InDesign.
- **Email-template-specific dark variants.** Most email clients don't
  reliably support `prefers-color-scheme`. Email signatures and
  newsletter templates use a fixed light treatment until cross-client
  dark-mode support stabilizes.

---

> _"The red dot is not decoration. It is the only colour that speaks for us.
> Used once. Used with intent. Never repeated. Never wasted."_
>
> — NMG Brand Manifesto, v3.15

<!--
  Source: nmg-brand-guidelines.netlify.app (v3.15, May 2026).
  Format: Google DESIGN.md (alpha) — https://github.com/google-labs-code/design.md
  Modernized & gap-filled: 2026-05-06.
  Pattern: Stitch-Canonical Extended (11 sections) — matches Linear, Notion,
  Apple, Framer best-in-class structure from voltagent/awesome-design-md.
-->

Primary CTA:        NMG Red          #FF0000
CTA Hover:          Red Dark         #CC0000
Page Background:    Warm White       #F8F7F4   (never pure white)
Card Surface:       Pure White       #FFFFFF
Heading Text:       Near Black       #1B1B1B
Body Text:          Slate            #5A5862
Muted Text:         Light Slate      #8A8892
Border:             Outline          #E6E4DF
Eyebrow / Accent:   NMG Red          #FF0000
Focus Ring:         NMG Red          #FF0000   (2px solid + 2px offset)
Dark Page BG:       Dark Canvas      #1A1A1F
Dark Card Surface:  Dark Surface     #242428
Success:            Green            #16A34A
Error:              NMG Red          #FF0000
Coral (data viz):   Coral            #F3724F