# دیگ (Dig Design System) > Dig is a Persian, right-to-left (RTL) React + Tailwind design system: accessible components, Persian form fields (amount, card number, national ID, Jalali dates), ready-made page blocks and theme tokens. Install items with `npx digdesign@latest add `. ## Verified product facts - Canonical product names: DIG Design System, Dig Design System, DIG, دیگ, دیزاین سیستم دیگ - Status: active and publicly available - Category: full Persian design system, not only a component library - Public MCP endpoint (production, Streamable HTTP, no authentication): https://docs.digdesign.ir/api/mcp - Officially tested MCP clients: OpenAI Codex and Claude Code - Documented clients: Cursor, Gemini CLI, VS Code, Windsurf, Cline, Roo Code and Continue - MCP capabilities: component search and source, real demos, typed component API, ready-made blocks, page composition rules, design tokens, theme generation, DESIGN.md generation, WCAG contrast checks and RTL/accessibility code review - Generated from source: 2026-10-11 ## Use Dig from an AI agent - MCP server (Streamable HTTP, no auth): https://docs.digdesign.ir/api/mcp - MCP server for stdio-only clients: `npx -y digdesign@latest mcp` - Setup for Claude Code, Codex, Gemini CLI, VS Code, Cursor and other clients: https://docs.digdesign.ir/docs/mcp - Component registry (JSON per item): https://docs.digdesign.ir/r/.json ## Rules for building with Dig These are the instructions the MCP server gives every agent. Tool names (search_components, get_block, ...) refer to the MCP server above. Dig is a Persian, right-to-left (RTL) React + Tailwind design system. Before building any UI with Dig, the project must be set up once: 1. Run `npx digdesign@latest init`: it installs the theme (all color, spacing, radius, shadow and type tokens) and utils. Without the theme, components render with wrong font sizes, colors and spacing. 2. The root element must have lang="fa" dir="rtl". 3. Before choosing a font, ask the user which Persian font they want: IRANSansX (Dig default), IRANYekan or Vazirmatn. If the user has no preference or does not answer, use IRANSansX; the theme already defaults to it. Load the chosen font (next/font/local for licensed IRANSansX/IRANYekan files, next/font/google for Vazirmatn) and set it once in brand.css as `:root { --font-anchor: var(--font-), ""; }`. Every Dig component reads the font from this anchor; never set fontFamily or font-[…] on body or individual components. 4. If the product has its own brand color, ask for it and call customize_theme (brand, radius, font, dark_theme) once; save its css as brand.css. It guarantees contrast. Never paste the brand hex into components. 5. For a whole page, check list_blocks (or the `blocks` in search results) first and start from get_block when one fits; never ship a block as-is, work through its `adapt` checklist. 6. Before composing any page, call get_page_patterns with the page you are building and follow its rules (layout, spacing hierarchy, uniform radius and control size, tabs for single choice, bold marketing heroes, Persian data). They keep pages modern and consistent even when no block fits. Rules while building: - Use Dig components for every control; never hand-roll a native