diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx
new file mode 100644
index 0000000000..59fdbd6ef1
--- /dev/null
+++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx
@@ -0,0 +1,141 @@
+import { CodeIcon } from '@navikt/aksel-icons';
+
+import { MenuPageLayout } from '@layouts';
+import { CodeSnippet } from '@repo/components';
+
+export const metadata = {
+ title: 'Fargar',
+ description: 'Informasjon om korleis du bruker fargar på frontend.',
+};
+
+export default ({ children }) => (
+ ,
+ color: 'blue',
+ }}
+ />
+);
+
+Denne artikkelen føreset at du allereie har definert fargane du skal bruke ved hjelp av [Temabyggeren](/grunnleggende/for-designere/eget-tema).
+
+HTML data-attributt vert brukt for å definere farge på ein komponent. Komponentane kan nytte alle fargane i temaet.
+
+Når du skal setje farge på ein komponent, er det to data-attributt som kan nyttast:
+- `data-color-scheme` som endrar fargemodus
+- `data-color` som endrar farge
+
+## `data-color-scheme`
+
+Dette data-attributtet blir brukt for å veksle mellom lys, mørk eller andre fargemodusar. Innhald som er barn av dette data-attributtet
+vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta.
+
+
+{`
+
+
+
+
+
+
+
+
+
+`}
+
+
+Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys,
+men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja.
+
+`data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren.
+
+## `data-color`
+
+Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt.
+
+
+{`
+
+
+
+`}
+
+
+Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert.
+Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge.
+
+## Korleis komponentar blir påverka
+
+Me delar komponentar inn i 3 grupper for farge:
+- Eksplisitt
+- Nøytral
+- Cascading
+
+### Eksplisitt
+
+Komponentar brukt til validering eller systemvarslar følgjer eigne dedikerte systemfargar, og arvar ikkje farge frå næraste forelder med `data-color` satt.
+Dei dedikerte systemfargane er `success`, `warning`, `fanger` og `info`.
+
+Dette er komponentar som
+- `Alert`
+- `ValidationMessage`
+- `ErrorSummary`
+
+### Nøytral
+
+Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte `data-color`. Dette er komponentar som `Modal` og `Tooltip`.
+Desse brukar alltid `neutral` fargen.
+
+### Cascading
+
+Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt.
+
+
+{`
+
+ Denne Chip'en har neutral farge.
+
+
+
+
+
+
+
+ Eg har ikkje neutral farge.
+
+
+`}
+
+
+## Bruk `data-color-scheme` og `data-color` saman
+
+Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargemodus og farge på komponentar.
+
+`data-color` set variablar som blir resatt av `data-color-scheme`. Dersom du endrar fargemodus, må du setje `data-color` på nytt.
+
+
+{`
+
+
+
+
+
+
+
+
+
+
+
+
+
+`}
+
+
+## Kort oppsummert
+
+Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargemodus med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt.
diff --git a/apps/storefront/siteConfig.tsx b/apps/storefront/siteConfig.tsx
index 79f731f242..d7463d5bbd 100644
--- a/apps/storefront/siteConfig.tsx
+++ b/apps/storefront/siteConfig.tsx
@@ -94,6 +94,10 @@ export const SiteConfig = {
name: 'Kom i gang',
url: 'grunnleggende/for-utviklere/kom-i-gang',
},
+ {
+ name: 'Fargar',
+ url: 'grunnleggende/for-utviklere/fargar',
+ },
{
name: 'Komposisjon',
url: 'grunnleggende/for-utviklere/komposisjon',