{ "schemaVersion": 2, "generatedAt": "2026-08-20T22:28:26.8204862+03:30", "title": "Design System: ZarinPal Merchant Analytics", "extensions": { "colorMeta": { "action-blue": { "role": "primary", "displayName": "ZarinPal Action Blue", "canonical": "#0A33FF", "tonalRamp": [ "oklch(18% 0.12 265)", "oklch(28% 0.18 265)", "oklch(40% 0.23 265)", "oklch(52% 0.27 265)", "oklch(64% 0.22 265)", "oklch(75% 0.16 265)", "oklch(86% 0.09 265)", "oklch(95% 0.035 265)" ] }, "action-blue-night": { "role": "primary", "displayName": "Night Action Blue", "canonical": "#6F8DFF", "tonalRamp": [ "oklch(18% 0.08 265)", "oklch(28% 0.12 265)", "oklch(40% 0.16 265)", "oklch(52% 0.18 265)", "oklch(64% 0.17 265)", "oklch(75% 0.14 265)", "oklch(86% 0.08 265)", "oklch(95% 0.03 265)" ] }, "action-tint-light": { "role": "neutral", "displayName": "Light Action Tint", "canonical": "#EEF1FF", "tonalRamp": [ "oklch(18% 0.025 265)", "oklch(30% 0.03 265)", "oklch(42% 0.035 265)", "oklch(55% 0.04 265)", "oklch(68% 0.04 265)", "oklch(79% 0.035 265)", "oklch(89% 0.025 265)", "oklch(96% 0.015 265)" ] }, "action-tint-night": { "role": "neutral", "displayName": "Night Action Tint", "canonical": "#202950", "tonalRamp": [ "oklch(17% 0.04 265)", "oklch(27% 0.055 265)", "oklch(39% 0.065 265)", "oklch(51% 0.07 265)", "oklch(63% 0.065 265)", "oklch(75% 0.05 265)", "oklch(86% 0.03 265)", "oklch(95% 0.015 265)" ] }, "brand-yellow": { "role": "secondary", "displayName": "ZarinPal Yellow", "canonical": "#FFD400", "tonalRamp": [ "oklch(18% 0.05 95)", "oklch(30% 0.08 95)", "oklch(42% 0.11 95)", "oklch(55% 0.14 95)", "oklch(68% 0.16 95)", "oklch(80% 0.17 95)", "oklch(89% 0.12 95)", "oklch(96% 0.05 95)" ] }, "workspace-light": { "role": "neutral", "displayName": "Cool Workspace", "canonical": "#F5F5F6", "tonalRamp": ["#202023", "#3A3A3E", "#5A5A60", "#7C7C83", "#A0A0A6", "#C3C3C8", "#E2E2E5", "#F5F5F6"] }, "surface-light": { "role": "neutral", "displayName": "White Surface", "canonical": "#FFFFFF", "tonalRamp": ["#262626", "#424242", "#626262", "#858585", "#AAAAAA", "#CECECE", "#EEEEEE", "#FFFFFF"] }, "nested-light": { "role": "neutral", "displayName": "Nested Neutral", "canonical": "#F3F4F6", "tonalRamp": ["#202125", "#3A3B40", "#595B61", "#7B7D84", "#9FA1A8", "#C2C4CA", "#E0E2E6", "#F3F4F6"] }, "ink-light": { "role": "neutral", "displayName": "Primary Ink", "canonical": "#18181B", "tonalRamp": ["#18181B", "#303034", "#4D4D52", "#6E6E74", "#929298", "#B8B8BD", "#DCDCE0", "#F5F5F6"] }, "muted-ink-light": { "role": "neutral", "displayName": "Muted Ink", "canonical": "#71717A", "tonalRamp": ["#1D1D20", "#353539", "#505057", "#71717A", "#96969D", "#BABAC0", "#DEDEE2", "#F5F5F6"] }, "border-light": { "role": "neutral", "displayName": "Cool Border", "canonical": "#E4E4E7", "tonalRamp": ["#222225", "#3D3D41", "#5D5D62", "#7F7F85", "#A2A2A8", "#C4C4C9", "#E4E4E7", "#F7F7F8"] }, "workspace-night": { "role": "neutral", "displayName": "Night Workspace", "canonical": "#101012", "tonalRamp": ["#101012", "#28282B", "#444448", "#626267", "#838388", "#A7A7AC", "#CECED1", "#F2F2F3"] }, "surface-night": { "role": "neutral", "displayName": "Night Surface", "canonical": "#19191C", "tonalRamp": ["#19191C", "#313135", "#4D4D52", "#6D6D72", "#909096", "#B5B5BA", "#DBDBDE", "#F5F5F6"] }, "ink-night": { "role": "neutral", "displayName": "Night Ink", "canonical": "#FAFAFA", "tonalRamp": ["#252525", "#414141", "#606060", "#828282", "#A6A6A6", "#CACACA", "#E8E8E8", "#FAFAFA"] }, "muted-ink-night": { "role": "neutral", "displayName": "Night Muted Ink", "canonical": "#A1A1AA", "tonalRamp": ["#202023", "#39393E", "#55555B", "#74747B", "#A1A1AA", "#BDBDC4", "#DCDCE0", "#F5F5F6"] }, "border-night": { "role": "neutral", "displayName": "Night Border", "canonical": "#3A3A3D", "tonalRamp": ["#171719", "#28282B", "#3A3A3D", "#5C5C61", "#808086", "#A6A6AB", "#CDCDD1", "#F1F1F2"] }, "success-light": { "role": "tertiary", "displayName": "Merchant Success", "canonical": "#248061", "tonalRamp": [ "oklch(18% 0.045 165)", "oklch(28% 0.07 165)", "oklch(40% 0.09 165)", "oklch(52% 0.105 165)", "oklch(64% 0.095 165)", "oklch(76% 0.075 165)", "oklch(87% 0.045 165)", "oklch(95% 0.02 165)" ] }, "warning-light": { "role": "tertiary", "displayName": "Merchant Warning", "canonical": "#8A5300", "tonalRamp": [ "oklch(18% 0.05 75)", "oklch(28% 0.08 75)", "oklch(40% 0.11 75)", "oklch(52% 0.13 75)", "oklch(64% 0.12 75)", "oklch(76% 0.09 75)", "oklch(87% 0.055 75)", "oklch(95% 0.025 75)" ] }, "danger-light": { "role": "tertiary", "displayName": "Merchant Danger", "canonical": "#C93637", "tonalRamp": [ "oklch(18% 0.065 25)", "oklch(28% 0.105 25)", "oklch(40% 0.15 25)", "oklch(52% 0.18 25)", "oklch(64% 0.16 25)", "oklch(76% 0.11 25)", "oklch(87% 0.06 25)", "oklch(95% 0.025 25)" ] }, "success-night": { "role": "tertiary", "displayName": "Night Success", "canonical": "#6FD6AE", "tonalRamp": [ "oklch(18% 0.035 165)", "oklch(28% 0.055 165)", "oklch(40% 0.075 165)", "oklch(52% 0.09 165)", "oklch(64% 0.09 165)", "oklch(76% 0.075 165)", "oklch(87% 0.045 165)", "oklch(95% 0.018 165)" ] }, "warning-night": { "role": "tertiary", "displayName": "Night Warning", "canonical": "#F3BE5B", "tonalRamp": [ "oklch(18% 0.045 80)", "oklch(28% 0.07 80)", "oklch(40% 0.10 80)", "oklch(52% 0.13 80)", "oklch(64% 0.14 80)", "oklch(76% 0.12 80)", "oklch(87% 0.07 80)", "oklch(95% 0.025 80)" ] }, "danger-night": { "role": "tertiary", "displayName": "Night Danger", "canonical": "#FF8A8B", "tonalRamp": [ "oklch(18% 0.055 25)", "oklch(28% 0.09 25)", "oklch(40% 0.13 25)", "oklch(52% 0.16 25)", "oklch(64% 0.15 25)", "oklch(76% 0.11 25)", "oklch(87% 0.06 25)", "oklch(95% 0.022 25)" ] } }, "typographyMeta": { "page-heading": { "displayName": "Page Heading", "purpose": "Routed page identity; rises from 20px to 24px at 640px." }, "section-heading": { "displayName": "Section Heading", "purpose": "Major analytics modules and methodology groups." }, "metric": { "displayName": "Metric", "purpose": "Tabular KPI values, amounts, counts, and rates." }, "body": { "displayName": "Body", "purpose": "Default Persian interface copy." }, "supporting": { "displayName": "Supporting", "purpose": "Descriptions, filters, tables, and insight summaries." }, "label": { "displayName": "Label", "purpose": "Compact controls, metadata, badges, and chart annotations." } }, "shadows": [ { "name": "surface-low", "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "purpose": "Subtle reinforcement on repeated cards, chart surfaces, and filter bars." }, { "name": "navbar-hairline", "value": "0 1px 2px rgba(0,0,0,0.03)", "purpose": "Fixed top-navbar separation only." }, { "name": "overlay-high", "value": "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)", "purpose": "Tooltips, sheets, and modal-level floating content." } ], "motion": [ { "name": "state-fast", "value": "160ms ease", "purpose": "Button tone and press feedback." }, { "name": "shell-standard", "value": "200ms ease-in-out", "purpose": "Sidebar, sheet, and compact surface transitions." }, { "name": "chart-trace", "value": "900ms cubic-bezier(0.22, 1, 0.36, 1)", "purpose": "One-time payment-history line reveal; removed under reduced motion." } ], "breakpoints": [ { "name": "kpi", "value": "600px" }, { "name": "sm", "value": "640px" }, { "name": "md", "value": "768px" }, { "name": "lg", "value": "1024px" } ] }, "components": [ { "name": "Selected Range Button", "kind": "button", "refersTo": "button-primary", "description": "Marks the active reporting period inside the compact segmented filter row.", "html": "", "css": ".ds-range-selected { min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); font:500 12px/1.5 IRANYekanX,Tahoma,sans-serif; cursor:pointer; transition:background-color 160ms ease,transform 160ms ease; } .ds-range-selected:hover { filter:brightness(.92); } .ds-range-selected:active { transform:translateY(1px); } .ds-range-selected:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-range-selected { min-height:36px; } }" }, { "name": "Ghost Range Button", "kind": "button", "refersTo": "button-ghost", "description": "Keeps inactive period choices legible but visually quiet.", "html": "", "css": ".ds-range-ghost { min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--foreground,#18181b); font:500 12px/1.5 IRANYekanX,Tahoma,sans-serif; cursor:pointer; transition:background-color 160ms ease; } .ds-range-ghost:hover { background:var(--muted,#f3f4f6); } .ds-range-ghost:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-range-ghost { min-height:36px; } }" }, { "name": "RTL Terminal Dropdown", "kind": "input", "refersTo": "input", "description": "The custom RTL select primitive used for terminal scope and transaction status.", "html": "
همه درگاه‌ها
فروشگاه اصلی۶۳۹ تراکنش
", "css": ".ds-select { position:relative; width:220px; color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-select-trigger { display:flex; width:100%; min-height:44px; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font-size:12px; cursor:pointer; } .ds-select-trigger span { flex:1; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; } .ds-select-trigger:hover { background:var(--muted,#f3f4f6); } .ds-select-trigger:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-select-menu { position:absolute; inset-inline-end:0; z-index:2; width:100%; margin-top:6px; padding:4px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); box-shadow:0 10px 15px -3px rgb(0 0 0 / .1); } .ds-select-option { display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:16px; padding:8px; border-radius:6px; font-size:12px; cursor:pointer; } .ds-select-option:hover,.ds-select-option[aria-selected=true] { background:var(--accent,#eef1ff); color:var(--accent-foreground,#0a33ff); } .ds-select-option small { color:var(--muted-foreground,#71717a); font-size:11px; } @media (min-width:640px) { .ds-select-trigger { min-height:40px; } }" }, { "name": "Jalali Period Picker", "kind": "custom", "description": "Chooses an exact complete Jalali day, week, month, or season inside the full report-scope bar.", "html": "
انتخاب بازه دقیقفقط بازه‌هایی که داده کامل دارند قابل انتخاب‌اند.
شیدسچپج
", "css": ".ds-period { position:relative; color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-period-trigger { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font-size:12px; font-weight:500; cursor:pointer; } .ds-period-trigger svg { color:var(--primary,#0a33ff); } .ds-period-trigger:hover { background:var(--muted,#f3f4f6); } .ds-period-trigger:focus-visible,.ds-period-panel button:focus-visible,.ds-period-panel input:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-period-panel { width:min(384px,calc(100vw - 32px)); margin-top:6px; padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); box-shadow:0 10px 15px -3px rgb(0 0 0 / .1); } .ds-period-panel>small { display:block; margin-top:4px; color:var(--muted-foreground,#71717a); font-size:12px; } .ds-period-head { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; } .ds-period-head input,.ds-period-head button { min-height:44px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:var(--background,#f5f5f6); color:inherit; font:400 14px IRANYekanX,Tahoma,sans-serif; } .ds-period-weekdays,.ds-period-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:12px; text-align:center; } .ds-period-weekdays { color:var(--muted-foreground,#71717a); font-size:11px; } .ds-period-grid button { aspect-ratio:1; min-height:40px; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; } .ds-period-grid button:hover { background:color-mix(in srgb,var(--primary,#0a33ff) 10%,transparent); } .ds-period-grid .ds-period-selected { background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); } @media (min-width:640px) { .ds-period-trigger,.ds-period-head input,.ds-period-head button { min-height:36px; } }" }, { "name": "RTL Amount Range", "kind": "input", "description": "A two-thumb Rial range filter with explicit values and apply/reset actions.", "html": "
بازه مبلغ تراکنش

دو نشانگر را برای تعیین کمینه و بیشینه جابه‌جا کنید.

از ۱۰۰٬۰۰۰ ریالتا ۱۰٬۰۰۰٬۰۰۰٬۰۰۰ ریال
", "css": ".ds-amount { width:min(352px,calc(100vw - 32px)); padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--popover,#fff); color:var(--foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; } .ds-amount p { margin:4px 0 16px; color:var(--muted-foreground,#71717a); font-size:12px; } .ds-amount-values { display:flex; justify-content:space-between; gap:12px; font-size:12px; font-variant-numeric:tabular-nums; } .ds-amount-values output { padding:4px 8px; border-radius:6px; background:var(--muted,#f3f4f6); } .ds-amount-track { position:relative; height:44px; } .ds-amount-track span { position:absolute; inset:20px 0 auto; height:4px; border-radius:999px; background:linear-gradient(to left,var(--muted,#f3f4f6) 0 10%,var(--primary,#0a33ff) 10% 82%,var(--muted,#f3f4f6) 82% 100%); } .ds-amount-thumb { position:absolute; top:12px; width:20px; height:20px; border:3px solid var(--background,#f5f5f6); border-radius:50%; background:var(--primary,#0a33ff); box-shadow:0 0 0 1px color-mix(in srgb,var(--primary,#0a33ff) 45%,transparent); cursor:grab; } .ds-amount-min { right:8%; } .ds-amount-max { left:16%; } .ds-amount-thumb:focus-visible { outline:3px solid color-mix(in srgb,var(--primary,#0a33ff) 28%,transparent); outline-offset:2px; } .ds-amount-actions { display:flex; gap:8px; } .ds-amount-actions button { min-height:44px; padding:0 12px; border:1px solid var(--input,#e4e4e7); border-radius:6px; background:transparent; color:inherit; font:600 14px IRANYekanX,Tahoma,sans-serif; cursor:pointer; } .ds-amount-actions button:first-child { flex:1; border-color:transparent; background:var(--primary,#0a33ff); color:var(--primary-foreground,#fff); } .ds-amount-actions button:hover { filter:brightness(.95); } .ds-amount-actions button:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; }" }, { "name": "KPI Card", "kind": "card", "refersTo": "card", "description": "The main scan unit for amount, count, rate, or completion metrics.", "html": "
مبلغ پرداخت موفق
۲۱٬۳۴۷٬۷۱۳٬۹۱۰ ریال

مجموع مبلغ پرداخت‌های موفق در این بازه

", "css": ".ds-kpi { padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--card,#fff); color:var(--card-foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; box-shadow:0 1px 2px rgb(0 0 0 / .05); transition:transform 200ms ease; } .ds-kpi:hover { transform:translateY(-2px); } .ds-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; color:var(--muted-foreground,#71717a); font-size:14px; } .ds-kpi-icon { color:var(--primary,#0a33ff); } .ds-kpi-value { display:block; font-size:24px; line-height:1.25; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.025em; } .ds-kpi p { margin:6px 0 0; color:var(--muted-foreground,#71717a); font-size:12px; line-height:1.66; } .ds-kpi:focus-within { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-kpi { padding:20px; } .ds-kpi-top { margin-bottom:20px; } .ds-kpi p { margin-top:8px; line-height:2; } }" }, { "name": "Active Navigation Item", "kind": "nav", "refersTo": "nav-active", "description": "Communicates the current routed merchant task in the physical-right sidebar.", "html": "پیشخوان", "css": ".ds-nav-active { display:flex; align-items:center; justify-content:flex-start; gap:8px; height:44px; padding:8px 12px; border-radius:6px; background:var(--sidebar-accent,#eef1ff); color:var(--sidebar-accent-foreground,#0a33ff); font:500 13px/1.5 IRANYekanX,Tahoma,sans-serif; text-decoration:none; direction:rtl; transition:filter 160ms ease; } .ds-nav-active:hover { filter:brightness(.97); } .ds-nav-active:focus-visible { outline:3px solid var(--sidebar-ring,#0a33ff); outline-offset:2px; }" }, { "name": "Ready Status Badge", "kind": "chip", "description": "Pairs compact semantic color with explicit readiness language.", "html": "✓ آماده", "css": ".ds-status-ready { display:inline-flex; align-items:center; justify-content:center; min-height:20px; padding:2px 12px; border-radius:9999px; background:color-mix(in srgb,var(--success,#248061) 10%,transparent); color:var(--success,#248061); font:600 12px/1.5 IRANYekanX,Tahoma,sans-serif; white-space:nowrap; } .ds-status-ready:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; }" }, { "name": "Fee Share Donut", "kind": "custom", "description": "Shows the effective fee share beside a plain-language definition and exact percentage.", "html": "
۲٫۴٪

سهم کارمزد از پرداخت موفق

بخش آبی، سهم واقعی کارمزد را از کل مبلغ موفق این بازه نشان می‌دهد.

", "css": ".ds-fee { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--border,#e4e4e7); border-radius:8px; background:var(--card,#fff); color:var(--card-foreground,#18181b); font-family:IRANYekanX,Tahoma,sans-serif; box-shadow:0 1px 2px rgb(0 0 0 / .05); } .ds-fee-donut { position:relative; display:grid; width:96px; height:96px; flex:none; place-items:center; } .ds-fee-donut svg { width:100%; height:100%; transform:rotate(-90deg); } .ds-fee-track,.ds-fee-value { fill:none; stroke-width:4; } .ds-fee-track { stroke:var(--muted,#f3f4f6); } .ds-fee-value { stroke:var(--primary,#0a33ff); stroke-linecap:round; stroke-dasharray:2.4 97.6; transition:stroke-dasharray 700ms ease; } .ds-fee-donut strong { position:absolute; font-size:14px; font-variant-numeric:tabular-nums; } .ds-fee h3 { margin:0; font-size:14px; font-weight:600; } .ds-fee p { margin:8px 0 0; color:var(--muted-foreground,#71717a); font-size:12px; line-height:2; } .ds-fee:focus-within { outline:3px solid var(--ring,#0a33ff); outline-offset:3px; } @media (min-width:640px) { .ds-fee { padding:20px; } } @media (prefers-reduced-motion:reduce) { .ds-fee-value { transition:none; } }" }, { "name": "Transaction Row", "kind": "custom", "description": "A dense merchant-owned record with a semantic detail link and explicit status tone.", "html": "
شناسه پرداختمبلغوضعیت
SES-639-042۱٬۲۵۰٬۰۰۰ ریالتأییدشده
", "css": ".ds-table { width:100%; border-collapse:collapse; border:1px solid var(--border,#e4e4e7); border-radius:8px; overflow:hidden; background:var(--card,#fff); color:var(--card-foreground,#18181b); font:400 14px/1.75 IRANYekanX,Tahoma,sans-serif; } .ds-table th,.ds-table td { padding:12px; text-align:right; border-bottom:1px solid var(--border,#e4e4e7); } .ds-table th { background:var(--muted,#f3f4f6); color:var(--muted-foreground,#71717a); font-size:12px; font-weight:600; } .ds-table tbody tr { transition:background-color 160ms ease; } .ds-table tbody tr:hover { background:color-mix(in srgb,var(--muted,#f3f4f6) 60%,transparent); } .ds-table td[dir=ltr] { text-align:left; font:500 12px/1.5 ui-monospace,monospace; } .ds-table a { border-radius:4px; color:inherit; text-decoration:none; } .ds-table a:hover { color:var(--primary,#0a33ff); text-decoration:underline; text-underline-offset:4px; } .ds-table a:focus-visible { outline:3px solid var(--ring,#0a33ff); outline-offset:2px; } .ds-verified { display:inline-flex; min-height:20px; align-items:center; padding:2px 8px; border:1px solid #a7f3d0; border-radius:6px; background:#ecfdf5; color:#047857; font-size:12px; }" } ], "narrative": { "northStar": "The Calm Merchant Control Room", "overview": "This is a Persian-first merchant workspace built for repeated operational scanning. It feels calm rather than promotional: compact controls, exact figures, plain-language explanations, and crisp bordered surfaces let a merchant understand recent performance before drilling into transactions, payment attempts, fees, or peer context.\n\nThe world is recognizably ZarinPal through its wordmark, action blue, small yellow brand accent, right-to-left shell, and familiar right-side navigation. Density is deliberate but never cramped. The first viewport establishes scope in the fixed top bar and physical-right sidebar, then leads with a page heading, period control, KPI row, and payment-history chart. Motion is limited to state feedback, shell transitions, and the initial chart trace.", "keyCharacteristics": [ "Persian-first RTL structure with Iran Yekan X FaNum and tabular merchant-facing numerals.", "Fixed 56px top bar, physical-right desktop sidebar, and mobile terminal selector in the navbar.", "Low-radius white or near-black financial surfaces separated primarily by 1px borders.", "ZarinPal blue reserved for actions, selection, navigation, chart emphasis, and focus.", "Semantic success, warning, and danger color always accompanied by words, icons, or both.", "Encouraging, factual summaries that move from recent performance to inspectable evidence." ], "rules": [ { "name": "The One Blue Voice Rule", "body": "Blue signals an action, current scope, active navigation, focus, or the primary data series; it does not wash large passive regions.", "section": "colors" }, { "name": "The Meaning Needs Language Rule", "body": "Success, warning, and danger color reinforce a visible label, icon, or explanation and never carry status alone.", "section": "colors" }, { "name": "The Persian Measure Rule", "body": "Merchant-facing amounts, counts, percentages, dates, and chart values use Persian digits; technical identifiers remain canonical Latin inside isolated left-to-right spans.", "section": "typography" }, { "name": "The Weight Before Scale Rule", "body": "The dense workspace creates hierarchy first with 500, 700, and 800 weights, then with a compact 12/14/15/20/24px size ladder.", "section": "typography" }, { "name": "The Scope Before Evidence Rule", "body": "Terminal and period scope must be visible before KPIs, charts, tables, or attempt history; desktop terminal scope belongs in the right sidebar and narrow-screen terminal scope belongs in the navbar.", "section": "layout" }, { "name": "The Border Carries Structure Rule", "body": "Use the 1px border and tonal layers for resting structure; reserve conspicuous shadows for content that actually floats above the shell.", "section": "elevation" }, { "name": "The Data Surface Radius Rule", "body": "Repeated financial surfaces use 8px corners and a visible border; rounding must not make tables, KPIs, or filters feel like marketing cards.", "section": "shapes" } ], "dos": [ "Do keep the terminal selector in the physical-right desktop sidebar and in the narrow-screen navbar.", "Do lead with the selected period, four ordered KPIs, a plain-language takeaway, and then inspectable chart or table evidence.", "Do use action blue for the current scope, primary series, focus, and actionable controls.", "Do keep cards at 8px with a 1px border and use 16px KPI padding on phones, increasing to 20px from 640px.", "Do preserve Persian digits, Rial units, Jalali dates, RTL flow, and left-to-right isolation for technical identifiers.", "Do provide text, icons, focus states, and accessible alternatives anywhere color or a chart carries meaning." ], "donts": [ "Don't turn yellow into a broad dashboard fill or use it for body text on light surfaces.", "Don't use pill geometry for cards, tables, inputs, or ordinary navigation rows.", "Don't add decorative gradients, oversized hero type, or marketing-page whitespace to authenticated analytics routes.", "Don't use shadow as the primary boundary between resting financial surfaces.", "Don't animate the page as a spectacle; keep motion to state feedback, the shell, overlays, and the chart trace, and honor reduced motion.", "Don't hide status, scope, units, formulas, or important chart values behind color or pointer-only interaction." ] } }