Designsystem

Import

import { Card } from "@startsidan/ui";

Exempel

Kod

<Card
  headingId="arenden-h"
  title="Mina ärenden"
  count={4}
  action={<MoreLink href="/flode/arenden">Visa alla →</MoreLink>}
>
  <ul className="grid list-none">{/* ListRow-rader */}</ul>
</Card>

Props

Regler

• ·Rubriken sätts av Card. Skriv aldrig en egen <h2> inuti kortet.
• ·tone="ai" kräver att innehållet faktiskt är AI-genererat (R1, R2).
• ·Kortet är en <section>; headingId gör den namngiven (R8).
• ·Huvudet radbryter: blir det trångt hamnar action under rubriken, och antalet följer rubrikens sista ord (ADR-018).

Vanligt fel

• Fel

  <Card className="rounded-xl">

  Rätt

  <Card>

  rounded-lg är V3:s kortform och sätts redan; rounded-xl är shadcns default som medvetet skrivs över.

Import

import { Chip, type ChipTone } from "@startsidan/ui";

Exempel

Kod

<Chip tone="ok">Klart</Chip>
<Chip tone="warn">Väntar på chef</Chip>
<Chip tone="avv">Försenad</Chip>

Props

Regler

• ·Tonen ska följa av data, inte väljas för utseendet.
• ·ok använder statusgrönt (green-bg/green-tx). AI-tonen är blå och betyder aldrig status (R1).

Import

import { AiChip } from "@startsidan/ui";

Exempel

Kod

<AiChip />
<AiChip>✦ Föreslagen prioritet</AiChip>

Props

Regler

• ·Får aldrig utelämnas på AI-ytor (R2).
• ·Stjärnan ✦ är märkets tecken och byts inte ut.

Import

import { Btn, BtnLink } from "@startsidan/ui";

Exempel

Kod

<Btn>Godkänn</Btn>
<Btn variant="ghost" size="sm">Visa detaljer</Btn>
<Btn variant="ai">✦ Sammanfatta åt mig</Btn>
<BtnLink href="/flode/felanmalan">Felanmäl</BtnLink>

Props

Regler

• ·Ett kort har högst en primary. Fler och blicken tappar riktning.
• ·variant="ai" kräver att knappen startar något AI gör (R1).
• ·Fokus ritas av basens outline: 2 px i ring-färgen, utanför knappen. Släck den aldrig med outline-none (R12).

Import

import { StatusRow, type RowStatus } from "@startsidan/ui";

Exempel

Kod

<ul className="grid list-none gap-2">
  <StatusRow
    status="krit"
    title="Attestera tidrapport"
    meta="Tidsgräns passerad · 2 dagar"
    end={<BtnLink href="#" size="sm">Attestera</BtnLink>}
  />
</ul>

Props

Regler

• ·Renderas som <li> och måste ligga i en <ul>.
• ·Kanten bär statusen; resten av raden förblir lugn (R5).
• ·Blir raden för trång bryts handlingarna (end) till en egen rad under titeln – så fungerar den i båda spalterna (R11).

Import

import { ListRow, Progress, Avatar } from "@startsidan/ui";

Exempel

Kod

<ul className="grid list-none">
  <ListRow
    lead={<Avatar initials="AL" />}
    title="Utvecklingsplan 2026"
    meta="Uppdaterad 12 mars"
    end={<Chip tone="warn">Väntar</Chip>}
  >
    <Progress value={60} />
  </ListRow>
</ul>

Props

Regler

• ·Första raden får ingen toppluft och sista ingen avdelare – det sköts av primitiven.
• ·Progress är Radix under ytan; bygg aldrig en egen div med role="progressbar".

Import

import { Avatar } from "@startsidan/ui";

Exempel

Kod

<Avatar initials="KH" />
<Avatar initials="AL" size="sm" />

Props

Regler

• ·Alltid blå. Ingen variantprop för färg finns, och ska inte tillkomma.

Import

import { MoreLink } from "@startsidan/ui";

Exempel

Kod

<Card title="Idag" action={<MoreLink href="#">Kalender →</MoreLink>}>…</Card>

Props

Regler

• ·Pilen → hör till texten, inte till en ikon.

Import

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@startsidan/ui";

Exempel

Kod

<Card headingId="arenden-h" title="Mina ärenden" bodyClassName="px-0 pb-0">
  <Table>
    <TableHeader>
      <TableRow><TableHead>Ärende</TableHead><TableHead>Status</TableHead></TableRow>
    </TableHeader>
    <TableBody>
      <TableRow><TableCell>Behörighet Heroma</TableCell><TableCell><Chip tone="warn">Väntar</Chip></TableCell></TableRow>
    </TableBody>
  </Table>
</Card>

Regler

