@dev-dga/tokens

An independent implementation of design tokens for the DGA (Digital Government Authority) Platforms Code design system, Saudi Arabia's (KSA) 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.

Independent, community-maintained. Not affiliated with or endorsed by the DGA.

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