Every place DGA UI differs from the DGA Figma source, with the original value, ours, and the reason.
On this page
DGA UI follows the DGA Foundations Figma file. When a value is wrong (a typo, a contrast failure, a missing definition), we change it and record the change here. This page is generated from the same list the token build uses (scripts/tokens/fixes.ts), so the two cannot drift apart.
| Token / component | DGA original | Ours | Reason |
|---|---|---|---|
Naming --line-hight-* (21 primitives) | DGA original:line-hight | Ours:line-height | Typo: Hight → Height. |
Naming --colors-tertiary-lavendar-*, --charts-lavendar | DGA original:lavendar | Ours:lavender | Typo: Lavendar → Lavender. |
Naming --chip-background-on-color-diabled | DGA original:diabled | Ours:disabled | Typo: diabled → disabled. |
Naming --iable-container | DGA original:iable-container | Ours:label-container | Typo: Figma "Form/Iable-container" (capital I for l). Figma uses it as the gap between the label and the input container in Textarea and Dropdown input, so it is "Label-container". |
Naming --prefix-suffix-lable-icon | DGA original:lable | Ours:label | Typo: lable → label. |
Naming --dropdown-container-padding-left-right, --textarea-container-padding-left-right | DGA original:padding-left-right | Ours:padding-inline | RTL: left/right → logical inline, so the names stay correct in Arabic layouts. |
Naming --textarea-container-padding-top-bottom, --prefix-suffix-padding-top-bottom | DGA original:padding-top-bottom | Ours:padding-block | Matches the logical inline naming (top/bottom → block). |
Naming --input-container-padding-left, --prefix-suffix-padding-left | DGA original:padding-left | Ours:padding-start | RTL: left → logical start. |
Naming --input-container-padding-right, --prefix-suffix-padding-right | DGA original:padding-right | Ours:padding-end | RTL: right → logical end. |
Contrast --background-success (light) | DGA original:--colors-green-600 | Ours:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-success (dark) | DGA original:--colors-green-600 | Ours:--colors-green-700 | White text on green-600 is 3.91:1. Green-700 gives 5.69:1. |
Contrast --background-warning (light) | DGA original:--colors-yellow-600 | Ours:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --background-warning (dark) | DGA original:--colors-yellow-600 | Ours:--colors-yellow-700 | White text on yellow-600 is 3.49:1. Yellow-700 gives 5.43:1. |
Contrast --text-secondary (light) | DGA original:--colors-secondary-gold-600-primary | Ours:--colors-secondary-gold-800 | Gold-600 text on white is 2.30:1 and gold-700 is 3.58:1. Gold-800 gives 5.54:1 and stays recognisably gold. |
Contrast --text-tertiary (dark) | DGA original:--colors-tertiary-lavender-500-primary | Ours:--colors-tertiary-lavender-300 | Lavender-500 on dark surfaces is 2.49:1. Lavender-300 gives 7.30:1. |
Contrast --icon-tertiary (dark) | DGA original:--colors-tertiary-lavender-500-primary | Ours:--colors-tertiary-lavender-400 | Lavender-500 icons on dark surfaces are 2.49:1 (non-text needs 3:1). Lavender-400 gives 4.25:1. |
Contrast --text-oncolor-secondary (dark) | DGA original:--alpha-white-80 | Ours:--colors-alpha-alpha-white-80 | In dark mode alpha-white-80 flips to 80% black, which is unreadable on fills. Uses literal white at 80%, the same as light mode. |
Contrast --text-oncolor-tertiary (dark) | DGA original:--alpha-white-70 | Ours:--colors-alpha-alpha-white-70 | In dark mode alpha-white-70 flips to 70% black, which is unreadable on fills. Uses literal white at 70%, the same as light mode. |
Contrast --icon-primary-400 (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-800 | Sa-flag-400 icons on white are 2.26:1. Used for pressed/selected transparent-button icons, so it now matches link-primary-pressed (sa-flag-800). |
Contrast --icon-secondary (light) | DGA original:--colors-secondary-gold-600-primary | Ours:--colors-secondary-gold-700 | Gold-600 icons on white are 2.30:1. Gold-700 gives 3.58:1 (non-text needs 3:1). |
Contrast --text-tertiary-light (light) | DGA original:--colors-tertiary-lavender-300 | Ours:--colors-tertiary-lavender-200 | Lavender-300 on the nav-header green is 4.30:1. Lavender-200 gives 5.71:1. |
Contrast --link-primary-hovered (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-700 | Sa-flag-400 on white is 2.16:1. Hover darkens to sa-flag-700 (6.60:1) instead of lightening. |
Contrast --link-icon-primary-hovered (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-700 | Sa-flag-400 on white is 2.16:1. Hover darkens to sa-flag-700 (6.60:1) instead of lightening. |
Contrast --link-primary-pressed (light) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-800 | Sa-flag-300 on white is 1.61:1. Pressed uses sa-flag-800 (8.56:1). |
Contrast --link-icon-primary-pressed (light) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-800 | Sa-flag-300 on white is 1.61:1. Pressed uses sa-flag-800 (8.56:1). |
Contrast --link-neutral-pressed (light) | DGA original:--colors-neutral-400 | Ours:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-icon-neutral-pressed (light) | DGA original:--colors-neutral-400 | Ours:--colors-neutral-600 | Neutral-400 on white is 2.41:1. Neutral-600 gives 7.36:1. |
Contrast --link-primary (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:--colors-primary-sa-flag-400 | Sa-flag-600 on dark card is 3.06:1. Sa-flag-400 gives 6.43:1. |
Contrast --link-primary-focused (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-icon-primary-focused (dark) | DGA original:--colors-primary-sa-flag-600-primary | Ours:--colors-primary-sa-flag-400 | Matches the dark default link (sa-flag-600 was 3.06:1). |
Contrast --link-primary-hovered (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-icon-primary-hovered (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-primary-sa-flag-300 | Dark hover lightens one step from the new default. |
Contrast --link-primary-pressed (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-icon-primary-pressed (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-primary-sa-flag-200 | Dark pressed lightens two steps from the new default. |
Contrast --link-primary-visited (dark) | DGA original:--colors-primary-sa-flag-800 | Ours:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-icon-primary-visited (dark) | DGA original:--colors-primary-sa-flag-800 | Ours:--colors-primary-sa-flag-200 | Sa-flag-800 on dark card is 1.70:1. |
Contrast --link-danger (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Red-600 on dark card is 3.01:1. Red-400 gives 5.22:1. |
Contrast --link-danger-focused (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-icon-danger-focused (dark) | DGA original:--colors-red-600 | Ours:--colors-red-400 | Matches the dark default danger link. |
Contrast --link-danger-hovered (dark) | DGA original:--colors-red-700 | Ours:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-icon-danger-hovered (dark) | DGA original:--colors-red-700 | Ours:--colors-red-300 | Red-700 on dark card is 2.21:1. |
Contrast --link-danger-pressed (dark) | DGA original:--colors-red-900 | Ours:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-icon-danger-pressed (dark) | DGA original:--colors-red-900 | Ours:--colors-red-200 | Red-900 on dark card is 1.48:1. |
Contrast --link-danger-visited (dark) | DGA original:--colors-red-800 | Ours:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --link-icon-danger-visited (dark) | DGA original:--colors-red-800 | Ours:--colors-red-300 | Red-800 on dark card is 1.68:1. |
Contrast --link-neutral-pressed (dark) | DGA original:--colors-neutral-500 | Ours:--colors-neutral-400 | Neutral-500 on dark card is 3.04:1. Neutral-400 gives 5.78:1. |
Contrast --link-icon-neutral-pressed (dark) | DGA original:--colors-neutral-500 | Ours:--colors-neutral-400 | Neutral-500 on dark card is 3.04:1. Neutral-400 gives 5.78:1. |
Contrast --button-background-transparent-hovered (light) | DGA original:--alpha-white-20 | Ours:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill fails AA (down to 2.38:1). Black-20 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-background-transparent-pressed (light) | DGA original:--alpha-white-40 | Ours:--colors-alpha-alpha-black-40 | White label on white-40 over the brand fill fails AA (down to 2.38:1). Black-40 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-background-transparent-selected (light) | DGA original:--alpha-white-30 | Ours:--colors-alpha-alpha-black-30 | White label on white-30 over the brand fill fails AA (down to 2.38:1). Black-30 darkens the fill instead (6.30:1 or better), as dark mode already does. |
Contrast --button-label-transparent-hovered-on-color (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-hovered-on-color (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-hovered-on-color (light) | DGA original:--background-primary-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-hovered-on-color (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-pressed-on-color (light) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-pressed-on-color (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-pressed-on-color (light) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-pressed-on-color (dark) | DGA original:--colors-primary-sa-flag-300 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-selected-on-color (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-transparent-selected-on-color (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-selected-on-color (light) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-icon-transparent-selected-on-color (dark) | DGA original:--colors-primary-sa-flag-400 | Ours:--colors-base-white | Green-300/400 on the brand fill is 2.10–2.82:1. The label stays white and the state is shown with an underline instead. |
Contrast --button-label-danger-primary-default-oncolor (light) | DGA original:--colors-red-200 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-default-oncolor (dark) | DGA original:--colors-red-200 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-hovered-oncolor (light) | DGA original:--colors-red-300 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-hovered-oncolor (dark) | DGA original:--colors-red-300 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-pressed-oncolor (light) | DGA original:--colors-red-400 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-label-danger-primary-pressed-oncolor (dark) | DGA original:--colors-red-400 | Ours:--colors-base-white | Red-200/300/400 on the green brand fill is 1.01–3.35:1 and relies on red/green colour difference. On brand fills, destructive outline, subtle and transparent buttons use white labels; the label text carries the meaning. |
Contrast --button-background-danger-secondary-default (dark) | DGA original:--colors-red-50 | Ours:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-focused (dark) | DGA original:--colors-red-50 | Ours:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-selected (dark) | DGA original:--colors-red-50 | Ours:--alpha-error-10 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-hovered (dark) | DGA original:--colors-red-100 | Ours:--alpha-error-20 | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --button-background-danger-secondary-pressed (dark) | DGA original:--colors-red-200 | Ours:#b423184d | Figma keeps the light red-50 fill in dark mode, so dark-mode error text (red-400) is 1.96–2.56:1. A translucent red tint (10/20/30%) matches the dark tag and status tints and gives 4.57:1 or better. |
Contrast --link-oncolor-hovered (light) | DGA original:--colors-alpha-alpha-white-80 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-hovered (dark) | DGA original:--colors-alpha-alpha-white-80 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-pressed (light) | DGA original:--colors-alpha-alpha-white-60 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-pressed (dark) | DGA original:--colors-alpha-alpha-white-60 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-visited (light) | DGA original:--colors-alpha-alpha-white-90 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --link-oncolor-visited (dark) | DGA original:--colors-alpha-alpha-white-90 | Ours:--colors-base-white | Translucent white (60–90%) on the brand fill is 2.73–4.21:1. On-colour links stay white; hovered and pressed are shown by the underline. |
Contrast --tag-background-on-color (light) | DGA original:--colors-alpha-alpha-white-20 | Ours:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
Contrast --tag-background-on-color (dark) | DGA original:--colors-alpha-alpha-white-20 | Ours:--colors-alpha-alpha-black-20 | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
Contrast --text-on-gold (new) | DGA original:— | Ours:--colors-base-black | White on the gold fill (background-secondary, gold-600) is 2.30:1. Text on gold uses black (7.85:1), which keeps the brand gold fill. |
Contrast --button-label-transparent-hovered (new) | DGA original:— | Ours:--colors-primary-sa-flag-700 (light), --colors-primary-sa-flag-300 (dark) | Figma uses button-background-primary-hovered as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-300 in dark mode. |
Contrast --button-label-transparent-pressed (new) | DGA original:— | Ours:--colors-primary-sa-flag-900 (light), --colors-primary-sa-flag-200 (dark) | Figma uses button-background-primary-pressed as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-200 in dark mode. |
Contrast --button-label-transparent-selected (new) | DGA original:— | Ours:--colors-primary-sa-flag-800 (light), --colors-primary-sa-flag-300 (dark) | Figma uses button-background-primary-selected as the label colour. It is a fill token and stays dark in dark mode (1.34–2.84:1 on dark surfaces). This label token keeps the Figma value in light mode and uses green-300 in dark mode. |
Contrast --button-label-danger-default (new) | DGA original:— | Ours:--colors-red-600 (light), --colors-red-400 (dark) | Destructive transparent label (default). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-400. |
Contrast --button-label-danger-hovered (new) | DGA original:— | Ours:--colors-red-700 (light), --colors-red-300 (dark) | Destructive transparent label (hovered). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-300. |
Contrast --button-label-danger-pressed (new) | DGA original:— | Ours:--colors-red-900 (light), --colors-red-200 (dark) | Destructive transparent label (pressed). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-200. |
Contrast --button-label-danger-selected (new) | DGA original:— | Ours:--colors-red-800 (light), --colors-red-300 (dark) | Destructive transparent label (selected). Figma only defines the default state and colours it with the danger fill token, which stays red-600 in dark mode (3.01:1 on dark card). States follow the primary transparent pattern; dark mode uses red-300. |
Contrast --button-background-danger-secondary-oncolor-default (new) | DGA original:— | Ours:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-hovered (new) | DGA original:— | Ours:--colors-red-100 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-pressed (new) | DGA original:— | Ours:--colors-red-200 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-selected (new) | DGA original:— | Ours:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-background-danger-secondary-oncolor-focused (new) | DGA original:— | Ours:--colors-red-50 | On brand fills the dark-mode translucent tint lets the green show through (1.91:1). On-colour destructive secondary buttons keep Figma's opaque red-50/100/200 fill in both modes. |
Contrast --button-label-danger-secondary-oncolor (new) | DGA original:— | Ours:--colors-red-700 | Label for the opaque on-colour destructive secondary fill. text-error flips to red-400 in dark mode, which is 2.56:1 on red-50; red-700 is used in both modes. |
Tokens --badge-neutral-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-neutral-50 (light), --colors-neutral-800 (dark) | Badge neutral fill: neutral-50 as on the site; neutral-800 in dark mode. |
Tokens --badge-neutral-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Badge neutral border: neutral-200 as on the site; neutral-700 in dark mode. |
Tokens --badge-neutral-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-neutral-700 (light), --colors-neutral-200 (dark) | Badge neutral label and icon: neutral-700 as on the site; neutral-200 in dark mode. |
Tokens --badge-neutral-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-neutral-500 (light), --colors-neutral-400 (dark) | Badge neutral outlined border: neutral-500 as on the site; neutral-400 in dark mode. |
Tokens --badge-success-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Badge success fill: primary-sa-flag-50 as on the site; primary-sa-flag-950 in dark mode. |
Tokens --badge-success-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Badge success border: primary-sa-flag-200 as on the site; primary-sa-flag-800 in dark mode. |
Tokens --badge-success-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-primary-sa-flag-700 (light), --colors-primary-sa-flag-200 (dark) | Badge success label and icon: primary-sa-flag-700 as on the site; primary-sa-flag-200 in dark mode. |
Tokens --badge-success-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-primary-sa-flag-500 (light), --colors-primary-sa-flag-400 (dark) | Badge success outlined border: primary-sa-flag-500 as on the site; primary-sa-flag-400 in dark mode. |
Tokens --badge-error-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-red-50 (light), --colors-red-950 (dark) | Badge error fill: red-50 as on the site; red-950 in dark mode. |
Tokens --badge-error-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-red-200 (light), --colors-red-800 (dark) | Badge error border: red-200 as on the site; red-800 in dark mode. |
Tokens --badge-error-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-red-700 (light), --colors-red-200 (dark) | Badge error label and icon: red-700 as on the site; red-200 in dark mode. |
Tokens --badge-error-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-red-500 (light), --colors-red-400 (dark) | Badge error outlined border: red-500 as on the site; red-400 in dark mode. |
Tokens --badge-warning-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-yellow-50 (light), --colors-yellow-950 (dark) | Badge warning fill: yellow-50 as on the site; yellow-950 in dark mode. |
Tokens --badge-warning-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-yellow-200 (light), --colors-yellow-800 (dark) | Badge warning border: yellow-200 as on the site; yellow-800 in dark mode. |
Tokens --badge-warning-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-yellow-700 (light), --colors-yellow-200 (dark) | Badge warning label and icon: yellow-700 as on the site; yellow-200 in dark mode. |
Tokens --badge-warning-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-yellow-500 (light), --colors-yellow-400 (dark) | Badge warning outlined border: yellow-500 as on the site; yellow-400 in dark mode. |
Tokens --badge-info-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-blue-50 (light), --colors-blue-950 (dark) | Badge info fill: blue-50 as on the site; blue-950 in dark mode. |
Tokens --badge-info-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-blue-200 (light), --colors-blue-800 (dark) | Badge info border: blue-200 as on the site; blue-800 in dark mode. |
Tokens --badge-info-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-blue-700 (light), --colors-blue-200 (dark) | Badge info label and icon: blue-700 as on the site; blue-200 in dark mode. |
Tokens --badge-info-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-blue-500 (light), --colors-blue-400 (dark) | Badge info outlined border: blue-500 as on the site; blue-400 in dark mode. |
Tokens --badge-purple-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-tertiary-lavender-50 (light), --colors-tertiary-lavender-950 (dark) | Badge purple fill: tertiary-lavender-50 as on the site; tertiary-lavender-950 in dark mode. |
Tokens --badge-purple-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-tertiary-lavender-200 (light), --colors-tertiary-lavender-800 (dark) | Badge purple border: tertiary-lavender-200 as on the site; tertiary-lavender-800 in dark mode. |
Tokens --badge-purple-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-tertiary-lavender-700 (light), --colors-tertiary-lavender-200 (dark) | Badge purple label and icon: tertiary-lavender-700 as on the site; tertiary-lavender-200 in dark mode. |
Tokens --badge-purple-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-tertiary-lavender-500-primary (light), --colors-tertiary-lavender-400 (dark) | Badge purple outlined border: tertiary-lavender-500 as on the site; tertiary-lavender-400 in dark mode. |
Tokens --badge-orange-background (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-orange-50 (light), --colors-orange-950 (dark) | Badge orange fill: orange-50 as on the site; orange-950 in dark mode. |
Tokens --badge-orange-border (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-orange-200 (light), --colors-orange-800 (dark) | Badge orange border: orange-200 as on the site; orange-800 in dark mode. |
Tokens --badge-orange-text (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-orange-700 (light), --colors-orange-200 (dark) | Badge orange label and icon: orange-700 as on the site; orange-200 in dark mode. |
Tokens --badge-orange-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-orange-500 (light), --colors-orange-400 (dark) | Badge orange outlined border: orange-500 as on the site; orange-400 in dark mode. |
Tokens --badge-on-color-background (new) | DGA original:Added from site CSS (.badge--on-color: white 30%) | Ours:--colors-alpha-alpha-black-20 | White text on white-30 over the brand fill is 3.13:1. A black-20 tint keeps the badge visible and gives 6.30:1. |
Tokens --badge-on-color-border-outlined (new) | DGA original:Added from site CSS (.badge) | Ours:--colors-alpha-alpha-white-90 | On-colour outlined border, white 90% as on the site. |
Tokens --featured-icon-brand-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-primary-sa-flag-600-primary | Featured icon brand hard fill (white icon): primary-sa-flag-600. |
Tokens --featured-icon-brand-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Featured icon brand light fill: primary-sa-flag-50, primary-sa-flag-950 in dark mode. |
Tokens --featured-icon-brand-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-primary-sa-flag-600-primary (light), --colors-primary-sa-flag-300 (dark) | Featured icon brand icon on the light fill and outlined: primary-sa-flag-600, primary-sa-flag-300 in dark mode. |
Tokens --featured-icon-brand-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Featured icon brand outlined border: primary-sa-flag-200, primary-sa-flag-800 in dark mode. |
Tokens --featured-icon-neutral-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-neutral-500 | Featured icon neutral hard fill (white icon): neutral-500. |
Tokens --featured-icon-neutral-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-neutral-100 (light), --colors-neutral-800 (dark) | Featured icon neutral light fill: neutral-100, neutral-800 in dark mode. |
Tokens --featured-icon-neutral-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-neutral-500 (light), --colors-neutral-300 (dark) | Featured icon neutral icon on the light fill and outlined: neutral-500, neutral-300 in dark mode. |
Tokens --featured-icon-neutral-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Featured icon neutral outlined border: neutral-200, neutral-700 in dark mode. |
Tokens --featured-icon-success-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-green-700 | Featured icon success hard fill (white icon): green-700. |
Tokens --featured-icon-success-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-green-50 (light), --colors-green-950 (dark) | Featured icon success light fill: green-50, green-950 in dark mode. |
Tokens --featured-icon-success-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-green-700 (light), --colors-green-300 (dark) | Featured icon success icon on the light fill and outlined: green-700, green-300 in dark mode. |
Tokens --featured-icon-success-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-green-200 (light), --colors-green-800 (dark) | Featured icon success outlined border: green-200, green-800 in dark mode. |
Tokens --featured-icon-error-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-red-600 | Featured icon error hard fill (white icon): red-600. |
Tokens --featured-icon-error-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-red-50 (light), --colors-red-950 (dark) | Featured icon error light fill: red-50, red-950 in dark mode. |
Tokens --featured-icon-error-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-red-600 (light), --colors-red-300 (dark) | Featured icon error icon on the light fill and outlined: red-600, red-300 in dark mode. |
Tokens --featured-icon-error-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-red-200 (light), --colors-red-800 (dark) | Featured icon error outlined border: red-200, red-800 in dark mode. |
Tokens --featured-icon-warning-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-yellow-700 | Featured icon warning hard fill (white icon): yellow-700. |
Tokens --featured-icon-warning-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-yellow-50 (light), --colors-yellow-950 (dark) | Featured icon warning light fill: yellow-50, yellow-950 in dark mode. |
Tokens --featured-icon-warning-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-yellow-700 (light), --colors-yellow-300 (dark) | Featured icon warning icon on the light fill and outlined: yellow-700, yellow-300 in dark mode. |
Tokens --featured-icon-warning-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-yellow-200 (light), --colors-yellow-800 (dark) | Featured icon warning outlined border: yellow-200, yellow-800 in dark mode. |
Tokens --featured-icon-info-background (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-blue-600 | Featured icon info hard fill (white icon): blue-600. |
Tokens --featured-icon-info-background-light (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-blue-50 (light), --colors-blue-950 (dark) | Featured icon info light fill: blue-50, blue-950 in dark mode. |
Tokens --featured-icon-info-icon (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-blue-600 (light), --colors-blue-300 (dark) | Featured icon info icon on the light fill and outlined: blue-600, blue-300 in dark mode. |
Tokens --featured-icon-info-border (new) | DGA original:Added from site CSS (.featured-icon) | Ours:--colors-blue-200 (light), --colors-blue-800 (dark) | Featured icon info outlined border: blue-200, blue-800 in dark mode. |
Tokens --skeleton-background (new) | DGA original:No fill token on the Figma Skeleton components | Ours:--colors-neutral-200 (light), --colors-neutral-700 (dark) | Placeholder fill: neutral-200, neutral-700 in dark mode. |
Naming Figma group "Font Wieght" | DGA original:Font Wieght/font-weight-* | Ours:Font Weight (CSS names were already --font-weight-*) | Typo: Wieght → Weight. Only the Figma group name was wrong. |
Breakpoints sm / md / lg / xl / 2xl | DGA original:Not defined. Figma has Desktop, Tablet and Mobile modes with no pixel widths. | Ours:sm 640px (40rem), md 768px (48rem), lg 1024px (64rem), xl 1280px (80rem), 2xl 1536px (96rem) | These are the widths the design.dga.gov.sa CSS uses and also Tailwind's defaults. Figma's tablet frame is 704 + 2×32 = 768px wide, which matches md. |
Breakpoints Responsive token modes | DGA original:tokens.css (extraction guess): Desktop default, Tablet at max-width 1024px, Mobile at max-width 640px | Ours:Mobile-first: Mobile is the base, Tablet from 768px (md), Desktop from 1024px (lg) | Mobile-first matches Tailwind's min-width breakpoints, and 768px is where Figma's tablet grid starts. |
Typography --typo-size-text-*, --line-heights-text-*, --paragraph-spacing-text-* | DGA original:Mobile mode: text-md 12px, text-sm 10px, text-xs 8px; Tablet: text-md 14px | Ours:Body text sizes stay at their desktop values on every viewport. Display sizes still follow the Figma modes. | 8–12px body text is hard to read on phones, iOS zooms into inputs under 16px, and the mobile mode made text-lg (14px) smaller than text-md. |
Tokens Site CSS vs Figma (39 material conflicts, 87 rounding-only, shadow-sm) | DGA original:design.dga.gov.sa compiled CSS values | Ours:Figma values everywhere | Figma is the source of truth. The full list is in tokens/TOKEN_CONFLICTS.md. |
Tokens --radius-xxs, --radius-2xl, --radius-3xl, --radius-4xl | DGA original:Legacy site-CSS radius set (2, 16, 20, 24px) | Ours:Dropped. rounded-2xl, rounded-3xl and rounded-4xl clamp to radius-xl (24px) so shadcn class names still work. | Not in Figma, and it clashes with the Figma scale (site radius-2xl is 16px, the same as Figma radius-lg). |
Tokens --shadow-* (css-only copies) | DGA original:Site CSS shadow values | Ours:Figma effect styles (Shadows/shadow-xs … shadow-3xl) | Figma is the source of truth. Only shadow-sm differed (5% vs 6%/10% opacity). |
Theming Dark mode selector | DGA original:[data-theme="dark"] | Ours:[data-theme="dark"] and .dark (both work, also on any subtree) | shadcn and next-themes use the .dark class. All semantic tokens are re-declared in the dark scope so nested dark sections resolve correctly. |
Tailwind shadcn --radius scale | DGA original:shadcn derives radius-sm…4xl from --radius with calc() | Ours:Fixed DGA radii: none 0, xs 2, sm 4, md 8, lg 16, xl 24, full 9999px; --radius = radius-sm (4px) | DGA defines exact radii. Buttons and inputs use radius-sm (4px). |
Tailwind Spacing scale | DGA original:--spacing-N in px (spacing-N = N × 4px) | Ours:Tailwind's --spacing: 0.25rem, so p-4 = 16px and p-80 = 320px, matching DGA one-to-one | rem keeps spacing in step with the user's root font size. The raw --spacing-* variables keep their px values. |
Contrast Component-level pairs | DGA original:Not audited | Ours:Every state of every component, on each surface it can sit on, in light and dark mode (scripts/tokens/components.ts). Phase 2: Button, Spinner, Link, Badge, Tag, Avatar and Featured Icon. | Foundation pairs alone miss component states such as hovered labels and on-colour fills. Each component page lists its checks. |
Contrast --background-black in dark mode | DGA original:Flips to white in dark mode | Ours:Unchanged | It is an inverse surface (white in dark mode), so text on it must use the inverse colour, not text-oncolor-primary. Primary-neutral buttons use button-background-black-*, which stays dark. |
Contrast --text-oncolor-secondary, --text-oncolor-tertiary | DGA original:No usage rule (80% and 70% white) | Ours:Use only on deep fills: nav header, pressed/selected primary, black. On mid-tone fills use --text-oncolor-primary. | White itself is only 4.57–4.83:1 on the 600-level fills, so no lower opacity can pass there. On deep fills 80% and 70% white pass AA. |
Components Featured Icon | DGA original:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.featured-icon). | Ours:Built from the site CSS: hard, light and outlined; brand, neutral, success, error, warning and info; sm 32, md 40, lg 48 and xl 56px; square or circle. | Figma is the source of truth where it exists; here only the site CSS does. |
Components Featured Icon: hard warning and success | DGA original:Hard warning: white on warning-400. Hard success: white on brand-600 (the same as brand). | Ours:Hard warning uses yellow-700; hard success uses green-700 (DGA status green). | White on yellow-400 is 1.9:1, below the 3:1 non-text minimum. Success uses the status palette so it differs from brand, as the site's semantic block (text-success) does. |
Components Skeleton: composite types | DGA original:Five composite Skeleton Components (Image Button and Text, Icon and List, Image Content and Button, Chart and Content, Image Profile Content and Button) | Ours:One Skeleton primitive (rectangle, square, circle, line) and the five layouts as copy-paste examples on the docs page | The composites are layouts of the primitives; real pages need their own shapes. |
Components Skeleton: animation | DGA original:Static | Ours:Pulses (opacity); static with reduced motion | A gentle pulse shows that content is loading. prefers-reduced-motion turns it off. |
Components Divider: colours | DGA original:Neutral, Primary, Alpha-white and White, with no colour tokens in the export | Ours:neutral → border-neutral-secondary, primary → border-primary, alpha-white → border-oncolor-transparent-30, white → icon-oncolor (white in both modes) | Mapped to the closest semantic border tokens. border-white flips to black in dark mode, so white uses a token that stays white. |
Components Avatar: sizes and text | DGA original:Initials use Text xs/Semibold on every size in the export | Ours:Text style per size from the site CSS: 24 Text 2xs Bold, 32 Text xs SemiBold, 40 Text sm SemiBold, 48 Text md SemiBold, 64 Text xl Medium, 80 Display sm, 120 Display md | One text size cannot fit avatars from 24 to 120px. |
Components Tag: text size | DGA original:Text 2xs/SemiBold on every size in the exported variant table | Ours:Text sm (md, 32px), Text xs (sm, 24px) and Text 2xs (xs, 20px), SemiBold | The export lists one sample text style. A 10px label in a 32px tag is hard to read; the sizes follow the site CSS (.tag--lg uses 14px). |
Components Tag: dismiss | DGA original:Optional trailing icon | Ours:onDismiss adds a trailing close button (Cancel icon) with an aria-label (dismissLabel). The tag itself is not interactive. | Removable filter tags need a real button for keyboard and screen-reader users. |
Components Status Tag: ghost and dot | DGA original:Ghost: neutral label with no fill | Ours:Every status tag starts with a coloured dot (tag-icon-*; tag-dot on inverted) so ghost tags still show their colour. | Ghost tags would otherwise all look the same; the dot is decorative and the label carries the status. |
Components Badge | DGA original:Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.badge). | Ours:Built from the site CSS: sizes sm 20, md 24 and lg 32px, filled and outlined, square and rounded, icon-only. Colours map to DGA palettes (brand → success, purple → lavender). | The badge is used across DGA sites. Figma is the source of truth where it exists; here only the site CSS does. |
Components Badge: pink | DGA original:.badge--pink and .badge--pink-outlined | Ours:Dropped | DGA has no pink palette, in Figma or in the token set. |
Components Badge: on-colour outlined label | DGA original:White 90% text | Ours:White text (text-oncolor-primary) | White 90% on the brand fill is 4.16:1; white is 4.57:1 or better. |
Components Link: focus ring and disabled | DGA original:Focused: border-black stroke (border-white on colour). Disabled: a separate variant. | Ours:2px outline on :focus-visible with a 2px offset (white on colour, both modes). disabled removes the href and sets aria-disabled. | Keyboard-only focus (WCAG 2.4.7). A link without an href cannot be followed or focused. |
Components Link: external | DGA original:Optional swap icon | Ours:external opens a new tab with rel="noopener noreferrer", shows the external-link icon (mirrored in RTL) and adds "(opens in a new tab)" for screen readers. | WCAG 3.2.5: warn before opening a new window. |
Components Button: destructive states | DGA original:Figma defines only the Default state for destructive buttons (Primary, Secondary-Solid, Secondary-Outline, Subtle, Transparent). | Ours:Hovered, pressed, selected, focused and disabled follow the same pattern as the non-destructive styles, using the button-background-danger-* tokens (which already have every state). | A button needs every state. The danger fill tokens exist in Figma for all states. |
Components Button: destructive neutral | DGA original:No destructive variant of Primary-Neutral | Ours:variant="neutral" with destructive renders as destructive primary | Figma has no neutral destructive style. Falling back keeps every prop combination valid. |
Components Button: focus ring | DGA original:Focused is a separate Figma state with a 2px border-black (border-white on colour) stroke inside the button. | Ours:Shown on :focus-visible only (keyboard), as a 2px outline outside the button with a 1px inner ring in the button's surface colour. On-colour buttons use white (icon-oncolor) in both modes. | WCAG 2.4.7 / 2.4.11. An outside outline does not shift the label, and border-white flips to black in dark mode (2.11:1 on the nav header). |
Components Button: transparent on-colour states | DGA original:Hovered, pressed and selected change the label to green-400/300 | Ours:The label stays white; hovered and selected add an underline, pressed adds an underline and 80% opacity. | Colour alone cannot meet 4.5:1 on the brand fill (see the label token fixes). |
Components Button: selected state | DGA original:A separate Figma variant | Ours:Applied with aria-pressed="true" (toggle buttons) or data-selected | Screen readers announce aria-pressed; data-selected covers buttons in menus and groups. |
Components Button: loading | DGA original:Not in Figma | Ours:loading prop: a Spinner replaces the leading icon, the width is kept, aria-busy is set and the button is disabled for clicks but stays focusable. | Async actions need a busy state. Keeping focus avoids losing the user's place. |
How contrast is checked
The token build fails if any of these pairs is below WCAG 2.1 AA, in light or dark mode:
- Text and link colours on
background-white,background-bodyandbackground-card(4.5:1). - Icons and link icons on the same surfaces (3:1, non-text).
text-oncolor-primaryandicon-oncoloron every solid fill (primary, status, nav header, button fills).- Status text on its own tinted background (
text-successonbackground-success-50, and so on).
Disabled states are exempt (WCAG 1.4.3). Component-level pairs are checked as each component is added.
Site CSS vs Figma
tokens/TOKEN_CONFLICTS.md lists the 39 material and 87 rounding-only differences between Figma and the design.dga.gov.sa CSS. Figma is used in every case.