• ·Tabellen bär egen luft: ge kortet bodyClassName så att raderna går kant i kant.
• ·Kolumnspåret måste kunna krympa (min-width: 0), annars trycker tabellen ut sidan.

Exempel

Kod

<a href={post.lank} className="block rounded-lg border border-border bg-surface px-6 py-5 text-ink no-underline shadow-card transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-blue-acc">
  <span className="flex items-center justify-between gap-2 font-heading text-eyebrow font-bold tracking-[0.12em] text-ink-soft uppercase">
    <span className="hyphens-auto [overflow-wrap:anywhere]">Budgetutfall</span>
    <i aria-hidden="true" className="shrink-0 text-sm not-italic">→</i>
  </span>
  <span className="mt-2.5 mb-1 block font-heading text-kpi leading-[1.1] font-extrabold text-green-tx">
    +2,4<small className="ml-1 text-sm font-bold text-ink-soft">%</small>
  </span>
  <span className="block text-xs text-ink-soft">Mot budget hittills i år</span>
</a>

Regler

• ·Värdet bär tonen (text-blue-tx, text-green-tx, text-amber), aldrig hela rutan (R5).
• ·Etiketten avstavas hellre än kapas – långa etiketter förekommer.

Exempel

Kod

<Card headingId="sammanfattning-h" tone="ai" title="Din vecka" action={<AiChip />}>
  <p className="text-sm text-ink-soft">
    Tre ärenden väntar på dig, varav ett har passerat sin tidsgräns.
  </p>
  <div className="mt-4 flex gap-2">
    <Btn variant="ai" size="sm">✦ Föreslå ordning</Btn>
    <Btn variant="ghost" size="sm">Visa källor</Btn>
  </div>
</Card>

Regler

• ·tone="ai" och AiChip hör ihop: den ena utan den andra är ett fel (R1, R2).
• ·En AI-yta ska kunna peka på sin källa – lämna plats för en källrad eller en länk.

Kod

// packages/modules/<namn>/src/manifest.ts
slots: {
  actions: [
    {
      id: "ledighet-attest",
      roles: ["chef"],
      items: async (ctx) => [
        {
          id: "att-1",
          status: "warn",
          title: "Attestera ledighet – Kim H",
          meta: "Inkom 12 mars",
          chip: { tone: "warn", label: "Väntar" },
          action: { href: "/flode/ledighet", label: "Attestera" },
        },
      ],
    },
  ],
}

Regler

• ·Modulen äger raden, kortet äger ordningen (ADR-007).
• ·status på raden ska följa av data: passerad tidsgräns → krit, väntar på någon → warn.

Kod

import { Card, Chip, ListRow, MoreLink } from "@startsidan/ui";
import type { UserContext } from "@startsidan/module-sdk";
import { hamtaNagot } from "../data";

export async function NagotKort({ ctx }: { ctx: UserContext }) {
  const { poster } = await hamtaNagot(ctx);

  return (
    <Card
      headingId="nagot-h"
      title={ctx.role === "chef" ? "Enhetens ärenden" : "Mina ärenden"}
      count={poster.length}
      action={<MoreLink href="#">Visa alla →</MoreLink>}
    >
      <ul className="grid list-none">
        {poster.map((p) => (
          <ListRow key={p.id} title={p.rubrik} meta={p.kommentar}
            end={<Chip tone={p.chip.ton}>{p.chip.etikett}</Chip>} />
        ))}
      </ul>
    </Card>
  );
}

Regler

• ·Ingen "use client". Datat hämtas på servern (R7, ADR-006).
• ·Rolltexten väljs i komponenten, inte i två olika manifestposter.
• ·key sätts på datats id, aldrig på index.
• ·Kortet fungerar i båda spalterna (R11). Användaren kan flytta det; anpassa med @3xl:, inte md:. Ge widgeten en label i manifestet – den läses upp på flyttknapparna.

Kod

// packages/modules/<namn>/src/manifest.ts
slots: {
  fokus: async (ctx) => ({
    id: "fokus-ny-startsida-2026-10",   // nytt id = visas igen för alla
    kicker: "Fokusnyhet",
    title: "Ny startsida ska göra arbetsdagen enklare för medarbetare och chefer",
    lede: "Från och med i dag möts alla medarbetare av en ny startsida …",
    image: { src: "https://…/bild.png", alt: "" },      // dekorativ: tom alt
    links: [{ label: "Läs hela nyheten", href: "/verktyg/nyheter/ny-startsida", primary: true }],
    from: "Kommunikationsenheten",
    published: "2026-10-05",
  }),
}

Regler

