@dev-dga/tokens

Design tokens for the DGA (Digital Government Authority) design system , Saudi Arabia's national reference for government digital platforms.

Colors, typography, spacing, radius, shadows, and breakpoints exported as fully-typed TypeScript objects. This package is the source of truth , @dev-dga/css is generated from it.

Install

npm install @dev-dga/tokens

Usage

import * as tokens from '@dev-dga/tokens';

Token groups are exported as named objects. Hover any import in your editor for full type information.

Semantic tokens (theme-aware, dark mode flips them):

• colors , primary, secondary, background, foreground, muted, border, card, destructive, error, success, warning, info, ring
• text , primary, secondary, tertiary, placeholder

Palette scales (12 steps each, 25 → 950, absolute hex , same in light and dark):

• saGreen , Saudi-Arabia-aligned brand green (saGreen[500] = #25935F)
• gray , neutral
• error, warning, success, info , semantic palettes (the semantic colors.* tokens above sit at step 600)
• gold, lavender , secondary brand accents (DGA Phase 4)

Other groups: typography, spacing, radius, shadows, breakpoints.

When consuming via @dev-dga/css, every leaf becomes a CSS variable: scales as --ddga-{name}-{step} (e.g. --ddga-sa-500, --ddga-gray-200), semantic tokens as --ddga-color-* / --ddga-text-*.

Most consumers want @dev-dga/react (components) and @dev-dga/css (styles). Reach for @dev-dga/tokens directly only when you're building tooling on top of the raw values.

Docs

Live Storybook · Source

License

MIT