PanaceaDesignsystem
Kildedesign/tokens.json
Eksempel: dokumentasjon Sandkassen

Farger

Nesten monokrom: kalde nøytraler, én merkevarefarge og én varm aksent. Hver farge har en verdi per tema; flatene under viser temaet du ser på nå. Kontrast er regnet mot surface-100 og surface-200, eller mot flaten fargen er laget for.

Laster tokens.json …

Typografi

Tre familier, alle variable (400–700) og servert fra egne servere. Familjen Grotesk til titler, Instrument Sans til tekst og grensesnitt, JetBrains Mono til tall og kode.

display
Aa Øø
Familjen Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
400500600700
sans
Aa Øø
Instrument Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
Samisk: áčđŋšŧž ÁČĐŊŠŦŽ
400500600700
mono
0O 1l
JetBrains Mono
0123456789 −4 500,00
{ "kid": "000010100013" }
400500600700

Tekststiler

Tall og formater

Tall er produktet. Beløp settes i amount, høyrejustert med faste sifferbredder, og negative beløp har ekte minustegn.

HvaI grensesnittetI API-et
Beløp1 172 500,00117250000
Negativt beløp−4 500,00-450000
Dato12.11.2026"2026-11-12"
Organisasjonsnummer312 345 676"312345676"
Kontonummer1234.56.78903"12345678903"
Mva-termin5. termin 2026 (sep–okt)"2026-5"

Høyrejustert kolonne

KontoSaldo
1920 Bankinnskudd1 172 500,00
2400 Leverandørgjeld−48 120,50
2740 Oppgjørskonto mva−111,11
Sum1 124 268,39

Avstand

Rutenett på 4 px. Sidemargen er aldri mindre enn space-4.

Hjørner

Små og presise. Aldri pilleform på knapper.

Komponenter

Fra components.css. Klassene står i hodet på hver prøve.

Knapper.btn .btn-primary
Felt.input .select .field-row
POST
Merkelapper.chip .chip-*
Låst Stabil I balanse Ubalanse Utkast
201 Created 409 Conflict 422 Unprocessable

Fargen bærer tilstand, aldri dekor. Teksten sier alltid det samme som fargen.

Metoder og endepunkt.method-* .endpoint
GETPOSTPUTPATCHDELETE
POST/v1/companies/{companyId}/vat-returns/{term}/submit
Feltreferansedl.fields .field-name .field-type
customerIdstringPåkrevd
Kunden fakturaen gjelder.
delivery"peppol" | "email"
Standard er peppol, som krever at kunden har organisasjonsnummer.
linesarrayPåkrevd
Fakturalinjer.
unitPriceinteger, øre
Pris per enhet uten mva.
vatCodestring
Utgående mva-kode: 3, 31, 33 eller 5.
Kode.panel .panel-head .code-block .tok-*
422 Unprocessable EntityPOST/v1/companies/cmp_0001/vouchersapplication/json
// Debet og kredit er ikke like store
{
  "error": {
    "code": "unbalanced_voucher",
    "message": "total debit (125000) must equal total credit (120000)",
    "details": { "difference": 5000, "retryable": false }
  }
}

Uten panel: pre.code-block får nedsenket flate og avrundede hjørner. Inline: .inline-code.

Faner.tabs .tab .tab-body

Innholdet i første fane. Piltastene bytter fane.

Kort og nøkkelverdier.card .card-head dl.kv
Lønn 2026-10A-melding klar
Brutto
245 000,00 kr
Forskuddstrekk
73 500,00 kr
Frist a-melding
05.11.2026
Tabeller.table tr.group td.num tfoot
KontoNavnDebetKredit
1 Eiendeler
1500Kundefordringer62 500,00
1920Bankinnskudd (valgt rad)1 110 000,00
3 Driftsinntekter
3000Salgsinntekt, avgiftspliktig1 172 500,00
Sum1 172 500,001 172 500,00
Tom tilstand og hjelpetekst.empty .note
Ingen bilag ennå. Bokfør et bilag for å fylle saldobalansen.

Hjelpetekst: Ctrl/⌘ + Enter sender.

Skallet

Rammen rundt arbeidsflater: toppstripe, navigasjon, innhold og en valgfri siderute. Denne siden bruker skallet uten siderute. Se eksempelet for alle tre ruter.

<body class="shell">
  <header class="topbar">…</header>
  <div class="workspace">
    <nav class="pane pane-nav">…</nav>
    <main class="pane pane-main">…</main>
    <aside class="pane pane-aside">…</aside>  <!-- valgfri -->
  </div>
</body>