• ·Bara en fokusyta åt gången – den nyaste som inte är stängd.
• ·Formad som en nyhet: bild, datum, rubrik, ingress, avsändare – och en primär länk till hela nyheten. Rubriken länkar dit också.
• ·Ljusblå botten (blue-bg) och blå ram (blue-acc), så att den sticker ut bland de vita korten. Aldrig grönt (R1) eller statusfärg (R5).
• ·Ligger direkt under AI-fältet. Ovanför hälsningen läses den som en introduktion, inte som en nyhet.
• ·Stäng flyttar fokus till AI-fältet, så att tangentbordsanvändaren inte tappar bort sig.

Kod

// packages/modules/<namn>/src/manifest.ts
notifications: async (ctx) => [
  {
    id: "personal:n-godkann-us-108",     // stabilt – läst sparas på id
    kind: "Utvecklingssamtal",           // funktionen, visas som etikett
    title: "Utvecklingssamtal att godkänna",
    meta: "Hanna Sjöberg",
    time: "2026-10-03",
    href: "/verktyg/personal/m-108/utvecklingssamtal",
    status: "warn",                      // kantlinjen: krit, warn, info, ok
  },
]

Regler

• ·href är obligatoriskt och pekar på funktionen, inte på en översikt.
• ·Räkna fram notisen ur datat när det går, så att den försvinner när saken är gjord.
• ·Statusfärgen bärs av kantlinjen, som i "Att agera på" (R5).

Kod

// packages/modules/<namn>/src/manifest.ts
pages: [
  {
    slug: "it-support",
    section: "service-it-lokaler",       // id ur skalets sektionslista
    layout: "hub",
    title: "IT-support",
    lede: "Hjälp med dator, telefon, konton och behörigheter.",
    quickLinks: [{ label: "Felanmäl", text: "Skapa ett ärende", href: "/flode/felanmalan", primary: true }],
    ai: { suggestions: () => [{ label: "Jag har glömt mitt lösenord" }] },
  },
  {
    slug: "prioritering",
    section: "service-it-lokaler",
    parent: "it-support",                  // ger /sidor/service-it-lokaler/it-support/prioritering
    layout: "article",
    title: "Prioriteringsordning för IT-ärenden",
    kicker: "IT-support · Styrande information",
    article: { owner: { name: "IT-avdelningen" }, review: "Granskas årligen" },
    content: async () => ({ blocks: [{ type: "heading", level: 2, text: "Varför prioriterar vi?" }] }),
  },
]

Regler

• ·Brödtexten är högst 72ch bred, i ett vitt kort på artikeln och som prose i kort på ingången.
• ·Innehåll från en extern källa märks alltid med källa, datum och länk till originalet. Märkningen är inte AI-tonad – den är inte AI (R2).
• ·En sparad version märks med ett gult chip: den väntar på källan (R5).
• ·Innehållet är ContentBlock, aldrig HTML. react/no-danger är en lintgrind (AM12).
• ·Länkar till en annan sida i startsidan går via next/link; externa öppnas i ny flik med ↗.
• ·Vanliga frågor och nivåer (P1–P4) är blocket details: native <details>, ett valfritt chip för status, block inuti (ADR-022).
• ·Levande innehåll på en ingång – driftstatus, ärenden – är modulens egna kort i PageManifest.slots, inte text. Redaktionellt är block, i content.cards.
• ·En inramad sida (layout "embed") fyller arbetsytan under menyraden, utan egen rubrik eller kant – som om man var på sidan. Sidans h1 finns för skärmläsare. Blockerar källan ramen visas en förklaring med gult chip, aldrig en tom ram.
• ·En länk med undersidor (PageLink.children) fälls ihop; första raden inuti är sidan själv. Använd det för webbkartor i stället för en egen lista.

Import

import { Varumarke } from "@startsidan/gemensamt/Varumarke"; // apps/projekt/src/varumarke

Exempel

Min startsida, exempel på avsändaren

Kod

<header className="border-b border-border bg-surface">
  <div className="mx-auto flex max-w-[104rem] items-center justify-between gap-4 px-4 py-3 sm:px-8">
    <Varumarke produkt="Min startsida" />
    {/* ytans knappar till höger; menyn i en egen rad under, se monster.huvudmeny */}
  </div>
</header>

Props

Regler

• ·Ordningen är alltid logotyp, lodrät linje, produktnamn – som i kommunikationsguidens topbar.
• ·Logotypen är kommunens fil i public/brand och byts aldrig mot text, en annan färg eller en egen bild.
• ·Måtten är mallens: logotypen 4rem hög, linjen 3.2rem i border-strong och namnet 1.9rem extrabold Raleway; under sm 3.2rem, 2.6rem och 1.5rem så att raden får plats på 375 px.
• ·/brand ligger utanför åtkomstspärren, eftersom avsändaren syns på de öppna sidorna.

Import

import { Hero } from "../projektyta/Hero"; // apps/projekt/src/projektyta

Kod

