System Requirements Document for bogf-ring-bilag

1. Introduction

bogf-ring-bilag er et bogføringssystem til personligt brug for én selvstændig regnskabsansvarlig i Danmark. Systemets formål er at samle den løbende bogføring i ét sammenhængende værktøj, hvor bilag, bankoplysninger/bankposteringer og afstemninger hænger sammen, så regnskabet stemmer og er dokumenteret.

Produktets intent er at give brugeren — Mads Brock-Madsen — en præcis arbejdsflade til at registrere og vedligeholde bilag, indlæse bankposteringer, knytte bilag til bankposteringer og gennemføre afstemninger, samt at kunne se status over afstemte og manglende posteringer. Systemet er et værktøj til gentaget, dagligt arbejde med rigtige penge og juridiske forpligtelser; det skal føles som et præcist instrument frem for en markedsføringsside.

Målgruppen er den enkelte bogholder/regnskabsansvarlige, der arbejder alene i systemet med egne varige regnskabsdata.

2. System Overview

Systemet leveres som en applikationsejet webflade med egen brugeridentitet. Brugeren starter selv med at tage systemet i brug og vender tilbage til sine egne varige bogføringsdata via login. Alle arbejdsflader er applikationsejede og bygget som custom UI.

Aktører:

• Bogholder / Regnskabsansvarlig (eneste aktive menneskelige persona): registrerer og vedligeholder bilag, indlæser bankposteringer, knytter bilag til bankposteringer, gennemfører afstemninger og følger status.
• Systemet (ikke-persona): understøtter lagring af bilag og bankposteringer, kobling mellem dem og opgørelse af afstemningsstatus.

Accepteret adfærd i nuværende leverance:

• Selvbetjent oprettelse af brugeradgang før første bogføringsarbejde.
• Tilbagevendende verificering ved adgang til brugerens varige bogføringsdata.
• Registrering og vedligeholdelse af bilag.
• Håndtering af bankoplysninger og bankposteringer, herunder import/indlæsning.
• Afstemning mellem bilag og bankposteringer.
• Statusoversigt over afstemte og manglende posteringer.

Afgrænsning: Systemet er til personens egen bogføring. Der er ikke angivet flerbrugersamarbejde, rollebaseret adgang, fakturering, løn, momsindberetning til myndigheder eller andre tilstødende regnskabsmoduler, og sådanne capabilities er ikke en del af denne leverance.

2a. Product Interpretation and Delivery Boundary

Leveranceform: En applikationsejet webapplikation med custom UI. Brugeren arbejder i et samlet system, hvor bilag og bankoplysninger hænger sammen.

Adgang og identitet: Brugeren skal selv kunne oprette sin adgang (selvbetjent, uden invitation eller anden adgangsgrænse) og efterfølgende kunne vende tilbage og fortsætte arbejdet med egne varige regnskabsdata. Den offentlige indgang (Landing) og adgangsfladerne (Login, Sign Up) er anonymt tilgængelige; de arbejdsflader, der rummer brugerens varige bogføringsdata (Bilag, Bilag Detaljer, Bank, Bank Import, Afstemning, Status), kræver, at brugeren er logget ind. Der etableres ikke differentierede rettigheder eller rollebaseret synlighed — der er én bruger og ét sæt egne data.

Nuværende vs. fremtidigt: Alle nedenstående krav er aktuelle. Der er ikke angivet fremtidige krav i den autoritative kilder.

2b. Page Content and Component Coverage

Landing

• Information/state: Anonym indgang, der forklarer systemets bogføringsformål og understøttelse af bilag, bank og afstemninger. Hero-overskrift "Bogføring der stemmer." i Inter Tight, venstrejusteret på grafitsfælde; en enkelt undertekstlinje i muted; en enkelt tangerine CTA "Opret konto". Til højre, blødende ud over viewport-kanten, et virkeligt skærmbillede af Afstemning-reconcileren: bankposteringer i en linjeret tabel, bilag på den anden side, matchede par forbundet med hairline-konnektorer, én række fremhævet i amber (uafstemt) og én i tangerine (netop matchet). En 1px regel under heroen og en linje tabular tal i muted: "47 afstemt · 12 uafstemte · 3 mangler bilag".
• Primære handlinger: "Opret konto" (fører til Sign Up). Sekundær: navigere til Login.
• Støttende handlinger: Ingen.
• Domæneentiteter: Ingen brugerdata; kun præsentationsindhold og et illustrativt skærmbillede af reconcileren.
• Komponentansvar: Hero-sektion med overskrift, undertekst, CTA; produktflade-billede med hairline-konnektorer; statuslinje med tabular tal; 1px skillelinje.
• Tilstande: Loading: statisk indhold, ingen dataloading. Empty: ikke relevant. Success: siden vises med hero og CTA. Error: hvis skærmbilledet ikke kan indlæses, vises en hairline-ramme med alternativ tekstbeskrivelse af reconcileren. Recovery: brugeren kan stadig bruge CTA til at oprette konto.

