| کانال طراحی و رابط‌کاربری |

.spacing-4 { margin: 4px; }
.spacing-8 { margin: 8px; }
.spacing-12 { margin: 12px; }
.spacing-16 { margin: 16px; }

type / display / xl
type / headline / lg
type / title / md
type / body / md
type / label / sm

type / body / md / desktop
type / body / md / mobile

On Tap → Change To → Variant Hover
Animation: Smart Animate
Easing: Ease out
Duration: 150ms

{
  "layoutMode": "VERTICAL",
  "itemSpacing": 12,
  "paddingLeft": 16,
  "paddingRight": 16,
  "paddingTop": 16,
  "paddingBottom": 16,
  "primaryAxisAlignItems": "SPACE_BETWEEN",
  "counterAxisAlignItems": "CENTER"
}

Type = Primary
State = Enabled | Hover | Disabled
Icon  = True | False

Card Padding: 24px
Gap بین آیکن و متن: 8px
Gap بین تیتر و توضیح: 4 یا 8px
Gap بین کارت‌ها در لیست: 16 یا 24px

color / light / primary

color / light / on-primary
color / light / surface
color / light / on-surface
color / dark / primary
color / dark / on-primary
...

{
  "color": {
    "light": {
      "primary": "#6750A4",
      "on-primary": "#FFFFFF"
    },
    "dark": {
      "primary": "#D0BCFF",
      "on-primary": "#381E72"
    }
  }
}

.list-item {
  padding: 8px 16px;
}

.list-item + .list-item {
  margin-top: 8px; /* فاصله عمودی ثابت بین آیتم‌ها */
}

/* خوانایی ضعیف */
body {
  background-color: #ffffff;
  color: #bdbdbd;
}

/* خوانایی بهتر و استانداردتر */
body {
  background-color: #ffffff;
  color: #212121;
}

def luminance(r, g, b):
    c = [v / 255 for v in (r, g, b)]
    adj = [v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4 for v in c]
    return 0.2126 * adj[0] + 0.7152 * adj[1] + 0.0722 * adj[2]

def contrast_ratio(c1, c2):
    L1 = luminance(*c1)
    L2 = luminance(*c2)
    L1, L2 = max(L1, L2), min(L1, L2)
    return (L1 + 0.05) / (L2 + 0.05)

Primary:    #2962FF  (Default)
Primary:    #0039CB  (Pressed)
Primary:    rgba(41,98,255,0.12)  (Disabled bg)
Danger:     #D32F2F  (Default)
Danger:     #9A0007  (Pressed)
Text on Btn: #FFFFFF

{
  "color": {
    "primary": {
      "base": "#6750A4",
      "hover": "#5B4794",
      "disabled": "#E6E0F8"
    },
    "background": {
      "base": "#FFFBFE"
    },
    "on": {
      "primary": "#FFFFFF",
      "background": "#1C1B1F"
    },
    "error": {
      "base": "#B3261E"
    }
  }
}

// رنگ پس‌زمینه روشن
bgColor = #FFFFFF

// رنگ متن خاکستری کمرنگ (کنتراست بد)
textColorBad = #BDBDBD   // تقریبی: 2.5:1 ❌

// رنگ متن خاکستری تیره (کنتراست خوب)
textColorGood = #424242  // تقریبی: 7:1 ✅

color/primary/40
color/primary/80
color/neutral/10
color/error/60

color/primary/40
color/primary/80

bg/surface/main
bg/surface/on-primary
text/primary
text/on-primary
border/subtle

{
  "color": {
    "primary": {
      "40": { "value": "#6750A4" },
      "80": { "value": "#D0BCFF" }
    },
    "neutral": {
      "0": { "value": "#FFFFFF" },
      "10": { "value": "#1C1B1F" }
    }
  }
}

semantic/role/state/variant

مثال‌ها:
semantic/bg/default
semantic/bg/elevated
semantic/text/primary
semantic/text/secondary
semantic/border/subtle
semantic/status/error
semantic/status/error-container

{
  "theme": {
    "light": {
      "color": {
        "primary": "#6750A4",
        "on-primary": "#FFFFFF",
        "background": "#FFFBFE"
      }
    }
  }
}