diff --git a/.claude/launch.json b/.claude/launch.json
index 6036c12..81f9f0c 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -4,9 +4,8 @@
     {
       "name": "www",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["--filter", "www", "dev", "--port", "4699"],
-      "port": 4699,
-      "autoPort": false
+      "runtimeArgs": ["--filter", "www", "dev"],
+      "port": 5173
     }
   ]
 }
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
new file mode 100644
index 0000000..d742370
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.module.css
@@ -0,0 +1,60 @@
+.container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  gap: var(--ds-size-8);
+  align-items: start;
+  max-width: 100%;
+  margin-block: var(--ds-size-8);
+
+  @media (max-width: 900px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-6);
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-4);
+  padding: var(--ds-size-6);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  border-radius: var(--ds-border-radius-lg);
+  background-color: var(--ds-color-neutral-background-tinted);
+
+  @media (min-width: 901px) {
+    position: sticky;
+    top: calc(var(--header-height) + var(--ds-size-4));
+    max-height: calc(100dvh - var(--header-height) - var(--ds-size-8));
+  }
+}
+
+.signature {
+  padding: var(--ds-size-5);
+  background-color: #fff;
+  border-radius: var(--ds-border-radius-md);
+  overflow: auto;
+  min-height: 0;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-2);
+  align-items: start;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
new file mode 100644
index 0000000..773d383
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/email-signatur-generator.tsx
@@ -0,0 +1,233 @@
+import {
+  Button,
+  Checkbox,
+  Fieldset,
+  Heading,
+  Paragraph,
+  Radio,
+  Textfield,
+  ValidationMessage,
+} from '@digdir/designsystemet-react';
+import { CheckmarkIcon, FilesIcon } from '@navikt/aksel-icons';
+import { useEffect, useId, useMemo, useState } from 'react';
+import classes from './email-signatur-generator.module.css';
+import {
+  getLanguages,
+  getOffice,
+  type LanguageCode,
+  LOGO_PATH,
+  languages,
+  type OfficeId,
+  offices,
+} from './signature-config';
+import {
+  buildSignatureHtml,
+  buildSignatureText,
+  type SignatureData,
+} from './signature-template';
+
+type CopyState = 'idle' | 'copied' | 'error';
+
+const copySignature = async (html: string, text: string) => {
+  if (typeof ClipboardItem !== 'undefined' && navigator.clipboard?.write) {
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/html': new Blob([html], { type: 'text/html' }),
+          'text/plain': new Blob([text], { type: 'text/plain' }),
+        }),
+      ]);
+      return;
+    } catch {}
+  }
+
+  const holder = document.createElement('div');
+  holder.setAttribute('contenteditable', 'true');
+  holder.innerHTML = html;
+  holder.style.position = 'fixed';
+  holder.style.left = '-9999px';
+  document.body.appendChild(holder);
+
+  try {
+    const range = document.createRange();
+    range.selectNodeContents(holder);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+
+    if (!document.execCommand('copy')) {
+      throw new Error('execCommand("copy") was rejected');
+    }
+    selection?.removeAllRanges();
+  } finally {
+    holder.remove();
+  }
+};
+
+export const EmailSignatureGenerator = () => {
+  const previewId = useId();
+
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('');
+  const [phone, setPhone] = useState('');
+  const [office, setOffice] = useState<OfficeId>('leikanger');
+  const [selectedLanguages, setSelectedLanguages] = useState<LanguageCode[]>([
+    'nb',
+  ]);
+  const [copyState, setCopyState] = useState<CopyState>('idle');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  const noLanguage = selectedLanguages.length === 0;
+
+  const input: SignatureData = useMemo(
+    () => ({
+      name,
+      role,
+      phone,
+      office: getOffice(office),
+      languages: getLanguages(selectedLanguages),
+    }),
+    [name, role, phone, office, selectedLanguages],
+  );
+
+  const previewHtml = useMemo(
+    () => buildSignatureHtml({ ...input, logoSrc: LOGO_PATH }),
+    [input],
+  );
+
+  const toggleLanguage = (code: LanguageCode, checked: boolean) => {
+    setSelectedLanguages((current) =>
+      checked
+        ? [...current, code]
+        : current.filter((language) => language !== code),
+    );
+  };
+
+  const onCopy = async () => {
+    const html = buildSignatureHtml({
+      ...input,
+      logoSrc: new URL(LOGO_PATH, window.location.origin).href,
+    });
+
+    try {
+      await copySignature(html, buildSignatureText(input));
+      setCopyState('copied');
+    } catch {
+      setCopyState('error');
+    }
+  };
+
+  useEffect(() => {
+    if (copyState !== 'copied') return;
+    const timer = window.setTimeout(() => setCopyState('idle'), 2500);
+    return () => window.clearTimeout(timer);
+  }, [copyState]);
+
+  if (!mounted) {
+    return <div className={classes.container} aria-hidden='true' />;
+  }
+
+  return (
+    <div className={classes.container}>
+      <form
+        className={classes.form}
+        onSubmit={(event) => event.preventDefault()}
+      >
+        <Textfield
+          label='Navn'
+          value={name}
+          autoComplete='name'
+          onChange={(event) => setName(event.target.value)}
+        />
+        <Textfield
+          label='Rolle'
+          value={role}
+          autoComplete='organization-title'
+          onChange={(event) => setRole(event.target.value)}
+        />
+        <Textfield
+          label='Telefonnummer'
+          type='tel'
+          value={phone}
+          autoComplete='tel'
+          onChange={(event) => setPhone(event.target.value)}
+        />
+
+        <Fieldset>
+          <Fieldset.Legend>Kontorsted</Fieldset.Legend>
+          {offices.map((item) => (
+            <Radio
+              key={item.id}
+              name='office'
+              label={item.label}
+              description={item.address}
+              value={item.id}
+              checked={office === item.id}
+              onChange={() => setOffice(item.id)}
+            />
+          ))}
+        </Fieldset>
+
+        <Fieldset>
+          <Fieldset.Legend>Språk</Fieldset.Legend>
+          <Fieldset.Description>
+            Velg ett eller flere. Signaturen får én bolk per språk.
+          </Fieldset.Description>
+          {languages.map((language) => (
+            <Checkbox
+              key={language.code}
+              name='language'
+              label={language.label}
+              value={language.code}
+              checked={selectedLanguages.includes(language.code)}
+              onChange={(event) =>
+                toggleLanguage(language.code, event.target.checked)
+              }
+            />
+          ))}
+          {noLanguage && (
+            <ValidationMessage>Velg minst ett språk.</ValidationMessage>
+          )}
+        </Fieldset>
+      </form>
+
+      <section
+        className={classes.preview}
+        aria-labelledby={`${previewId}-heading`}
+      >
+        <Heading level={2} data-size='2xs' id={`${previewId}-heading`}>
+          Forhåndsvisning
+        </Heading>
+
+        <div
+          className={classes.signature}
+          // The markup is built by `signature-template.ts` from escaped input –
+          // rendering it here is what keeps preview and clipboard identical.
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: see above
+          dangerouslySetInnerHTML={{ __html: previewHtml }}
+        />
+
+        <div className={classes.actions}>
+          <Button type='button' onClick={onCopy} disabled={noLanguage}>
+            {copyState === 'copied' ? (
+              <CheckmarkIcon aria-hidden />
+            ) : (
+              <FilesIcon aria-hidden />
+            )}
+            {copyState === 'copied' ? 'Kopiert!' : 'Kopier signatur'}
+          </Button>
+          {copyState === 'error' && (
+            <ValidationMessage>
+              Kopieringen feilet. Marker signaturen over og kopier den manuelt.
+            </ValidationMessage>
+          )}
+        </div>
+        <Paragraph data-size='sm' aria-live='polite' className={classes.srOnly}>
+          {copyState === 'copied' ? 'Signaturen er kopiert.' : ''}
+        </Paragraph>
+      </section>
+    </div>
+  );
+};
diff --git a/apps/www/app/_components/email-signature-generator/signature-config.ts b/apps/www/app/_components/email-signature-generator/signature-config.ts
new file mode 100644
index 0000000..e0f55c5
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/signature-config.ts
@@ -0,0 +1,80 @@
+export type LanguageCode = 'nb' | 'nn' | 'en';
+export type OfficeId = 'leikanger' | 'oslo' | 'bronnoysund';
+
+export type Office = {
+  id: OfficeId;
+  /** Label shown in the radio group. */
+  label: string;
+  /** Visiting address, printed verbatim in the signature. */
+  address: string;
+};
+
+export type Language = {
+  code: LanguageCode;
+  /** Label shown in the checkbox group. */
+  label: string;
+  /** `lang` attribute on the language block. */
+  htmlLang: string;
+  greeting: string;
+  phoneLabel: string;
+};
+
+// TODO: bekreft besøksadressene før siden publiseres.
+export const offices: Office[] = [
+  {
+    id: 'leikanger',
+    label: 'Leikanger',
+    address: 'Askedalen 4, 6863 Leikanger, NO',
+  },
+  {
+    id: 'oslo',
+    label: 'Oslo',
+    address: 'Lørenfaret 1 C, 0585 Oslo, NO',
+  },
+  {
+    id: 'bronnoysund',
+    label: 'Brønnøysund',
+    address: 'Havnegata 48, 8900 Brønnøysund, NO',
+  },
+];
+
+export const languages: Language[] = [
+  {
+    code: 'nb',
+    label: 'Bokmål',
+    htmlLang: 'nb-NO',
+    greeting: 'Vennlig hilsen',
+    phoneLabel: 'Mob',
+  },
+  {
+    code: 'nn',
+    label: 'Nynorsk',
+    htmlLang: 'nn-NO',
+    greeting: 'Venleg helsing',
+    phoneLabel: 'Mob',
+  },
+  {
+    code: 'en',
+    label: 'Engelsk',
+    htmlLang: 'en',
+    greeting: 'Kind regards',
+    phoneLabel: 'Phone',
+  },
+];
+
+export const getOffice = (id: OfficeId): Office =>
+  offices.find((office) => office.id === id) ?? offices[0];
+
+/** Languages in the order they are declared above, not the order they were ticked. */
+export const getLanguages = (codes: LanguageCode[]): Language[] =>
+  languages.filter((language) => codes.includes(language.code));
+
+/** Printed once, under the logo – the same for every office and language. */
+export const POSTAL_ADDRESS = 'Postboks 1382 Vika, 0114 Oslo, NO';
+
+export const WEBSITE = { label: 'digdir.no', href: 'https://www.digdir.no' };
+
+/** Path to the logo used in the signature, relative to the site root. */
+export const LOGO_PATH = '/images/digdir-epost.png';
+export const LOGO_ALT = 'Digdir';
+export const LOGO_WIDTH = 130;
diff --git a/apps/www/app/_components/email-signature-generator/signature-template.ts b/apps/www/app/_components/email-signature-generator/signature-template.ts
new file mode 100644
index 0000000..4716748
--- /dev/null
+++ b/apps/www/app/_components/email-signature-generator/signature-template.ts
@@ -0,0 +1,93 @@
+import {
+  type Language,
+  LOGO_ALT,
+  LOGO_WIDTH,
+  type Office,
+  POSTAL_ADDRESS,
+  WEBSITE,
+} from './signature-config';
+
+/** Everything the signature says, except how to reach the logo. */
+export type SignatureData = {
+  name: string;
+  role: string;
+  phone: string;
+  office: Office;
+  /** One block is rendered per language, in the order given. */
+  languages: Language[];
+};
+
+export type SignatureInput = SignatureData & {
+  /**
+   * `src` for the logo. The preview passes a root-relative path; the copy
+   * passes an absolute URL, since a relative one cannot resolve in a mail client.
+   */
+  logoSrc: string;
+};
+
+const FONT_STACK =
+  "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif";
+const TEXT_COLOR = '#1E2B3C';
+const RULE_COLOR = '#D3D9E1';
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+
+/** Placeholders keep the preview readable before the form is filled in. */
+const or = (value: string, fallback: string) => value.trim() || fallback;
+
+const line = `margin:0;font-family:${FONT_STACK};font-size:14px;line-height:20px;color:${TEXT_COLOR};`;
+const digdir_hex = '#C2132C';
+/** Closes a group – the blank line the format calls for. */
+const gap = 'margin:0 0 20px;';
+
+/* Split phone number into XX XX XX XX */
+const formatPhone = (phone: string) => phone.replace(/(\d{2})(?=\d)/g, '$1 ');
+
+const buildLanguageBlock = (
+  language: Language,
+  { name, role, phone, office }: SignatureData,
+) => `<div lang="${language.htmlLang}" style="${line}">
+  <p style="${line}${gap}">${escapeHtml(language.greeting)}</p>
+  <p style="${line}"><strong>${escapeHtml(or(name, 'Navn Navnesen'))}</strong></p>
+  <p style="${line}${gap}"><em style="font-style:italic;">${escapeHtml(or(role, 'stilling'))}</em></p>
+  <p style="${line}${gap}">${escapeHtml(language.phoneLabel)}: ${escapeHtml(or(formatPhone(phone), 'XX XX XX XX'))}</p>
+  <p style="${line}${gap}">${escapeHtml(office.address)}</p>
+</div>`;
+
+export const buildSignatureHtml = (input: SignatureInput): string => {
+  const separator = `<div style="border-top:1px solid ${RULE_COLOR};margin:0 0 20px;font-size:0;line-height:0;">&nbsp;</div>`;
+
+  const blocks = input.languages
+    .map((language) => buildLanguageBlock(language, input))
+    .join(`\n  ${separator}\n  `);
+
+  return `<div style="${line}">
+  ${blocks}
+  <img src="${input.logoSrc}" alt="${LOGO_ALT}" width="${LOGO_WIDTH}" style="display:block;border:0;margin:0 0 20px;width:${LOGO_WIDTH}px;height:auto;" />
+  <p style="${line}">${escapeHtml(POSTAL_ADDRESS)}</p>
+  <p style="${line}"><a href="${WEBSITE.href}" style="color:${digdir_hex};text-decoration:underline;">${escapeHtml(WEBSITE.label)}</a></p>
+</div>`;
+};
+
+/** Plain-text flavour, for clients and paste targets that reject HTML. */
+export const buildSignatureText = (input: SignatureData): string =>
+  [
+    ...input.languages.map((language) =>
+      [
+        language.greeting,
+        '',
+        or(input.name, 'Navn Navnesen'),
+        or(input.role, 'stilling'),
+        '',
+        `${language.phoneLabel}: ${or(formatPhone(input.phone), 'XX XX XX XX')}`,
+        '',
+        input.office.address,
+      ].join('\n'),
+    ),
+    [POSTAL_ADDRESS, WEBSITE.href].join('\n'),
+  ].join('\n\n');
diff --git a/apps/www/app/_components/mdx-components/mdx-components.tsx b/apps/www/app/_components/mdx-components/mdx-components.tsx
index c3b0fa9..bf19158 100644
--- a/apps/www/app/_components/mdx-components/mdx-components.tsx
+++ b/apps/www/app/_components/mdx-components/mdx-components.tsx
@@ -29,6 +29,7 @@ import {
 import { getMDXComponent } from 'mdx-bundler/dist/client';
 import { type ComponentType, type JSX, useMemo } from 'react';
 import { Link as RRLink } from 'react-router';
+import { EmailSignatureGenerator } from '../email-signature-generator/email-signatur-generator';
 import ExpandableImage from '../expandable-image/expandable-image';
 import classes from './mdx-components.module.css';
 
@@ -60,6 +61,7 @@ const defaultComponents = {
   DetailsContent,
   DetailsSummary,
   Divider,
+  EmailSignatureGenerator,
   h1: (props: HeadingProps) => (
     <Heading className={classes.heading} level={1} data-size='xl' {...props} />
   ),
diff --git a/apps/www/app/content/digdir/kom-i-gang.mdx b/apps/www/app/content/digdir/kom-i-gang.mdx
deleted file mode 100644
index 0e89a64..0000000
--- a/apps/www/app/content/digdir/kom-i-gang.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Kom i gang
-sidebar_title: Kom i gang
-description: Slik tar du i bruk Digdir-profilen i prosjektet ditt.
-category: Introduksjon
-order: 1
-published: true
----
-
-Velkommen til dokumentasjonen for **Digdir**-profilen. Denne siden er skrevet i
-MDX og rendres gjennom det samme systemet som designsystemet.no.
-
-## Installasjon
-
-Installer pakkene du trenger:
-
-```bash
-pnpm add @digdir/designsystemet-react @digdir/designsystemet-css
-```
-
-## Bruk en komponent
-
-Importer og bruk komponenter slik:
-
-```tsx
-import { Button } from '@digdir/designsystemet-react';
-
-export function Example() {
-  return <Button>Trykk her</Button>;
-}
-```
-
-<Alert data-color='info'>
-  Tips: alle sider får automatisk en innholdsfortegnelse basert på
-  overskriftene dine.
-</Alert>
-
-## Neste steg
-
-Se [fargene](/digdir/colors) og [komponentene](/digdir/components) for mer
-informasjon.
diff --git a/apps/www/app/content/digdir/komponenter.mdx b/apps/www/app/content/digdir/komponenter.mdx
deleted file mode 100644
index 561f83f..0000000
--- a/apps/www/app/content/digdir/komponenter.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Komponenter
-sidebar_title: Komponenter
-description: Oversikt over komponenter i Digdir-profilen.
-category: Styling
-order: 2
-published: true
----
-
-Komponentene kommer fra `@digdir/designsystemet-react` og styles av profilens
-tema.
-
-## Varsler
-
-Bruk `Alert` for å fremheve viktig informasjon:
-
-<Alert data-color='warning'>
-  Husk å teste komponentene med tastatur og skjermleser.
-</Alert>
-
-## Merkelapper
-
-Du kan bruke `Badge` for å vise status eller antall.
-
-## Mer
-
-Dette er kun eksempelinnhold – legg til dine egne MDX-filer under
-`app/content/digdir/` for å utvide dokumentasjonen.
diff --git a/apps/www/app/content/digdir/profilering/epost-signatur.mdx b/apps/www/app/content/digdir/profilering/epost-signatur.mdx
new file mode 100644
index 0000000..0572cce
--- /dev/null
+++ b/apps/www/app/content/digdir/profilering/epost-signatur.mdx
@@ -0,0 +1,24 @@
+---
+title: Epost-signatur
+sidebar_title: Epost-signatur
+description: Generer epost-signatur.
+category: Profilering
+order: 10
+published: true
+---
+
+Sett opp e-postsignaturen i tråd med Digdir sin visuelle identitet:
+
+1. Fyll ut skjemaet under.
+2. Trykk **Kopier signatur**.
+3. Åpne innstillingene for e-postsignatur i e-postklienten din.
+4. Fyll inn signaturnavn: `Standard`.
+5. Lim inn i signaturfeltet.
+6. Velg `Standard` for nye meldinger.
+7. Trykk **Lagre**.
+
+<Alert data-color='info'>
+  Noen e-postklienter endrer litt på formateringen, så for eksempel lenker kan bli blå.
+</Alert>
+
+<EmailSignatureGenerator />
diff --git a/apps/www/public/images/digdir-epost.png b/apps/www/public/images/digdir-epost.png
new file mode 100644
index 0000000..23c2105
Binary files /dev/null and b/apps/www/public/images/digdir-epost.png differ