Login

• Information/state: Anonym adgangsflade til at vende tilbage til eget bogføringssystem og fortsætte med egne varige regnskabsdata. Felter til verificering af brugerens identitet.
• Primære handlinger: Log ind og fortsæt til bogføringsarbejdet.
• Støttende handlinger: Navigere til Sign Up, hvis brugeren endnu ikke har adgang.
• Domæneentiteter: Brugeridentitet (applikationsejet).
• Komponentansvar: Formular med inputfelter (6px radius, 1px hairline border), primær tangerine knap, fejlbeskedområde, link til Sign Up.
• Tilstande: Loading: knap viser inaktiv tilstand under verificering. Empty: tomme felter med labels i uppercase micro-label. Success: brugeren sendes videre til bogføringsarbejdet. Error: ugyldige oplysninger vises som fejlbesked uden at afsløre om brugeren findes. Recovery: brugeren kan rette oplysningerne og forsøge igen.

Sign Up

• Information/state: Anonym adgangsflade til selvbetjent oprettelse af brugeradgang før første bogføringsarbejde. Ingen invitation eller anden adgangsgrænse er angivet.
• Primære handlinger: Opret konto og dermed egen adgang til systemet.
• Støttende handlinger: Navigere til Login, hvis brugeren allerede har adgang.
• Domæneentiteter: Brugeridentitet (applikationsejet).
• Komponentansvar: Formular med inputfelter, primær tangerine knap, fejlbeskedområde, link til Login.
• Tilstande: Loading: knap viser inaktiv tilstand under oprettelse. Empty: tomme felter med labels. Success: brugeren får oprettet adgang og kan fortsætte til bogføringsarbejdet. Error: manglende eller ugyldige oplysninger vises som fejlbesked. Recovery: brugeren kan rette oplysningerne og forsøge igen.

Bilag

• Information/state: Oversigt over bilag, som brugeren skal registrere og vedligeholde i bogføringen. Dense hairline-ruled tabel med sticky uppercase 11px/0.08em headers, rækker i 40px højde, 1px #2A2D31 regler. Kolonner med beløb, datoer og bilagsnumre i tabular-lining figures, højrejusteret i pengekolonner. Persistent højre detail-panel på desktop; full-screen sheet under 768px.
• Primære handlinger: Åbne et bilag for registrering/ændring (fører til Bilag Detaljer). Oprette nyt bilag.
• Støttende handlinger: Filtrere/sortere i listen; vælge et bilag for at se detaljer i sidepanelet.
• Domæneentiteter: Bilag (bilagsnummer, dato, beløb, beskrivelse, status).
• Komponentansvar: Tabel med sticky headers; række-komponenter; detail-panel; opret-knap; filter-/sorteringskontroller.
• Tilstande: Loading: tabel viser loading-tilstand. Empty: ingen bilag vises med en klar tom-tilstand og opfordring til at oprette det første bilag. Success: bilag vises i listen og i detail-panelet. Error: hvis listen ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen. Recovery: brugeren kan genindlæse listen eller oprette bilag manuelt.

Bilag Detaljer

• Information/state: Fokuseret arbejdsflade til registrering og ændring af et enkelt bilag. Felter med 6px radius og 1px hairline borders; labels i uppercase micro-label; beløb og datoer i tabular figures.
• Primære handlinger: Gemme bilag (tangerine "Gem bilag").
• Støttende handlinger: Annullere ændringer; slette bilag; navigere tilbage til Bilag.
• Domæneentiteter: Bilag (bilagsnummer, dato, beløb, beskrivelse, status, eventuel kobling til bankpostering).
• Komponentansvar: Formular med inputfelter; gem-/annuller-knapper; slettehandling; fejlbeskedområde.
• Tilstande: Loading: formularen viser loading-tilstand, mens bilaget hentes. Empty: ny bilagsformular med tomme felter. Success: bilaget gemmes og vises med bekræftelse. Error: valideringsfejl eller gemmefejl vises som fejlbesked. Recovery: brugeren kan rette felterne og gemme igen; ændringer bevares i formularen indtil de gemmes eller annulleres.

