---
version: alpha
name: Product Design System
description: Replace with a short description of the product or brand identity.
colors:
  primary: "#111827"
  on-primary: "#FFFFFF"
  secondary: "#4B5563"
  tertiary: "#2563EB"
  neutral: "#F9FAFB"
  surface: "#FFFFFF"
  on-surface: "#111827"
  border: "#E5E7EB"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 650
    lineHeight: 1.2
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

## Overview

Describe the specific product, audience, visual reference, interaction density, and emotional target. Prefer concrete references over generic terms.

## Colors

- **Primary** is used for core text and the strongest structural elements.
- **Secondary** is used for captions, metadata, borders, and low-emphasis controls.
- **Tertiary** is used for the primary action and focused interactive emphasis.
- **Neutral** is the page foundation.
- **Surface** is used for panels, inputs, cards, and modal content.

## Typography

Describe the type hierarchy, role of each family, weight strategy, line-height rhythm, casing, and how dense or relaxed text should feel.

## Layout

Describe grid behavior, max content width, gutters, spacing rhythm, responsive behavior, and whether the UI should feel dense, spacious, editorial, operational, playful, or utilitarian.

## Elevation & Depth

Describe how hierarchy is created: shadows, borders, tonal layers, color contrast, flat surfaces, or another strategy.

## Shapes

Describe radius usage and exceptions. State whether the system is sharp, soft, geometric, organic, or mixed.

## Components

Describe primary buttons, secondary buttons, inputs, cards, lists, tables, navigation, dialogs, tabs, chips, tooltips, and state variants that matter to the product.

## Do's and Don'ts

- Do keep token usage consistent across screens.
- Do preserve the intended hierarchy and interaction emphasis.
- Don't introduce new colors, radii, shadows, or type styles without updating this file.
- Don't use generic decorative effects that conflict with the overview.
