Designsystem för Sundsvalls kommun

Tokens, komponenter och riktlinjer från @sk-web-gui — sökbart för människor, maskinläsbart för AI-agenter.

Hur du använder systemet

Designsystemet konsumeras genom npm-paket, inte genom att kopiera värden härifrån. Den här portalen är dokumentation – paketen är implementationen.

npm install @sk-web-gui/react @sk-web-gui/core

import { Button, Alert, FormControl } from '@sk-web-gui/react';

export function MinSida() {
  return (
    <>
      <Button color="vattjom" variant="primary">Skicka ansökan</Button>
      <Alert type="info">Bra att veta...</Alert>
    </>
  );
}

@sk-web-gui/core registrerar alla CSS-variabler (--color-light-vattjom-*, --space-16, --font-size-h-1 osv.) i :root automatiskt och inkluderar ett Tailwind-preset. Du kommer aldrig på en hex-kod i din egen kod.

Vad finns här

Identitet

Färger, typografi, ikoner och logotyper. Värdena hämtas live från @sk-web-gui/theme.

Komponenter

66 komponenter med riktiga props, varianter och källa-länkar — auto-genererade från web-shared-components-Storybook.

AI-komponenter

19 specialiserade komponenter för AI-flöden: AICornerModule, AIServiceModule, AssistantPresentation, ChatInput m.fl.

Riktlinjer

Tillgänglighet (WCAG 2.2 AA), tonalitet och språkbruk för Sundsvalls digitala tjänster.

Snabblänkar

För AI-agenter Regler och prompt-mall för en AI som ska producera kod mot designsystemet.

llms-full.txt Hela portalens innehåll i en fil – för engångsuppladdning i en AI-assistent.

Färger Primitiver + de fyra varumärkesteman vattjom, grönsta, juniskär, björnstigen.

Button Den primära interaktiva komponenten. Props, varianter, källa-länk.

Förhållande till stilguide.sundsvall.se

Den här portalen speglar Sundsvallskommun/web-shared-components i ett AI-vänligt format. Den ursprungliga stilguiden (stilguide.sundsvall.se) är fortfarande den primära referensen för människor med interaktiv Storybook och fullständiga SiteVision-designriktlinjer. Den här portalen är optimerad för att en AI-assistent ska kunna producera korrekt kod direkt mot designsystemet, utan att människor i mellanled.