Bank

• Information/state: Oversigt over bankoplysninger og bankposteringer, der indgår i bogføringen. Dense hairline-ruled tabel med sticky uppercase headers, rækker i 40px, tabular tal i pengekolonner. Uafstemte bankposteringer markeres med amber-signal (#E8A33D); matchede med muted.
• Primære handlinger: Åbne en bankpostering for at se eller knytte den til et bilag. Starte import af bankposteringer (fører til Bank Import).
• Støttende handlinger: Filtrere/sortere i listen; vælge en postering for detaljer i sidepanelet.
• Domæneentiteter: Bankpostering (dato, beløb, tekst, status: uafstemt/matchet), bankoplysninger.
• Komponentansvar: Tabel med sticky headers; række-komponenter med status-signal; detail-panel; import-knap; filter-/sorteringskontroller.
• Tilstande: Loading: tabel viser loading-tilstand. Empty: ingen bankposteringer vises med tom-tilstand og opfordring til at importere. Success: posteringer vises med korrekt status-signal. Error: hvis listen ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen. Recovery: brugeren kan genindlæse eller starte import.

Bank Import

• Information/state: Arbejdsflade til at hente eller indlæse bankposteringer til bogføringen. Viser hvilke posteringer der er fundet/indlæst, og hvilke der allerede findes.
• Primære handlinger: Importér bank (tangerine "Importér bank").
• Støttende handlinger: Vælge kilde/fil for import; annullere import; navigere tilbage til Bank.
• Domæneentiteter: Bankpostering (dato, beløb, tekst), importkilde.
• Komponentansvar: Importformular/vælger; forhåndsvisning af posteringer; import-knap; fejlbeskedområde.
• Tilstande: Loading: import viser fremdrift. Empty: ingen posteringer fundet i kilden vises med besked. Success: posteringer indlæses og fremgår af Bank. Error: hvis importen fejler, vises fejlbesked med mulighed for at forsøge igen. Recovery: brugeren kan vælge en anden kilde eller forsøge igen.

Afstemning

• Information/state: Arbejdsflade til afstemning mellem bilag og bankposteringer. To-kolonne reconciler: bankposteringer til venstre, bilag til højre, matchede par forbundet med en tegnet hairline-konnektor. Uafstemte rækker i amber; netop matchede i tangerine, hvorefter de skifter til muted.
• Primære handlinger: Afstem (tangerine "Afstem") — knytte en bankpostering til et bilag.
• Støttende handlinger: Vælge en bankpostering og et bilag; fjerne en kobling; navigere til Status.
• Domæneentiteter: Bankpostering, bilag, kobling mellem dem, afstemningsstatus.
• Komponentansvar: To-kolonne layout; række-komponenter med status-signal; hairline-konnektor mellem matchede par; afstem-knap; fejlbeskedområde.
• Tilstande: Loading: begge kolonner viser loading-tilstand. Empty: ingen uafstemte posteringer vises med besked om, at alt er afstemt. Success: matchede par vises med konnektor og muted status. Error: hvis en afstemning ikke kan gennemføres, vises fejlbesked, og rækkerne forbliver i deres oprindelige tilstand. Recovery: brugeren kan forsøge at matche igen eller fjerne koblingen.

Status

• Information/state: Statusoversigt over afstemte og manglende posteringer. Status er optællinger og lister, ikke diagrammer: fx "12 uafstemte, 3 mangler bilag, 47 afstemt i denne måned". Tal i tabular figures.
• Primære handlinger: Gå til de posteringer, der mangler afstemning eller bilag.
• Støttende handlinger: Skifte periode for optællingen.
• Domæneentiteter: Afstemningsstatus, optællinger af afstemte/uafstemte/manglende bilag.
• Komponentansvar: Optællingslinjer med tabular tal; liste over manglende posteringer; periodevælger.
• Tilstande: Loading: optællinger viser loading-tilstand. Empty: ingen posteringer i perioden vises med besked. Success: optællinger og lister vises. Error: hvis optællinger ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen. Recovery: brugeren kan genindlæse eller skifte periode.

3. Functional Requirements

FR-1 — Selvbetjent oprettelse af brugeradgang (provenance: required_inference) As a Bogholder / Regnskabsansvarlig I should kunne oprette min egen brugeradgang selvbetjent, uden invitation eller anden adgangsgrænse, så jeg kan tage systemet i brug til min egen bogføring.

• Trigger/input: Brugeren åbner Sign Up og indtaster de nødvendige oplysninger.
• Observable result: Brugeradgangen oprettes, og brugeren kan fortsætte til bogføringsarbejdet.
• Access state: Anonym adgang (access_requirement: none).
• Failure/recovery: Manglende eller ugyldige oplysninger vises som fejlbesked; brugeren kan rette og forsøge igen.
• Continuation: Brugeren fortsætter til sit bogføringsarbejde.

FR-2 — Tilbagevendende verificering ved adgang til varige bogføringsdata (provenance: required_inference) As a Bogholder / Regnskabsansvarlig I should kunne verificere min identitet ved tilbagevenden, så jeg kan fortsætte arbejdet med mine egne varige regnskabsdata.

• Trigger/input: Brugeren åbner Login og indtaster sine oplysninger.
• Observable result: Brugeren får adgang til sine egne bogføringsdata.
• Access state: Anonym adgang til Login (access_requirement: none); de beskyttede arbejdsflader kræver login.
• Failure/recovery: Ugyldige oplysninger vises som fejlbesked uden at afsløre, om brugeren findes; brugeren kan forsøge igen.
• Continuation: Brugeren fortsætter til Bilag, Bank, Afstemning eller Status.

FR-3 — Registrere og vedligeholde bilag (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne registrere og vedligeholde bilag i bogføringen, så hvert bilag er dokumenteret og tilgængeligt.

• Trigger/input: Brugeren opretter eller åbner et bilag fra Bilag og redigerer dets oplysninger i Bilag Detaljer.
• Observable result: Bilaget gemmes og fremgår af bilagsoversigten.
• Access state: Kræver login.
• Failure/recovery: Validerings- eller gemmefejl vises som fejlbesked; brugeren kan rette felterne og gemme igen.
• Continuation: Brugeren kan gå videre til at knytte bilaget til en bankpostering i Afstemning.

FR-4 — Oversigt over bilag (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne se en oversigt over mine bilag, så jeg kan finde og vælge det bilag, jeg skal arbejde med.

• Trigger/input: Brugeren åbner Bilag.
• Observable result: Bilagene vises i en tabel med beløb, datoer og bilagsnumre i tabular tal.
• Access state: Kræver login.
• Failure/recovery: Hvis listen ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen.
• Continuation: Brugeren åbner et bilag i Bilag Detaljer eller opretter et nyt.

FR-5 — Håndtere bankoplysninger og bankposteringer (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne se og håndtere bankoplysninger og bankposteringer, der indgår i bogføringen, så banken er repræsenteret i regnskabet.

• Trigger/input: Brugeren åbner Bank.
• Observable result: Bankposteringer vises med status (uafstemt i amber, matchet i muted).
• Access state: Kræver login.
• Failure/recovery: Hvis listen ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen.
• Continuation: Brugeren kan åbne en postering, starte import eller gå til Afstemning.

FR-6 — Import/indlæsning af bankposteringer (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne hente eller indlæse bankposteringer til bogføringen, så bankens posteringer bliver tilgængelige for afstemning.

• Trigger/input: Brugeren starter import fra Bank eller Bank Import og vælger kilde.
• Observable result: Posteringerne indlæses og fremgår af Bank.
• Access state: Kræver login.
• Failure/recovery: Hvis importen fejler, vises fejlbesked; brugeren kan vælge en anden kilde eller forsøge igen.
• Continuation: Brugeren går til Afstemning for at matche de indlæste posteringer.

FR-7 — Afstemning mellem bilag og bankposteringer (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne afstemme bilag mod bankposteringer, så hver bankpostering er knyttet til det rette bilag og regnskabet stemmer.

• Trigger/input: Brugeren vælger en bankpostering og et bilag i Afstemning og trykker "Afstem".
• Observable result: De to rækker knyttes sammen med en hairline-konnektor, og posteringen skifter fra amber til muted matchet status.
• Access state: Kræver login.
• Failure/recovery: Hvis en afstemning ikke kan gennemføres, vises fejlbesked, og rækkerne forbliver i deres oprindelige tilstand; brugeren kan forsøge igen eller fjerne koblingen.
• Continuation: Brugeren fortsætter med næste uafstemte postering eller går til Status.

FR-8 — Status over afstemte og manglende posteringer (provenance: explicit) As a Bogholder / Regnskabsansvarlig I should kunne se status over afstemte og manglende posteringer, så jeg ved, hvad der mangler, før regnskabet er færdigt.

• Trigger/input: Brugeren åbner Status.
• Observable result: Optællinger og lister vises, fx "12 uafstemte, 3 mangler bilag, 47 afstemt i denne måned", i tabular tal.
• Access state: Kræver login.
• Failure/recovery: Hvis optællinger ikke kan hentes, vises fejlbesked med mulighed for at forsøge igen.
• Continuation: Brugeren går til de posteringer, der mangler afstemning eller bilag.

4. User Personas

Bogholder / Regnskabsansvarlig

• Produktkontekst: Personen står for den løbende bogføring i virksomheden og arbejder alene i systemet med egne varige regnskabsdata. Arbejdet foregår gentaget og dagligt med rigtige penge og juridiske forpligtelser, og systemet skal føles som et præcist instrument.
• Primært mål: At alle posteringer er afstemt og dokumenteret, så regnskabet stemmer.
• Distinkte ansvarsområder: Personen registrerer og vedligeholder bilag (FR-3, FR-4), håndterer bankoplysninger og bankposteringer (FR-5), henter/indlæser bankposteringer (FR-6), knytter bilag til bankposteringer og gennemfører afstemninger (FR-7) samt følger status over afstemte og manglende posteringer (FR-8). Personen etablerer desuden selv sin adgang (FR-1) og vender tilbage via verificering (FR-2).
• Relevante inputs og beslutninger: Bilagsoplysninger (bilagsnummer, dato, beløb, beskrivelse), bankposteringer (dato, beløb, tekst) og beslutningen om, hvilket bilag der hører til hvilken bankpostering.
• Interaktioner med andre accepterede deltagere: Personen er den eneste aktive menneskelige aktør; systemet understøtter lagring, kobling og opgørelse. Der er ingen andre menneskelige deltagere i de accepterede livscyklusser.
• Observerbar succes: Alle posteringer er afstemt og dokumenteret; Status viser ingen uafstemte posteringer eller manglende bilag for perioden.

5. Core User Flows

Flow 1 — Selvbetjent oprettelse af adgang og første bogføringsarbejde (FR-1, FR-2)

1. Brugeren åbner Landing som anonym og læser, at systemet understøtter bilag, bank og afstemninger.
2. Brugeren vælger den tangerine CTA "Opret konto" og sendes til Sign Up.
3. Brugeren indtaster de nødvendige oplysninger og opretter sin konto.
4. Observerbart resultat: Brugeradgangen oprettes, og brugeren kan fortsætte til bogføringsarbejdet.
5. Fejl/recovery: Ved manglende eller ugyldige oplysninger vises en fejlbesked, og brugeren kan rette oplysningerne og forsøge igen.
6. Fortsættelse: Brugeren fortsætter til Bilag for at registrere sit første bilag.

Flow 2 — Tilbagevenden til egne varige bogføringsdata (FR-2)

1. Brugeren åbner Login som anonym.
2. Brugeren indtaster sine oplysninger og logger ind.
3. Observerbart resultat: Brugeren får adgang til sine egne bogføringsdata.
4. Fejl/recovery: Ved ugyldige oplysninger vises en fejlbesked uden at afsløre, om brugeren findes; brugeren kan forsøge igen.
5. Fortsættelse: Brugeren fortsætter til Bilag, Bank, Afstemning eller Status.

Flow 3 — Registrere og vedligeholde et bilag (FR-3, FR-4)

1. Brugeren åbner Bilag og ser bilagsoversigten i en tabel med tabular tal.
2. Brugeren opretter et nyt bilag eller åbner et eksisterende og sendes til Bilag Detaljer.
3. Brugeren udfylder eller ændrer bilagets oplysninger og trykker "Gem bilag".
4. Observerbart resultat: Bilaget gemmes og fremgår af bilagsoversigten.
5. Fejl/recovery: Ved validerings- eller gemmefejl vises en fejlbesked; brugeren kan rette felterne og gemme igen, og ændringerne bevares i formularen indtil de gemmes eller annulleres.
6. Fortsættelse: Brugeren kan gå videre til Afstemning for at knytte bilaget til en bankpostering.

Flow 4 — Håndtere bankoplysninger og bankposteringer (FR-5)

1. Brugeren åbner Bank og ser bankposteringer med status (uafstemt i amber, matchet i muted).
2. Brugeren vælger en postering for at se detaljer i sidepanelet.
3. Observerbart resultat: Posteringen vises med sine oplysninger og sin aktuelle afstemningsstatus.
4. Fejl/recovery: Hvis listen ikke kan hentes, vises en fejlbesked med mulighed for at forsøge igen.
5. Fortsættelse: Brugeren kan starte import eller gå til Afstemning.

Flow 5 — Import/indlæsning af bankposteringer (FR-6)

1. Brugeren starter import fra Bank og sendes til Bank Import.
2. Brugeren vælger kilde og trykker "Importér bank".
3. Observerbart resultat: Posteringerne indlæses og fremgår af Bank.
4. Fejl/recovery: Hvis importen fejler, vises en fejlbesked; brugeren kan vælge en anden kilde eller forsøge igen.
5. Fortsættelse: Brugeren går til Afstemning for at matche de indlæste posteringer.

Flow 6 — Afstemning mellem bilag og bankposteringer (FR-7)

1. Brugeren åbner Afstemning og ser to-kolonne reconcileren: bankposteringer til venstre, bilag til højre.
2. Brugeren vælger en bankpostering og det bilag, den hører til.
3. Brugeren trykker "Afstem".
4. Observerbart resultat: De to rækker glider sammen, en hairline-konnektor tegnes mellem dem i 180ms, og rækken falder til ro i matchet tilstand, hvor amber-signalet skifter til muted.
5. Fejl/recovery: Hvis afstemningen ikke kan gennemføres, vises en fejlbesked, og rækkerne forbliver i deres oprindelige tilstand; brugeren kan forsøge igen eller fjerne koblingen.
6. Fortsættelse: Brugeren fortsætter med næste uafstemte postering eller går til Status.

Flow 7 — Følge status over afstemte og manglende posteringer (FR-8)

1. Brugeren åbner Status.
2. Brugeren ser optællinger og lister, fx "12 uafstemte, 3 mangler bilag, 47 afstemt i denne måned", i tabular tal.
3. Observerbart resultat: Brugeren ved præcis, hvad der mangler, før regnskabet er færdigt.
4. Fejl/recovery: Hvis optællinger ikke kan hentes, vises en fejlbesked med mulighed for at forsøge igen.
5. Fortsættelse: Brugeren går til de posteringer, der mangler afstemning eller bilag, og afslutter arbejdet, når alle posteringer er afstemt og dokumenteret.

6. Visuals Colors and Theme

Muse: Rasmus Andersson. Headline: "Bogføring der stemmer."

Systematisk bogføringshåndværk med en holdning: varm grafitsfælde, tangerine-signal, tabular tal som ornament. Alt på en streng 4/8-pt skala, keyboard-first densitet, hairline-borders, tabular numerals som det visuelle ornament og en palet bygget på varm grafitsfælde med ÉN hot ikke-blå accent.

Farvetokens (dark mode)

Ingen blå farve nogen steder. Status kodes udelukkende med de to varme signaler plus hairline-vægt, ikke med hue-variation.

Typografi

• Headings: Inter Tight, 600–700 vægt, tight tracking (-0.02em til -0.03em), sentence case til skærmtitler, uppercase micro-labels ved 11–12px med 0.08em tracking til tabelheaders og feltlabels.
• Body: Inter Tight.
• Tal: Altid tabular-lining figures — beløb, datoer, saldi, bilagsnumre — så kolonner flugter til pixlen, højrejusteret i pengekolonner.
• Skala: 1.25 modular på 4px baseline: 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49. Skærmtitel 31–39px desktop, 25px mobil. Tabelbody 14px, metadata 12px.

Form-sprog

Kompakt og præcist. 6px radius på inputs og knapper, 8px på paneler og kort, 1px hairline borders (#2A2D31) overalt i stedet for skygger. Ingen store radii, ingen pills, ingen dekorative blobs. Dividers er 1px regler; fokus-states er en 2px #E0442A ring, aldrig en glow. Densitet er æstetikken: rækker i 40px højde, 12px vertikal padding, alt aligned til 4/8-pt grid.

Layout

Fast venstre rail (220px) med systemets flader — Bilag, Bank, Afstemning, Status, plus Konto — og en tæt hovedkolonne. Lister er den primære UI: hairline-ruled tabeller med sticky uppercase headers, højrejusterede tabular pengekolonner og et persistent højre detail-panel på desktop, der bliver et full-screen sheet under 768px. Afstemning er en to-kolonne reconciler: bankposteringer til venstre, bilag til højre, matchede par forbundet med en tegnet konnektorlinje. Status er en opsummering af optællinger, ikke diagrammer. Ved 375px kollapser railen til en bottom tab bar, og alle tabeller bliver stacked label/value rows.

Billedsprog

Grænsefladen selv er billedet. Skærmbilleder af reconcileren, bilagslisten og detail-formularen er hero-indholdet, rammet ind som virkelige produktflader på grafitsfælden. Støttende billedsprog er skematisk: et enkelt diagram over flowet bilag → bankpostering → afstemning → status, tegnet i hairlines og de to varme signaler. Ingen stockfotografi, ingen 3D-blobs, ingen abstrakte gradienter.

7. Signature Design Concept

Reconcileren som hero. Landingens første skærm er ikke en centreret overskrift med en blå knap. Det er en full-bleed produktflade:

• Til venstre en 9-kolonne Inter Tight overskrift i 49–64px — "Bogføring der stemmer." — sat flush-left i varm off-white på grafitsfælden, med en enkelt undertekstlinje i muted ved 16px og en enkelt tangerine CTA "Opret konto" placeret under.
• Til højre, blødende ud over viewportens højre kant, et virkeligt skærmbillede af Afstemning-reconcileren: bankposteringer i en linjeret tabel, bilag på den anden side, matchede par forbundet med hairline-konnektorer, én række fremhævet i amber som uafstemt og én i tangerine som netop matchet. Skærmbilledet er croppet af viewport-kanten, ikke svævende i et kort.
• En tynd 1px regel løber i fuld bredde under heroen, og nedenfor den en enkelt linje tabular tal i muted: "47 afstemt · 12 uafstemte · 3 mangler bilag".

Konceptet genbruger kun accepteret indhold, tilstande og kontroller: hero-overskrift, undertekst, CTA til Sign Up, et illustrativt billede af den accepterede Afstemning-flade og en statuslinje med accepterede optællinger. Det tilføjer ingen ny adfærd, side eller destination.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Fokalsubjekt: Afstemning-reconcileren — to-kolonne fladen med bankposteringer til venstre, bilag til højre og hairline-konnektorer mellem matchede par, med én amber uafstemt række og én tangerine netop matchet række.
• Input → transformation → outcome: Brugeren ankommer anonymt til Landing → heroen viser den accepterede afstemningsflade som statisk produktbillede med de accepterede status-signaler → brugeren forstår, at systemet samler bilag, bank og afstemning, og kan vælge "Opret konto".
• Motion-vokabularium: Fast og funktionelt: 120–200ms ease-out på state change, hover og panel reveal. Ingen bounce, ingen dekorative loops. Den ene målrettede bevægelse er match-animationen i Afstemning: når en bankpostering matches til et bilag, glider de to rækker sammen, og en hairline-konnektor tegnes mellem dem i 180ms, hvorefter rækken falder til ro i matchet tilstand, hvor amber-signalet skifter til muted.
• Komponeret første frame: Grafitsfælde med "Bogføring der stemmer." flush-left, undertekst i muted, tangerine CTA under, og reconciler-skærmbilledet blødende ud over højre viewport-kant med én amber og én tangerine række synlig; 1px regel og tabular optællingslinje nedenunder.
• Reduced-motion state: Match-animationen erstattes af et øjeblikkeligt state swap — rækkerne vises direkte i matchet tilstand med konnektoren tegnet, uden glid eller overgang.

9. Non-Functional Requirements

• NFR-1 — Adgangskontrol til varige data (provenance: required_inference): De arbejdsflader, der rummer brugerens varige bogføringsdata (Bilag, Bilag Detaljer, Bank, Bank Import, Afstemning, Status), må kun være tilgængelige for en verificeret bruger. Landing, Login og Sign Up er anonymt tilgængelige. Rationale: brugerens regnskabsdata er personlige og skal forblive bundet til den korrekte bruger.
• NFR-2 — Talpræcision og læsbarhed (provenance: explicit, fra creative direction): Alle beløb, datoer, saldi og bilagsnumre sættes i tabular-lining figures og højrejusteres i pengekolonner, så kolonner flugter til pixlen. Rationale: brugeren skal kunne aflæse og stole på, at hver postering stemmer.
• NFR-3 — Kontrast og læsbarhed (provenance: explicit, fra creative direction): Varm off-white tekst (#EDEAE4) på grafitsfælden (#141517) ved ~13:1 kontrast. Læsbar tekst og kontroller forbliver hele og inden for viewporten ved 375px, 768px og 1280px.
• NFR-4 — Responsivt layout (provenance: explicit, fra creative direction): Ved 375px kollapser venstre rail til en bottom tab bar, og alle tabeller bliver stacked label/value rows. Detail-panelet bliver et full-screen sheet under 768px.
• NFR-5 — Reduceret bevægelse (provenance: explicit, fra creative direction): Ved prefers-reduced-motion erstattes match-animationen af et øjeblikkeligt state swap.
• NFR-6 — Ingen blå farve (provenance: explicit, fra creative direction): Ingen blå eller indigo farve anvendes nogen steder i paletten eller på nogen baggrund.

10. Tech Stack

• Frontend: React (webapplikation med custom UI).
• Backend: Python/FastAPI til understøttelse af bilag, bankposteringer, koblinger og afstemningsstatus.
• Storage: Persistent lagring af brugerens varige bogføringsdata (bilag, bankposteringer, koblinger, afstemningsstatus).
• Containerisering: Docker/docker-compose til lokal kørsel og udvikling.

Øvrige teknologi-valg er ikke angivet i kilden og er ikke specificeret her.

11. Assumptions and Constraints

• A-1: Systemet er til personens egen bogføring; der er ikke angivet flerbrugersamarbejde eller rollebaseret adgang, og der etableres ikke differentierede rettigheder.
• A-2: Brugeren tager selv systemet i brug uden invitation eller anden adgangsgrænse (selvbetjent oprettelse).
• A-3: Brugeren vender tilbage til systemet og fortsætter arbejdet med egne varige regnskabsdata via login.
• A-4: Alle krav i denne leverance er aktuelle; der er ikke angivet fremtidige krav.
• A-5: Systemet understøtter bilag, bank og afstemninger som et samlet system, hvor bilag og bankoplysninger hænger sammen.
• A-6 [Default — not specified by user]: Konkrete importformater for bankposteringer er ikke angivet i kilden og specificeres ikke her.
• A-7 [Default — not specified by user]: Konkrete feltnavne ud over bilagsnummer, dato, beløb og beskrivelse er ikke angivet i kilden og specificeres ikke her.

12. Glossary

• Bilag: Et regnskabsbilag med bilagsnummer, dato, beløb og beskrivelse, som brugeren registrerer og vedligeholder i bogføringen.
• Bankpostering: En postering fra banken med dato, beløb og tekst, der indgår i bogføringen og skal afstemmes mod et bilag.
• Afstemning: Handling hvor en bankpostering knyttes til et bilag, så regnskabet stemmer.
• Uafstemt: En bankpostering, der endnu ikke er knyttet til et bilag; markeres med amber-signalet (#E8A33D).
• Matchet: En bankpostering, der er knyttet til et bilag; markeres med muted (#8A8680).
• Reconciler: To-kolonne arbejdsfladen i Afstemning med bankposteringer til venstre og bilag til højre, hvor matchede par forbindes med en hairline-konnektor.
• Tabular tal: Tal sat i tabular-lining figures, så kolonner flugter til pixlen; anvendes på beløb, datoer, saldi og bilagsnumre.
• Hairline: En 1px regel (#2A2D31) anvendt i stedet for skygger og store radii.