<Hero>
  <Eyebrow>Status</Eyebrow>
  <h1 className="max-w-[22ch] font-heading text-[3.6rem] leading-[1.08] font-extrabold text-ink sm:text-[4.2rem]">
    Vad har hänt i projektet?
  </h1>
  <p className="max-w-[66ch] text-lg text-ink-soft">…</p>
</Hero>
<div className="mx-auto grid max-w-[104rem] gap-10 px-4 pt-10 pb-16 sm:px-8">…</div>

Props

Regler

• ·Bandet är --color-page-deep med border-b border-border; innehållet under ligger på --color-page.
• ·Heron står direkt under toppraden, eller under brödsmulorna som har samma band – annars blöder fliken in i fel yta.
• ·Länkar i ingressen stryks under (WCAG 1.4.1).

Import

import { Topprad } from "../projektyta/Topprad"; // apps/projekt/src/projektyta

Kod

// projektyta/meny.ts – en ny sida i en grupp
{ href: "/material/ordlista", namn: "Ordlistan" },

// Sidan själv: toppraden från layouten, innehållet i main
<Topprad />
<main id="innehall" tabIndex={-1} className="focus:outline-none">…</main>

Regler

• ·Disclosure-mönstret, inte role="menu": länkar i listor, grupper som knappar med aria-expanded och aria-controls.
• ·Aktuell sida får aria-current="page" och ett streck – aldrig bara en annan färg.
• ·Varje sida med toppraden har <main id="innehall">, så att hopplänken har ett mål.
• ·Det som klistrar under toppraden använder top-(--topprad-hojd), aldrig en fast höjd. Toppraden klistrar bara från lg.
• ·Sidor bakom åtkomstspärren får last: true, så att menyn säger det före klicket.
• ·Ingen fet stil i raden: font-sans text-sm text-ink-soft, ljus botten vid hovring. Fliken man står på har heroens färg och blöder in i <Hero> (monster.hero). Raden bryts hellre än rullar.

Kod

/* apps/portal/src/shell/shell.css – skalets, inte modulernas */
.kpis  { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.board { grid-template-columns: minmax(0, 1fr) 36rem; gap: 2rem; }
.col   { grid-template-columns: minmax(0, 1fr); gap: 2rem; min-width: 0; }

/* I modulens manifest: */
slots: { kpi: [...], main: [...], side: [...] }

Regler

• ·kpi = fyra spår över hela bredden. main = vänsterspalten. side = högerspalten (36 rem).
• ·Under 1180 px blir båda rutnäten enspaltiga. Bygg kortet så att det tål det.
• ·Spåren har min-width: 0 – bryts det trycker en bred tabell ut hela sidan (R6).

Kod

// packages/modules/<namn>/src/manifest.ts
ai: {
  suggestions: (ctx) =>
    ctx.role === "chef"
      ? [{ id: "godkann", label: "Godkänn veckans ledighetsansökningar" }]
      : [{ id: "felanmal", label: "Felanmäl något på kontoret" }],
}

Regler

• ·Fältet är runt (border-radius 999px) och AI-kantat, med ✦ – formen och märket betyder AI (R2).
• ·Förslagen ska vara handlingar användaren faktiskt kan utföra just nu.

Kod

// packages/modules/<namn>/src/manifest.ts
routes: [
  {
    path: "/flode/felanmalan",
    title: "Felanmälan",
    mode: "focus",
    Component: FelanmalanFlode,
  },
]

Regler

• ·mode: "focus" ger FlowBar med Avbryt och inget annat krom (ADR-004).
• ·Samtalet är inmatningen, formuläret är kvittot: visa i realtid vad assistenten uppfattat.
• ·Ärendet skapas aldrig utan uttrycklig bekräftelse – och servern kontrollerar själv att allt obligatoriskt finns.

Kod

// packages/modules/<namn>/src/manifest.ts
routes: [
  { path: "/verktyg/min-ai", title: "Min AI", mode: "full", Component: MinAiVy },
],
slots: {
  // Ingången: en knapp bredvid hälsningen. ai: true ger AI-tonen och ✦.
  genvag: [{ label: "Min AI", href: "/verktyg/min-ai", order: 1, ai: true }],
}

Regler

• ·Vyn äger höjden och scrollningen: fyll ytan med flex och låt bara listor och innehåll scrolla (min-h-0, overflow-y-auto).
• ·Läsbar text hålls i en spalt (högst cirka 78rem) – inte över hela bredden. Ytan bredvid är för en panel, inte för längre rader.
• ·Kolumnen längs kanten blir en låda på smal skärm, öppnad med en knapp med aria-expanded och stängd med Escape.
• ·Ingen rubrik eller ingress ovanför – vyn är ytan. Det vyn behöver säga hör hemma i dess egna fält.