# Platform Code

> A shadcn registry for the Saudi DGA unified design system, built on Base UI and Tailwind CSS v4. Arabic and English (RTL and LTR), light and dark, WCAG 2.1 AA.

Install: `npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json`, then `npx shadcn@latest add @dga/button`.
Every docs page is available as Markdown at its URL plus `.md`. Full text: https://dga.omqkhafi.dev/en/llms-full.txt
Arabic: https://dga.omqkhafi.dev/ar/llms.txt

## Components

- [Avatar](https://dga.omqkhafi.dev/en/docs/components/avatar.md): A person's picture, initials or a generic icon. Seven sizes, circle or square, and avatar groups.
- [Badge](https://dga.omqkhafi.dev/en/docs/components/badge.md): A short label for a status, count or category. Seven colours, filled or outlined, three sizes.
- [Button](https://dga.omqkhafi.dev/en/docs/components/button.md): Triggers an action. Six styles, destructive and on-colour versions, three sizes, icon-only and loading.
- [Divider](https://dga.omqkhafi.dev/en/docs/components/divider.md): A thin line that separates content into sections. Horizontal or vertical, four colours.
- [Featured Icon](https://dga.omqkhafi.dev/en/docs/components/featured-icon.md): An icon in a tinted container that leads cards, empty states and dialogs. Light, hard and outlined, six colours.
- [Link](https://dga.omqkhafi.dev/en/docs/components/link.md): Takes the user to another page or section. Primary, neutral and on-colour, two sizes, inline and external.
- [Skeleton](https://dga.omqkhafi.dev/en/docs/components/skeleton.md): Placeholders shown while content loads. Rectangle, square, circle and line in the Figma sizes.
- [Spinner](https://dga.omqkhafi.dev/en/docs/components/spinner.md): Shows that a process is running. Seven sizes, primary, neutral and on-colour.
- [Tag](https://dga.omqkhafi.dev/en/docs/components/tag.md): Labels for categories, filters and statuses. Tag and Status Tag, filled or outlined, three sizes, optionally removable.

## Docs

- [Contrast](https://dga.omqkhafi.dev/en/docs/contrast.md): Every colour pair Platform Code checks against WCAG 2.1 AA, for each component and for the docs site's own UI, in light and dark mode.
- [Deviations from DGA](https://dga.omqkhafi.dev/en/docs/deviations.md): Every place Platform Code differs from the DGA Figma source, with the original value, ours, and the reason.
- [Introduction](https://dga.omqkhafi.dev/en/docs/index.md): What Platform Code is, how it relates to the DGA design system, and what is in the registry today.
- [Installation](https://dga.omqkhafi.dev/en/docs/installation.md): Add the DGA style to a new or existing project with the shadcn CLI.

## Foundations

- [Colors](https://dga.omqkhafi.dev/en/docs/foundations/colors.md): DGA primitives, semantic tokens for light and dark, and their WCAG contrast ratios.
- [Dark mode](https://dga.omqkhafi.dev/en/docs/foundations/dark-mode.md): How the dark theme is built, the neutral ramp and its roles, and Button, Badge, Tag, Link and status surfaces in light and dark side by side.
- [Icons](https://dga.omqkhafi.dev/en/docs/foundations/icons.md): Hugeicons, the DGA icon set, with RTL mirroring rules.
- [Radius](https://dga.omqkhafi.dev/en/docs/foundations/radius.md): DGA corner radii.
- [Shadows](https://dga.omqkhafi.dev/en/docs/foundations/shadows.md): DGA elevation shadows and backdrop blurs.
- [Spacing](https://dga.omqkhafi.dev/en/docs/foundations/spacing.md): The 4px spacing scale, component spacing tokens, breakpoints, grids and logical properties.
- [Typography](https://dga.omqkhafi.dev/en/docs/foundations/typography.md): IBM Plex Sans Arabic, the DGA type scale and its responsive modes.