kvitt/docs/ux/design-spec.md

Kvitt: design spec (U2)

Status: binding design spec for v1, SPEC §13.4 phase 2, written 2026-10-18 for the owner's pick: direction 3 "Kalas", muted (UX-1), typeface per D-020. It replaces U1's screens.md, components.md and tokens.md.

---

1. How to use this file

Who reads it. M6 builds :core:design from §2 (tokens) and §3 (components). M7a–M7f build their screens from §4 (one subsection per screen) and §5 (the add-expense flow). Every screenshot test of a feature covers exactly the states listed under "States" for its screen (SPEC §13.3: this list is the binding one).

Sources of truth.

Question	Source	Wins over
Rules (limits, rounding, sync, who may do what)	SPEC.md	everything here
Look, layout, sizes, states, interaction, TalkBack structure	this file	the PNGs
Exact words (sv, en), keys, plurals	strings.csv	the quoted words here
Pictures of each state	screens/index.html and screens/<frame-id>-light.png / -dark.png	nothing; a PNG that disagrees with this file is fixed
Category suggestion rule	category-suggestion.md (CS-1 … CS-7), keyword table category-keywords.csv	—
Navigation, screen inventory, data ownership	ia.md; flows flows.md	—

Swedish words in quotes are as they appear on screen; strings.csv holds the final wording and the English. Keys cited in parentheses (editor_amount) are the keys of the current strings.csv (D-017 module prefixes: onboarding_, home_, account_, expense_, settle_, analytics_, settings_; :core:design keys such as common_, editor_, ledger_, balance_, update_, snackbar_ carry no feature prefix). Every label quoted here has a key in strings.csv. directions/3-kalas/index.html is the U1 record the token values were copied from; it is not maintained.

Decisions this file builds on. UX-1 … UX-8 (proposed-decisions.md) are recorded in SPEC v0.8 as D-047 … D-054 (UX-1 D-047, UX-2 D-048, UX-3 D-049, UX-4 D-050, UX-5 D-051, UX-6 D-052, UX-7 D-053, UX-8 D-054). Still open: the §9.7 hex values of D-051 are TODO(U2) in SPEC v0.8 and are the values of §2.3 here; UX-9 is not yet in the spec. Labels used in this file:

Label	What this file assumes	Where it matters here
UX-1	Direction Kalas, muted palette; Roboto	all of §2 and §3
UX-3	Category suggested from the description (CS-1 … CS-7), ExpenseRepository.suggestCategory	§3.7 CategoryQuickRow, §4 S-7, §5
UX-4	S-1 has a required "Ditt namn" field on a first pairing	§4 S-1
UX-5	§9.7 colour hex values replaced by the muted values of §2.3; two new tokens slate and amber (ColorToken.SLATE, ColorToken.AMBER)	§2.3, S-15 colour swatches
UX-6	No "Ångra" after saving an expense; FAB hidden on an archived account; per-account settle-up keeps the direction swap and an editable amount; avatar colours are two tokens chosen by user id	§2.5, S-5, S-7, S-9
UX-8	14 default categories (new housing, insurance, children, fees), 33 icon tokens (new key, shield, account_balance), DefaultCategoryKey with 14 values, CategoryIcons.ALL with 33	§2.13, S-7, S-11, S-15; the D-018 empty fake scenario then has 14 defaults, not 10
UX-9	Contract additions: ExpenseEditorOptions.frequentCategoryIds and CategoryRepository.deletable(id), with fallbacks until they exist	§3.7 CategoryQuickRow, S-15 editor, §6

UX-2 (three tabs) changes nothing; UX-7 (import mapping) has no UI.

Conventions used throughout.

• Sizes in dp, text in sp. "Gutter" = 16 dp screen side padding. Touch targets are at least 48 × 48 dp everywhere (minimumInteractiveComponentSize); a control drawn smaller (36 dp chip, 40 dp button) keeps a 48 dp target.
• "Kräver anslutning" (common_needs_connection): an online-only action (§9.9) while offline is shown disabled with that text next to it (supporting line, menu-item second line or banner), never silently disabled. Online state comes from ConnectivityRepository.online.
• "Kunde inte nå servern" (common_could_not_reach_server): an online call returned OnlineResult.Failed("network"). Snackbar on the screen that made the call, with "Försök igen" when the call can be repeated; nothing changes locally (§9.9).
• Other OnlineResult.Failed(code) values map to inline text when a field is at fault (name_taken under the name) and to a snackbar otherwise, text from strings.csv error_*.
• Pending marker: cloud_upload icon in pending colour, TalkBack "Väntar på synk" (common_pending_sync), on every row or detail whose pending == true.
• Amounts: tabular figures always; formatted by MoneyFormatter (§9.8: 1 234,50 kr with U+00A0, never a minus sign); spoken by MoneyFormatter.spoken ("1 234,50 kronor"). Amounts never ellipsize; at large font scale they move to their own line or wrap the unit.
• Direction of money (owes / owed) is always words plus colour, never colour alone (§13.1).
• "Viewer" = the person holding the phone, always "du" / "Du"; the partner by display name. Wherever two people are shown side by side, the viewer is on the left.
• State names: loaded, empty, loading, offline, error, long (long Swedish names, 7-digit amounts, 200 % font scale) and named variants. PNGs exist for every state in §4: screens/<frame-id>-light.png and -dark.png; 200 % and English frames are light only.

---

2. Tokens

2.1 Material 3 colour roles

Light and dark. Contrast is WCAG 2 against the background named; text needs ≥ 4.5:1, icons and graphics ≥ 3:1. card (§2.2) is the fill of most content cards.

Role	Light	Dark	Contrast L / D
primary	#9C5238	#E6B5A2	5.3 / 9.6 on surface; 5.7 / 8.4 on card
on-primary	#FFFFFF	#4A1F10	5.7 / 7.7 on primary
primary-container	#F2DED4	#6A3826	—
on-primary-container	#3A1609	#F6DCD0	12.5 / 7.3
secondary	#5A6D52	#BCCBB1	5.2 / 10.3 on surface
on-secondary	#FFFFFF	#27341F	5.6 / 7.7
secondary-container	#DDE6D3	#3D4A35	—
on-secondary-container	#172410	#D9E6CD	12.6 / 7.2
tertiary	#76612F	#DCC690	5.6 / 10.5 on surface
on-tertiary	#FFFFFF	#3A2E0B	6.0 / 7.9
tertiary-container	#EEE3C6	#55432E	—
on-tertiary-container	#261C04	#F1E3C4	13.1 / 7.4
error	#B3261E	#F2B8B1	6.1 / 10.2 on surface; 6.5 / 9.0 on card
on-error	#FFFFFF	#5F1410	6.5 / 7.7
error-container	#F9DEDA	#73302A	—
on-error-container	#410E0B	#F9DEDA	12.8 / 7.5
surface	#FAF7F2	#1B1917	—
on-surface	#22201D	#ECE6DF	15.2 / 14.1
surface-variant	#E8E2D9	#4A4540	—
on-surface-variant	#4E4842	#CDC5BC	8.4 / 10.3 on surface; 9.0 / 9.0 on card
surface-container-lowest	#FFFFFF	#151311	—
surface-container-low	#F5F1EB	#221F1D	—
surface-container	#F0EBE4	#272422	—
surface-container-high	#EAE5DD	#312E2B	—
surface-container-highest	#E4DED6	#3C3835	—
surface-dim	#DCD6CE	#1B1917	—
surface-bright	#FAF7F2	#423E3A	—
inverse-surface	#36322E	#ECE6DF	—
inverse-on-surface	#F6F1EA	#312E2B	11.3 / 10.9
inverse-primary	#E4B39F	#9C5238	6.8 / 4.6 on inverse-surface
outline	#7E766E	#978E86	4.2 / 5.5 (graphics only)
outline-variant	#D2CAC1	#4A4540	decorative only
scrim	#000000 at 38 %	#000000 at 38 %	—

Disabled content and containers follow Material 3: content on-surface at 38 %, container on-surface at 12 %.

2.2 Kvitt semantic roles (KvittColors)

Role	Light	Dark	Use	Contrast L / D
owed	#3D6A4C	#A2CCB0	text and graphics: the partner owes the viewer; "Du lånade ut …"	5.8 / 9.8 on surface; 6.2 / 8.7 on card; 5.0 / 7.6 on surface-container-high
on-owed	#FFFFFF	#10331F	on owed	6.2 / 7.8
owed-container	#D6E7D9	#2E4A37	sync status tile	—
on-owed-container	#0F2416	#CBE7D3		12.7 / 7.4
owing	#78497A	#D8B5D6	text and graphics: the viewer owes the partner; "Du lånade …"	6.5 / 9.6 on surface; 6.9 / 8.4 on card; 5.5 / 7.4 on surface-container-high
on-owing	#FFFFFF	#3C1F3C		6.9 / 7.9
owing-container	#EEDDEC	#553A55		—
on-owing-container	#2D1430	#F1DDEF		12.9 / 7.7
settled	#6A5A2B	#E0CA94	"Kvitt", seesaw plank when settled	6.3 / 10.9 on surface; 5.3 / 5.9 on settled-container
settled-container	#EEE3C6	#55432E	settled hero card	—
on-settled-container	#261C04	#F1E3C4		13.1 / 7.4
warning	#8A5522	#EDBE8C	over-settle, remaining-to-allocate, offline banners	5.8 / 10.3 on surface
on-warning	#FFFFFF	#452B0E		6.2 / 7.7
warning-container	#F5E1CA	#5B3F24	warning strips and banners	—
on-warning-container	#2C1800	#F6DFC6		13.3 / 7.5
pending	#3C6680	#A3C7DE	pending marker, pending timeline line	5.8 / 9.8 on surface; 6.2 / 8.7 on card
avatar-1	#8A5A33	#DDB693	initials background, slot 1 (§2.5)	—
on-avatar-1	#FFFFFF	#3A230F		5.8 / 7.8
avatar-2	#4A6587	#ADC3DD	initials background, slot 2	—
on-avatar-2	#FFFFFF	#1C2F45		6.0 / 7.5
card	#FFFFFF	#272422	fill of content cards, segmented list items, account cards	—
on-cat	#FFFFFF	#1B1917	icon or letter on a solid category or account tile	≥ 3.9 / ≥ 4.7 on every category colour; ≥ 4.8 / ≥ 8.2 on every chart colour
shadow	#3C2819 at 8 %	#000000 at 25 %	card shadow colour (§2.10)	—

Derived tints (fixed values, computed as the first colour mixed over the second):

Tint	Rule	Light	Dark
settlement-row	primary-container 28 % over card	#FBF6F3	#3A2A23
settlement-hero	primary-container 50 % over card	#F8EEEA	#482E24
sync-pill-pending	pending 13 % over surface	#E1E4E3	#2D3031
pending-badge	pending 14 % over card	#E4EAED	#383B3C
account-header-n	chart-cat-n 12 % over card	n = 1 … 8: #F4EBE8, #ECEFEA, #F1EDE6, #EAEEF3, #EFEBF1, #E8EFEE, #F4EBEE, #EDEEEE	#3E342F, #373830, #3C362D, #353638, #3A3437, #333734, #3E3434, #383635

on-surface on sync-pill-pending: 12.7 / 10.7; pending on pending-badge: 5.1 / 6.3.

2.3 Category colours (§9.7 tokens; UX-5)

Fourteen tokens. Light and dark values; the container is the colour mixed over surface at 18 % (light) and 24 % (dark). Category colours are never used for text.

Token	Light	Light container	L: vs surface / vs card / vs container / on-cat on it	Dark	Dark container	D: vs surface / vs card / vs container / on-cat on it
green	#4E7A55	#DBE1D6	4.6 / 5.0 / 3.7 / 5.0	#8FB896	#373F35	7.9 / 7.0 / 4.9 / 7.9
orange	#B26A3E	#EDDED2	3.9 / 4.2 / 3.2 / 4.2	#E8AA7E	#4C3C30	8.7 / 7.7 / 5.3 / 8.7
brown	#6B5244	#E0D9D3	6.7 / 7.2 / 5.2 / 7.2	#B8A090	#413934	7.1 / 6.2 / 4.6 / 7.1
yellow	#9C7C2A	#E9E1CE	3.7 / 3.9 / 3.0 / 3.9	#E6C67A	#4C432F	10.6 / 9.3 / 5.9 / 10.6
blue	#4A78A8	#DAE0E5	4.3 / 4.6 / 3.5 / 4.6	#98C0E6	#394149	9.2 / 8.1 / 5.4 / 9.2
teal	#367F82	#D7E1DE	4.4 / 4.7 / 3.5 / 4.7	#8CCAC8	#364341	9.5 / 8.4 / 5.6 / 9.5
purple	#865891	#E5DAE1	5.1 / 5.5 / 4.0 / 5.5	#C59CDA	#443846	7.6 / 6.7 / 4.8 / 7.6
red	#A84B45	#EBD8D3	5.2 / 5.6 / 4.1 / 5.6	#DC8F86	#493532	6.9 / 6.1 / 4.5 / 6.9
pink	#AE5D7C	#ECDBDD	4.2 / 4.5 / 3.4 / 4.5	#EFB0BE	#4E3D3F	9.7 / 8.5 / 5.6 / 9.7
grey	#6C7177	#E0DFDC	4.6 / 4.9 / 3.7 / 4.9	#B0B2B3	#3F3E3C	8.2 / 7.2 / 5.0 / 8.2
indigo	#45508D	#D9D9E0	7.1 / 7.5 / 5.4 / 7.5	#969DD8	#393945	6.8 / 6.0 / 4.4 / 6.8
lime	#73822F	#E2E2CF	4.0 / 4.2 / 3.2 / 4.2	#B9CC86	#414432	10.1 / 8.8 / 5.7 / 10.1
slate (new, UX-5)	#5E2D4E	#DED3D4	10.0 / 10.7 / 7.3 / 10.7	#B0719A	#3F2E36	4.7 / 4.2 / 3.4 / 4.7
amber (new, UX-5)	#937D63	#E7E1D8	3.7 / 3.9 / 3.0 / 3.9	#DFCFC0	#4A4540	11.5 / 10.2 / 6.2 / 11.5

All values are graphics ratios (≥ 3:1 required, all pass; the tightest are light yellow 3.03 and amber 3.02 on their containers, used only for unselected picker tiles where the name is printed beside the icon).

Use:

Where	Fill	Icon
Solid tile (ledger rows, detail hero tile, selected picker tile, chart segments, breakdown bars, legend swatch)	cat-<token>	on-cat
Container tile (unselected picker tile in CategoryQuickRow and CategoryGridSheet)	cat-<token>-container	cat-<token>
Expense detail hero card, drill-down header card	cat-<token>-container	—
Settings row tiles (§3.11 SettingsRow)	cat-<token>-container	cat-<token>

2.4 Chart and account colours

Accounts get chart-cat-n by their position in AccountRepository.all() (created_at ascending, archived included), n = position mod 8 + 1. The same colour is the account's tile (§3.4) on Home, the tint of its header on S-5 and its series in S-11. Categories in charts always use their own category colour.

Token	Light	Dark	vs card L / D (graphics)	on-cat on it L / D (text)
chart-cat-1	#A75B40	#E3A68E	5.0 / 7.4	5.0 / 8.4
chart-cat-2	#5E7A4E	#ABC79A	4.8 / 8.3	4.8 / 9.5
chart-cat-3	#8B6A2C	#D8BD7E	5.0 / 8.4	5.0 / 9.6
chart-cat-4	#4C6E98	#9EB9DC	5.3 / 7.7	5.3 / 8.7
chart-cat-5	#7C5A88	#C8A6D2	5.7 / 7.2	5.7 / 8.2
chart-cat-6	#3F7774	#8FC2BC	5.1 / 7.8	5.1 / 8.9
chart-cat-7	#A2566F	#E3A6BA	5.1 / 7.7	5.1 / 8.7
chart-cat-8	#6A6F74	#B5B9BD	5.1 / 7.8	5.1 / 8.9
chart-seq-1	#F2DFD6	#3E2C25	1.3 / 1.2 (fill behind a label only)	—
chart-seq-2	#E2B7A5	#6A4234	1.8 / 1.8 (fill behind a label only)	—
chart-seq-3	#C08068	#9A6049	3.2 / 3.0	—
chart-seq-4	#A75B40	#CC8A70	5.0 / 5.5	—
chart-seq-5	#763A26	#E6B5A2	8.7 / 8.4	—
chart-grid	#E6E0D8	#36322F	decorative	—
chart-axis-label	#4E4842	#CDC5BC	9.0 / 9.0 (text)	—

Stacked segments are separated by a 2 dp gap so neighbouring colours never touch. Sequential tokens are reserved (no v1 screen uses them).

2.5 Avatar colours (UX-6, AC-4.5)

Initials (first letter of the first two words of the display name, uppercase, AC-4.5) on avatar-1 / on-avatar-1 or avatar-2 / on-avatar-2. Slot rule: of the household's users, the one whose id sorts first (plain string comparison of the lowercase UUID) is slot 1, the other slot 2; a household with one user has only slot 1. User ids are UUIDv7, so in practice the admin (created first) is slot 1 on both phones, and the two people never share a colour. The split bar (§3.7) uses the same two colours for the two people.

2.6 Dynamic colour

Not offered. Category, account, owed/owing and settled colours carry meaning and a wallpaper scheme cannot recolour them coherently (UX-1). The theme follows the system light/dark setting only.

2.7 Typography

Typeface: the Material 3 default (FontFamily.Default, Roboto on Android 16), no bundled font (D-020). Every amount style sets fontFeatureSettings = "tnum"; Roboto figures are already tabular, the feature is set so a different system font stays aligned.

Style	Size / line height (sp)	Weight	Letter spacing (sp)	Used for
display-large	57 / 64	500	−0.25	unused
display-medium	45 / 52	500	0	unused
display-small	36 / 44	600	0	"Kvitt" on S-1
headline-large	32 / 40	600	0	unused
headline-medium	28 / 36	600	0	"Ni är kvitt", S-18 title, S-22 version
headline-small	24 / 32	600	0	empty-state titles, dialog titles, "kr" after the editor amount
title-large	22 / 28	600	0	top app bar titles, section headers ("Konton")
title-medium	16 / 24	600	0.15	row titles, balance wording in the hero, card titles
title-small	14 / 20	600	0.1	month headers, group headers, banner titles
body-large	16 / 24	400	0.5	field values, detail fact values, empty-state body
body-medium	14 / 20	400	0.25	effect line, secondary row text, banner body
body-small	12 / 16	400	0.4	dates in rows, captions, row meta
label-large	14 / 20	600	0.1	buttons, "Totalt"
label-medium	12 / 16	500	0.5	field labels, account-card wording, nav labels
label-small	11 / 16	500	0.5	badges, category tile labels (11 / 14)
amount-hero	44 / 52	700	−0.5	Home balance, editor amount
amount-large	28 / 36	700	−0.25	detail amounts, S-5 balance, analytics total, S-9 amount field
amount-medium	18 / 24	700	0	account-card amount, allocation fields, compact editor row
amount-small	15 / 20	600	0	ledger row amounts, breakdown amounts

Units next to large amounts: the hero's "kr" is 24 / 30 sp weight 700 in the amount's colour; the editor's "kr" is headline-small in on-surface-variant. English puts "SEK" before the number (§9.8) with the same unit style.

Font scale. Compose's default non-linear font scaling (Android 14+) applies: text of 24 sp and larger grows less than the system scale (about 1.5× at 200 %), smaller text grows fully. Two explicit caps, implemented by converting a dp-based size (with(LocalDensity) { (12.dp * min(fontScale, 1.6f)).toSp() }): bottom-navigation labels at 1.6×, the seesaw name labels at 1.15×; the account tile letter at 1.3×. Nothing else is capped. Check on the S26 in M6 that FontFamily.Default resolves to Roboto with tabular figures under every One UI font style (open point 4).

2.8 Spacing

Scale (KvittSpacing): s1 4, s2 8, s3 12, s4 16, s5 20, s6 24, s8 32, s10 40, s12 48 dp.

Measure	dp
Screen gutter	16
Gap between cards and sections in a scrolling column	12 (S-4, S-7), 10 (detail screens, S-9, S-11, settings sub-screens)
Gap between items of a segmented group	3
Card padding	16–20 (per component)
Row padding	10 vertical, 16 horizontal; min height 56 (settings, detail facts) or 72 (ledger)
Gap between leading tile and text	14 (rows), 12 (cards)
Bottom padding of a scrolling column under a FAB	120
Top app bar height	64
Bottom navigation	64 + system navigation inset

2.9 Shapes

M3 shape scale: extraSmall 4, small 8, medium 12, large 16, largeIncreased 20, extraLarge 28, extraLargeIncreased 32, extraExtraLarge 48, full.

Component	Shape
Buttons, chips, keypad keys, sync pill, badges, nav indicator (56 × 32, radius 16), connected-button outer ends	full
Connected-button inner corners	small 8
Text fields (filled, no indicator line)	large 16, all four corners
Menus, info boxes inside cards	large 16
Warning strips inside cards, menu items	medium 12
FAB (56 dp)	largeIncreased 20
Cards, balance hero, dialogs, keypad sheet top corners, flat sections	extraLarge 28
Account cards, segmented-group outer corners, banners	24
Segmented-group inner corners	small 8
Allocation amount field	14
Icon grid cells (S-15)	large 16
Chart bars	top 4, bottom 2
Category tile	MaterialShapes.Cookie4Sided → fallback RoundedCornerShape(30%)
Account tile	MaterialShapes.Clover4Leaf → fallback RoundedCornerShape(16.dp)
Large avatars (≥ 40 dp outside rows: hero, settings card, S-2, S-9, S-10, S-14), app mark, dialog icon tile, sync status tile	MaterialShapes.Sunny → fallback CircleShape
Empty and removed illustrations (S-18), loading indicator container	MaterialShapes.Cookie9Sided → fallback CircleShape
Avatars inside rows and chips (20–32 dp), colour swatches, settlement tile	CircleShape

MaterialShapes are RoundedPolygons turned into a Shape with toShape(); all are wrapped in KvittShapes so the fallback swaps in one place.

2.10 Elevation

Tonal first. Light: content cards (card #FFFFFF on surface #FAF7F2) carry a soft shadow, two layers (y 1 blur 2, y 2 blur 8) in shadow (#3C2819 at 8 %); in Compose Modifier.shadow(elevation = 2.dp, shape, ambientColor = shadow, spotColor = shadow). Dark: no visible shadow; card is surface-container on surface. FAB, menus and dialogs: level 3 (6 dp, Material default shadow) in both themes; the dialog scrim is #000000 at 38 %. Segmented list items and flat sections (surface-container-low) have no shadow.

2.11 Motion

MaterialTheme(motionScheme = MotionScheme.expressive()); fallback MotionScheme.standard() (§3.1 rule on Expressive APIs).

Spring	Damping ratio	Stiffness	Use
spatial fast	0.6	800	chip and tile selection, check badge pop (scale 0 → 1), keypad key press
spatial default	0.8	380	expanding the split section, collapsible sections, sheet open, FAB extend/collapse
spatial slow	0.8	200	screen-level layout changes
effects fast	1.0	3800	state-layer and colour of pressed controls
effects default	1.0	1600	colour and opacity changes (tile container → solid, card cross-fades)
effects slow	1.0	800	settled card cross-fade to oat

Named motions:

• Seesaw re-tilt when the global balance changes: spring damping 0.55, stiffness 300; the hero amount counts from the old to the new value over 400 ms, EmphasizedDecelerate.
• Settling to zero: the plank levels (re-tilt spring), then the bunting drops one pennant at a time, 40 ms stagger, each on spatial fast; the card cross-fades to settled-container (effects slow).
• Category selection: the chosen tile cross-fades container → solid (effects default) and the check badge pops (spatial fast); a suggestion change (CS-7) uses the same motion without haptics.
• Saved expense: the editor closes; the new row is in its month group on return (no extra animation required).
• Navigation: pushed screens enter with a horizontal shared-axis transition (30 dp slide + fade, spatial default); tab switches fade through (effects default); S-7 and S-9 enter from the bottom (slide up 10 % + fade).
• Reduced motion (system "Ta bort animationer", Settings.Global.ANIMATOR_DURATION_SCALE == 0): all springs become critically damped and immediate, the bunting appears at once, the hero amount does not count.

2.12 Icons

Material Symbols Rounded, optical size 24, grade 0, shipped as vector drawables generated from the font (Apache 2.0). Two variants:

Variant	FILL	Weight	Used for
outline	0	500	app-bar actions, row leading icons in detail facts, chevrons, field icons
filled	1	600	category icons, status icons (cloud_done, warning, error), selected nav icon, banner icons, handshake, check badge (weight 700, size 14)

Icons are dp-sized (24 default; 18 in chips; 15–16 in row meta; 20 in buttons) and never scale with font size.

Category icon tokens (33, §9.7 + UX-8) in CategoryIcons.ALL order: shopping_cart, restaurant, local_cafe, home, bolt, water_drop, wifi, directions_car, train, local_gas_station, flight, hotel, luggage, movie, music_note, sports_esports, fitness_center, medical_services, medication, shopping_bag, checkroom, pets, child_care, school, card_giftcard, celebration, build, chair, subscriptions, category, key, shield, account_balance. Each has a Swedish and English TalkBack name in strings.csv (icon_<token>).

UI icons (outline unless marked filled):

Icon	Where
home, bar_chart, settings	bottom navigation (filled when selected)
add	FAB, "Nytt konto", "Lägg till konto", "Ny kategori", "Ny återkommande"
close	editor top bars (S-6, S-7, S-9, S-15 editor, S-19 editor)
arrow_back	pushed screens
more_vert	S-5 overflow
edit, delete	S-8, S-10 actions; menu items
check	Spara in editors, check badge, selected chips
swap_horiz	S-9 direction swap; S-7 payer chip trailing
handshake (filled)	"Gör upp", settlement tile, confirm dialog
cloud_upload	pending marker
cloud_off	offline sync pill, "Kräver anslutning" hints and banners
cloud_done (filled)	synced pill and S-16 status
sync, sync_problem	"Synka nu"; S-16 status when the last attempt failed
warning (filled), error (filled), info, check_circle (filled)	warnings, errors, info lines, settled and "Kvar att fördela 0,00 kr"
chevron_right, expand_more, expand_less	rows, dropdown chips, collapsible sections
inventory_2, unarchive	archive badge and actions
event, call_split, notes, person, apps, backspace, calculate, date_range	editor and detail facts, "Alla", keypad delete, S-6 preview, period chip
content_paste, link, dns, person_add, add_a_photo, photo_library	S-1, S-2, S-3, S-14
receipt_long (filled)	app mark, notification small icon
schedule, pause, event_repeat, drag_indicator, restart_alt, lock	S-3, S-19, S-8, S-15
system_update, download, downloading, refresh, install_mobile	S-17
phonelink_erase, smartphone, block, devices, add_link, key, share, content_copy	S-18, S-20, S-21, S-13
memory, description, open_in_new	S-22, S-16
arrow_forward	S-9, S-10 direction

2.13 Default categories (UX-8)

Seeded by the server (SPEC AC-7.2, D-049 to D-054, SPEC v0.8; ids 11 to 14 added by server migration 0002). The localised name shows until a user renames the category.

Sort	default_key	Fixed id (SPEC §14.1)	Swedish	English	Icon	Colour
10	groceries	01920000-0000-7000-8000-000000000001	Mat & hushåll	Groceries	shopping_cart	green
20	restaurants	01920000-0000-7000-8000-000000000002	Restaurang & café	Restaurants	restaurant	orange
25	housing	01920000-0000-7000-8000-000000000011	Boende	Housing	key	indigo
30	home	01920000-0000-7000-8000-000000000003	Hem	Home	home	brown
40	utilities	01920000-0000-7000-8000-000000000004	Räkningar	Utilities	bolt	yellow
45	insurance	01920000-0000-7000-8000-000000000012	Försäkringar	Insurance	shield	slate
50	transport	01920000-0000-7000-8000-000000000005	Transport	Transport	directions_car	blue
60	travel	01920000-0000-7000-8000-000000000006	Resor	Travel	flight	teal
70	entertainment	01920000-0000-7000-8000-000000000007	Nöje	Entertainment	movie	purple
80	health	01920000-0000-7000-8000-000000000008	Hälsa	Health	medical_services	red
85	children	01920000-0000-7000-8000-000000000013	Barn	Children	child_care	lime
90	shopping	01920000-0000-7000-8000-000000000009	Shopping	Shopping	shopping_bag	pink
95	fees	01920000-0000-7000-8000-000000000014	Avgifter & skatter	Fees & taxes	account_balance	amber
100	other	01920000-0000-7000-8000-00000000000a	Övrigt	Other	category	grey

Every default category has its own colour; teal is shared with the archived example custom category "Pant" (water_drop) in the frames only.

2.14 Compose mapping (:core:design)

Token group	Compose
§2.1	lightColorScheme(...) / darkColorScheme(...), role names 1:1 (on-primary-container → onPrimaryContainer)
§2.2–§2.5	@Immutable data class KvittColors(...) with a light and a dark instance in LocalKvittColors; functions category(token: ColorToken), categoryContainer(token), account(index: Int) (chart-cat, 0-based position mod 8), avatar(slot: Int) / onAvatar(slot); properties for every role of §2.2 and the derived tints
§2.7	Typography(...) for the 15 M3 styles (default font family, weights and letter spacing above) plus KvittTypography(amountHero, amountLarge, amountMedium, amountSmall) in LocalKvittTypography
§2.8	object KvittSpacing (or LocalKvittSpacing) with s1 … s12, gutter, rowMin, ledgerRowMin
§2.9	Shapes(extraSmall … extraLarge) plus KvittShapes(categoryTile, accountTile, avatarLarge, illustration, card, accountCard, groupOuter, groupInner, field, fab) in LocalKvittShapes
§2.11	MotionScheme on MaterialTheme; named motions as constants in KvittMotion
Entry point	KvittTheme(darkTheme: Boolean = isSystemInDarkTheme(), content), accessors KvittTheme.colors, .typography, .shapes, .spacing

ColorToken gains SLATE and AMBER (UX-5) and DefaultCategoryKey gains HOUSING, INSURANCE, CHILDREN, FEES (UX-8); KvittColors.category is exhaustive over the enum.

---

3. Components (:core:design)

3.1 Rules for every component

• Colours, type, shapes and spacing only from KvittTheme (§2.14); no literal values in feature modules.
• Strings from resources. Shared strings live in :core:design; components take resolved Strings for feature-specific words.
• Every component takes a Modifier, has light/dark, Swedish/English and 100 %/200 % font-scale screenshot tests in M6 (SPEC M6), and keeps 48 dp touch targets.
• Expressive APIs (@ExperimentalMaterial3ExpressiveApi) are used only behind a :core:design wrapper so the stable fallback named in the component swaps in at one place. The implementing agent confirms each API's status and signature in the official documentation at implementation time (CLAUDE.md › Fast-moving APIs). Summary:

Expressive	Where	Stable fallback
MaterialShapes (Cookie4Sided, Clover4Leaf, Sunny, Cookie9Sided) via toShape()	category, account, avatar and illustration tiles	RoundedCornerShape / CircleShape (§2.9)
ShortNavigationBar (64 dp)	bottom navigation	NavigationBar (80 dp)
ButtonGroup (connected)	analytics toggles, ratio presets, full-split person picker	SingleChoiceSegmentedButtonRow
Expressive slider look (thick track, thin handle)	SplitSlider	Slider with custom track and thumb
LoadingIndicator (shape morph)	first sync on Home	CircularProgressIndicator
LinearWavyProgressIndicator	update download	LinearProgressIndicator
Medium extended FAB (56 dp, radius 20)	"Lägg till utgift", "Ny återkommande"	ExtendedFloatingActionButton
Button sizes small (40) and medium (56)	all buttons	Button with heightIn
MotionScheme.expressive()	theme	MotionScheme.standard()
Segmented list items (grouped shapes)	ledger, settings, devices, facts	Surface per item with the §2.9 group shapes

• Semantics. Rows merge their children into one node (Modifier.semantics(mergeDescendants = true)) with the default click action (no custom click labels); icon-only controls always have a contentDescription; decorative tiles, the seesaw, split bars next to their numbers and illustrations are cleared (clearAndSetSemantics {} or contentDescription = null). TalkBack text is Swedish or English per app language and reads amounts with MoneyFormatter.spoken.

3.2 Money and words

MoneyText(ore: Long, style: AmountStyle, tone: AmountTone, unit: Boolean = true)

• AmountStyle: Hero, Large, Medium, Small → the four amount styles of §2.7. AmountTone: Neutral (on-surface), Owed, Owing, Muted (on-surface-variant), Settled.
• Never a sign. Never ellipsized: one line; when it does not fit, Hero and Large put the unit on a second line; others wrap at the unit.
• Semantics: MoneyFormatter.spoken(ore).

EffectLine(effect: ExpenseEffect) (§9.2), body-medium:

• Lent(ore) "Du lånade ut 206,00 kr" in owed (effect_lent) · Borrowed(ore) "Du lånade 623,80 kr" in owing (effect_borrowed) · NotInvolved "Inte inblandad" · PaidForYourself "Betalade för dig själv" in on-surface-variant.

BalanceWording(netOre: Long, partner: User, scope: Global | Account) (§9.3): "Anna är skyldig dig" (owed), "Du är skyldig Anna" (owing), "Ni är kvitt" (global, settled) / "Kvitt" (account, settled). Used by BalanceHero, AccountCard, AccountBalanceHeader.

3.3 People

PersonAvatar(user: User, size: Dp, shape: AvatarShape = Circle)

• Sizes in use: 20, 24, 28, 32, 40, 46, 52, 72, 112, 128.
• Picture via Coil keyed by user.id + pictureVersion (AC-4.6), cropped to the shape; else initials on the slot colour (§2.5), initials size 44 % of the avatar (capped at 1.3× font scale). Sunny shape for the large standalone uses of §2.9, else circle.
• States: picture, initials (also while the picture loads), uploading (a 4 dp CircularProgressIndicator in primary drawn around the avatar, picture or initials at 60 % opacity).
• Semantics: the display name; decorative (null) when the name is printed beside it.

AvatarPlaceholder(size): the empty partner seat of S-3: circle, 2 dp dashed outline border, surface-container-high fill, person_add icon at 50 % of the size in on-surface-variant. TalkBack "Partner saknas".

3.4 Categories and accounts

CategoryTile(category: Category, size: Dp, style: Solid | Container, archived: Boolean = false)

• Shape Cookie4Sided (fallback 30 % rounded). Sizes: 32 (breakdown), 36 (S-15 list, S-16, compact editor row), 40 (ledger rows), 52 (editor quick row and sheet), 56 (S-12 header), 60 (S-8 hero), 64 (S-15 editor preview).
• Icon: filled Material Symbol at 52 % of the tile (iconRatio), colours per §2.3.
• archived: saturation 25 %, opacity 75 %.
• Semantics: decorative when the category name is printed next to it (always, except in the quick row where the label is the tile's own text).

AccountTile(name: String, colorIndex: Int, size: Dp = 44, muted: Boolean = false)

• Clover4Leaf (fallback 16 dp rounded) filled with chart-cat-n (§2.4); the first grapheme of the name, uppercase, title 18 sp weight 700 in on-cat (capped 1.3×). muted (archived): opacity 70 %. Sizes 32, 36, 40, 44. Always decorative.

AccountCard(summary: AccountSummary, colorIndex: Int, onClick) (S-4)

• Card, radius 24, card fill and shadow, padding 14 vertical / 16 horizontal, min height 76, gap 14.
• Left: AccountTile 44. Middle: name (title-medium, 1 line, ellipsis) with an "Arkiverat" badge (inventory_2 14) for archived accounts; below it body-small on-surface-variant "11 utgifter i oktober" (home_account_expenses_month, plural; current month name) or "Inga utgifter i oktober". Right column, right-aligned: wording in label-medium and MoneyText(Medium) both in owed/owing; when netOre == 0: check_circle (filled, 20) + "Kvitt" in title-medium settled, no amount.
• Archived card: card opacity 92 %, tile muted.
• Long and 200 %: the right column wraps to its own line under the name, right-aligned (flex-wrap); the name keeps one line with ellipsis at 100 % and two lines at ≥ 1.5×.
• Semantics: one node "Vardag, Anna är skyldig dig 1 184,50 kronor, 11 utgifter i oktober" (archived: "…, arkiverat"), role button.

CategoryQuickRow, CategoryGridSheet: see §3.7 (editor fields).

CategoryIconPicker(selected: String, color: ColorToken) (S-15): grid of the 33 icon tokens, 7 columns, gap 5, cells 48 dp high, radius 16. Unselected: surface-container-high fill, outline icon in on-surface-variant. Selected: cat-<color> fill, filled icon in on-cat. Single-select radio group; each cell TalkBack = the icon's name (icon_<token>), state "vald".

ColorSwatchPicker(selected: ColorToken) (S-15): 14 circles of 44 dp in a 7-column grid, gap 8, each the solid category colour. Selected: check icon 22 in on-cat plus a 3 dp surface ring and a 2 dp on-surface ring outside it (selection never by colour alone). TalkBack: colour name ("Grön", "Plommon", "Sand", … color_<token>), state "vald".

3.5 Ledger (D-019; used by S-5, S-12, S-16)

SegmentedGroup: vertical group of items 3 dp apart; outer corners 24, inner 8; item fill card (default) or surface-container-low (soft). Light: the group casts the card shadow once.

LedgerMonthHeader(period: String, householdSpendOre: Long): title-small "Oktober · 7 457,90 kr" (ledger_month_total), padding 12 top / 8 sides / 2 bottom; year appended when not the current year ("September 2025 · …"). Sticky (stickyHeader) on S-5 with a surface background. Semantics heading.

ExpenseRow(row: LedgerRow.ExpenseRow, onClick)

• Item of a SegmentedGroup, min height 72, padding 10 / 16, gap 14.
• CategoryTile 40 solid · centre: description (title-medium, 1 line, ellipsis), EffectLine below · right column: MoneyText(Small), below it body-small on-surface-variant date ("16 okt.", §9.8) preceded by the pending marker (15 dp) when pending.
• 200 %: the right column moves under the centre column, left-aligned with the text, so the description gets the full width (still 1 line, ellipsis) and the amount is never cut.
• Semantics: one node "ICA Maxi Lindhagen, 1 247,60 kronor, 16 oktober, du lånade 623,80 kronor, väntar på synk" (category name added after the description: "…, Mat & hushåll, …").

SettlementRow(row: LedgerRow.SettlementRow, onClick)

• Same item geometry; fill settlement-row tint (§2.2).
• Tile: 40 dp circle primary-container with filled handshake in on-primary-container. Centre: "Anna betalade dig 800,00 kr" / "Du betalade Anna 800,00 kr" (title-medium, ledger_settlement_*), plus " · 2 konton" when accountCount > 1; second line "Betalning" body-medium muted. Right: date with the pending marker.
• Semantics: "Anna betalade dig 800,00 kronor, 2 konton, 6 oktober".

SyncPendingMarker(size = 15.dp): cloud_upload in pending, contentDescription "Väntar på synk" when standalone; merged into the row sentence otherwise.

3.6 Balance, sync and banners

BalanceHero(state: HeroState, onSettle) (S-4; seesaw)

• Card, radius 28, padding 16 top / 20 sides / 20 bottom, content centred.
• Seesaw (decorative), 250 × 92 dp: plank 220 × 8 (radius 4) pivoting at its centre on a fulcrum triangle 36 × 22 in outline-variant; the viewer's avatar (46, Sunny) on the left end, the partner's on the right end, 88 dp from the centre; name labels "Du" and "Anna" (12 sp weight 600, on-surface-variant, capped 1.15×) outside each avatar. The side of the person who owes sits lower: tilt 9°; plank colour owing (viewer owes), owed (partner owes), settled (level, 0°), outline (waiting, 12° down on the viewer's side).
• Below: wording (title-medium, owed/owing), amount (amount-hero + "kr" at 24 sp 700, same colour), then "Gör upp" (filled, small 40 dp, filled handshake icon; home_settle_up) 14 dp below.
• States:

State	Content
Owed(net, partner)	"Anna är skyldig dig", amount in owed, plank tilted toward the partner, "Gör upp"
Owing(net, partner)	"Du är skyldig Anna", amount in owing, plank tilted toward the viewer, "Gör upp"
Settled	card fill settled-container, text on-settled-container, bunting along the top (30 dp high: a curved outline line with 14 pennants in category colours green, orange, yellow, blue, teal, purple, red, pink, lime, orange, green, blue, yellow, pink), top padding 28, level plank, "Ni är kvitt" (headline-medium), "Ingen är skyldig något just nu." (body-medium); no amount, no button
Waiting (S-3)	partner seat = AvatarPlaceholder, label "Partner", plank outline; content per S-3
Loading (S-4 first sync)	no seesaw: LoadingIndicator 56 dp in a Cookie9 primary-container tile, "Hämtar era utgifter…" (title-medium), "Första synken hämtar allt som finns på servern. Det tar bara en stund." (body-medium muted); padding 28 / 20

• Long: a 7-digit amount ("1 234 567,89 kr") fits one line at 100 %; at 200 % the hero amount grows about 1.5× and the unit wraps to its own line; wording wraps, never ellipsizes.
• Semantics: the card is one node, contentDescription = "Du är skyldig Anna 3 250,00 kronor" / "Anna är skyldig dig …" / "Ni är kvitt"; the button is a separate node "Gör upp".

AccountBalanceHeader(detail: AccountDetailState, colorIndex: Int, onSettle, onUnarchive) (S-5)

• Card, radius 28, padding 18 / 20 / 20, gap 10, fill account-header-n (§2.2).
• Row: AccountTile 40 · "50 / 50 · Jacob och Anna" (title-medium; default shares in percent, viewer first, account_default_split) with a thin SplitBar (8 dp) below · "Arkiverat" badge when archived.
• Balance: wording (title-medium) above MoneyText(Large), both in owed/owing; zero: check_circle 28 + "Kvitt" in headline-small settled.
• Actions, left-aligned: "Gör upp det här kontot" (filled, handshake) when netOre != 0 (archived accounts too: they can still be settled, AC-6.4); for an archived account also "Återställ från arkiv" (tonal, unarchive), placed first.
• Semantics: one node "Vardag, standarddelning 50 procent du, 50 procent Anna, Anna är skyldig dig 1 184,50 kronor"; button separate.

SyncStatusPill(summary: SyncSummary, online: Boolean, onClick) (S-4)

• Centred pill, min height 40 (48 target), padding 6 / 10 / 6 / 14, radius full, body 13 sp weight 500; leading icon 18, trailing chevron_right 18.
• Variants: synced: surface-container-high fill, cloud_done (filled) in owed, "Synkad för 3 min sedan" (sync_synced_relative, §9.8 relative time, refreshed every minute) · running: sync icon, "Synkar…" · pending: suffix " · 2 ändringar väntar på synk" (sync_pending, plural) · offline: sync-pill-pending fill, cloud_off in pending, "Offline · 2 ändringar väntar på synk" (or "Offline" alone) · warning: warning-container fill, warning icon, "1 ändring synkades inte" (sync_rejected, plural) or "Telefonens klocka går fel" (sync_clock_wrong_short) · failed: "Synk misslyckades · försök igen om en stund" in the warning style.
• Never a blocking banner. Whole pill is one button: TalkBack "Synkstatus: ".

Banner(kind: Lantern | Error | Warning | Neutral, icon, title, body, actions): radius 24, padding 14 / 16 / 10, gap 6; icon 24 (filled) + title (title-small) + body (body-medium); actions right-aligned, text buttons in the banner's content colour. Lantern = tertiary-container, Error = error-container, Warning = warning-container, Neutral = surface-container-high. role status (alert for Error).

UpdateBanner(state: UpdateState, onUpdate, onLater, onRetry) (S-4, S-22): Available: Lantern, system_update, "Version 1.2 finns", "Nyheter och rättningar · 8,4 MB" (size from UpdateInfo.sizeBytes), actions "Senare" (text) and "Uppdatera" (tertiary filled, download); offline: "Uppdatera" disabled and the body reads "Kräver anslutning". Downloading: Lantern, downloading, "Laddar ner… 64 %", LinearWavyProgressIndicator in tertiary (determinate, track tertiary at 28 %), no actions; TalkBack progress "Laddar ner version 1.2, 64 procent". Failed: Error, error, "Nedladdningen misslyckades. Försök igen." with "Senare" and "Försök igen" (error filled, refresh). NeedsInstallPermission: Available look; "Uppdatera" opens the S-17 dialog.

NeedsConnectionBanner(body: String): Warning banner, cloud_off, title "Kräver anslutning", screen-specific body. NeedsConnectionHint: supporting line under a control: cloud_off 16 + "Kräver anslutning" in body-small weight 600 on-surface-variant, padding 4 / 16.

3.7 Expense editor fields (D-019; used by S-7 and S-19)

AmountDisplay(text: String, focused: Boolean, error: String?)

• Centred column, padding 10 top / 6 bottom: label "Belopp" (label-medium muted; error colour on error) above the amount (amount-hero, tabular) with a 3 dp primary caret when focused, then "kr" (headline-small muted) on the same baseline; wraps the unit under the number when it does not fit.
• Empty shows "0,00" in on-surface-variant as a hint, not a value.
• The text is what the user typed, grouped with U+00A0 thousands separators while typing ("1 060", "1 060,5"); the decimal separator is the locale's (, sv, . en).
• Semantics: "Belopp, 412 kronor" (empty: "Belopp, 0,00", the hint editor_amount_hint); error appended. Tapping it focuses it and shows the keypad.

AmountKeypad(onKey, onDelete, onClear, compact: Boolean)

• Sheet at the bottom of S-7 and S-19: surface-container, top corners 28, padding 12 / 12 and bottom = 8 + navigation-bar inset; 3-column grid, gap 8.
• Keys 1–9, decimal key, 0, delete. Each key: min height 52 (46 in compact, used while the split section is open), radius full, surface-container-highest, label 24 sp weight 600 (capped 1.5×). Delete key: primary-container fill, backspace 26 in on-primary-container.
• Decimal key shows , (sv) or . (en); TalkBack "Decimaltecken". Delete: TalkBack "Radera" (editor_keypad_delete); long-press or the TalkBack custom action "Rensa" clears the field.
• Input rules per §9.6, enforced key by key: digits; one decimal separator (a second is ignored); at most two decimals (a third digit is ignored); no sign; a value above 10 000 000,00 kr is not accepted (the key is ignored with a reject haptic); a leading 0 followed by a digit replaces the 0; decimal first gives "0,". Parsing to öre is string-exact (never floating point).
• Each key gives HapticFeedbackType.KeyboardTap. The keypad drives the editor's money and percent fields: the amount, the exact-share field and the two ratio percent fields (percent: max 100, two decimals).
• Visibility: shown while a keypad field has focus; hidden while the description or notes field has focus (the system keyboard shows instead) or nothing has focus. Back with the keypad visible clears focus and hides it (it does not close the editor).
• 200 %: keys grow with their labels; the keypad keeps its four rows and the content above scrolls.

DescriptionField: filled text field (radius 16, surface-container-highest, no indicator, 2 dp primary inset outline when focused, 2 dp error on error), label "Beskrivning", single line, 1–100 code points, capitalisation Sentences, IME action Done (§4 S-7). Error supporting text with filled error icon.

CategoryQuickRow(options, selected: CategoryId, onPick, onAll) (UX-3)

• A 6-column grid, gap 4: five category items and "Alla". Item: CategoryTile 52 (Container style; Solid when selected) above a label (11 / 14 sp weight 500 on-surface-variant, up to 2 lines, centred, no ellipsis; selected: on-surface weight 700).
• Selected tile: solid, plus a check badge: 20 dp circle in on-surface with check (14, filled, weight 700) in surface, offset to the tile's top-right (−6 / −8 dp), with a 2 dp surface ring.
• "Alla": tile in surface-container-highest with apps 26 in on-surface-variant, label "Alla"; opens CategoryGridSheet. TalkBack "Alla kategorier".
• Which five: the five active categories used most often in the selected account (count of non-deleted expenses on the phone, ties by sort_order), filled up from sort_order when fewer than five have been used; shown in that order. If the selected category (suggested, default or picked in the sheet) is not among them, it takes the fifth place. The order does not change while the editor is open except for that fifth place. The usage list is ExpenseEditorOptions.frequentCategoryIds (UX-9, pending); until it exists the five are the selected category followed by the first active categories in sort_order.
• 200 % (font scale ≥ 1.5): 3 columns, two rows, row gap 12.
• Semantics: radio group "Kategori"; each item "Nöje, vald" / "Mat & hushåll"; picking sets the editor's "picked by hand" flag (CS-2).

CategoryGridSheet: modal bottom sheet "Välj kategori": all active categories in sort_order, 4 columns (3 at ≥ 1.5×), items as in the quick row; tapping picks and closes the sheet.

EditorChip (the chips row under the category row): FlowRow, gap 6. Chip: min height 36 (48 target), radius full, surface-container-high, padding 4 / 10 / 4 / 8, label 14 / 18 sp weight 500 with an optional key prefix in on-surface-variant weight 600 ("Betalt av ", "Delning "), leading 18 dp element, trailing 18 dp icon. Selected (the split section is open): secondary-container. Chips:

Chip	Leading	Label	Trailing	Tap
Konto	12 dp dot in the account's chart colour	"Vardag"	expand_more	opens AccountPickerSheet
Datum (S-7 only)	event	"Idag" / "Igår" / "14 okt." (§9.8 list format)	expand_more	Material DatePickerDialog, range per §9.6
Betalt av	payer avatar 24	"Betalt av Du" / "Betalt av Anna"	swap_horiz	toggles between the two users (AC-8.3), no picker
Delning	call_split	"Delning Kontots standard 50/50" / "Egen fördelning 70/30" / "Exakta belopp" / "Allt på Anna"	expand_more / expand_less	opens or closes SplitSection in place and scrolls it into view

TalkBack: "Konto: Vardag. Dubbeltryck för att byta konto"; "Datum: idag"; "Betalt av: du. Dubbeltryck för att byta till Anna" (editor_paid_by_toggle); "Delning: kontots standard 50/50".

AccountPickerSheet: modal bottom sheet "Välj konto": active accounts in created order (AC-6.4: archived not offered), each row AccountTile 40 + name + the account's wording and amount (body-small, coloured), check on the selected one; tap picks and closes.

SplitBar(viewerPercent: Float, thin: Boolean, error: Boolean, knob: Boolean): two rounded segments (radius full) separated by a 3 dp gap (6 dp with a knob): left = viewer in the viewer's avatar colour, right = partner in the partner's avatar colour, widths proportional; height 16 (8 thin); error: left segment error. Decorative next to printed numbers; otherwise contentDescription "Du 60 procent, Anna 40 procent".

SplitSlider (S-6, ratio mode): SplitBar 16 dp with a knob (4 × 44 dp, radius 2, on-surface) at the split point; drag in steps of 1 percentage point with a haptic tick at 50; semantics slider labelled with the left person's share ("Jacobs andel", editor_ratio_slider) and value text "Jacob 60 procent, Anna 40 procent" (editor_ratio_spoken) and ± 1 adjust actions.

SplitPreview(shares: List<Share>?): a 72 dp thin SplitBar then body-medium "Du 206,00 kr · Anna 206,00 kr" (amounts weight 700, tabular). Data only from ExpenseRepository.preview (the UI never computes shares); hidden while it returns null. Semantics "Du 206,00 kronor, Anna 206,00 kronor".

SplitSection(mode, …): flat section (surface-container-low, radius 28, padding 16, gap 12):

• Header row: "Delning" (title-small) + expand_less icon button (TalkBack "Fäll ihop delning").
• Mode chips: four single-select filter chips, wrapping: "Kontots standard 50/50" (live ratio of the selected account, editor_split_mode_default), "Egen fördelning", "Exakta belopp", "Allt på en person"; selected = secondary-container with check. Semantics radio group "Delning".
• default: SplitBar 16 + SplitPreview text.
• ratio (RatioEditor): the two names with avatars 32 at either end, SplitSlider, two percent fields side by side ("Jacob" / "Anna", suffix "%", keypad-driven, two decimals, typing one sets the other to 100 minus it), presets as a ButtonGroup "40/60 · 50/50 · 60/40" (viewer first), then SplitPreview.
• exact (ExactSplitEditor): one row per person: avatar 40 + money field (label = name, suffix "kr", value amount-medium). The viewer's field is typed by default; the other is read-only (transparent fill, 1 dp outline-variant border) showing "beloppet minus …" as the computed value, or "—" while it cannot be computed, with trailing caption "räknas ut". Tapping the read-only field makes it the typed one (AC-8.7: one typed, the other derived). Typed share > amount: field in error with "Andelen är större än beloppet" (error_exact_share_too_large) and an error-container box "Jacob 1 200,00 kr av 1 060,00 kr" / "140,00 kr för mycket" (title-small); Spara disabled.
• full (FullSplitPicker): label "Vem står för hela beloppet?" (label-large muted), a two-button ButtonGroup (min height 52; avatar 28 + name each), SplitBar 16 fully in the bearer's colour, SplitPreview.

NotesField: collapsed as a text button "Lägg till anteckning" (notes icon); expanded: filled multi-line field "Anteckningar", 3–8 visible lines, 0–1000 code points, newlines allowed, counter "120 / 1000" as supporting text.

CompactEditorSummary: when the AmountDisplay has scrolled out of view, a row pinned under the top app bar: CategoryTile 36 + description (title-medium, ellipsis) over the category name (body-small muted) + MoneyText(Medium); padding 6 / 20 / 10; 1 dp outline-variant bottom border. Tap scrolls to the top and focuses the amount.

3.8 Settle up components (S-9, S-10)

DirectionCard(payer, recipient, onSwap): card, padding 14 / 14 / 14 / 18, gap 12: payer avatar 40 (Sunny) → arrow_forward (on-surface-variant) → recipient avatar 40; label "Riktning" (label-medium muted) over "Du betalar Anna" / "Anna betalar dig" (title-medium); trailing tonal icon button swap_horiz (TalkBack "Byt riktning", settle_swap). Semantics: card text "Riktning: du betalar Anna" + the button.

AllocationRow(line: AllocationLine, colorIndex, fixed: Boolean, onAmount, onRemove): SegmentedGroup item, padding 12 / 14, gap 8:

• Line 1: AccountTile 40 · name (title-medium, ellipsis) over the payer's position in body-small muted: "Skuld 3 084,50 kr" (the payer owes there, settle_row_debt); otherwise the account balance wording from the payer's side, "Anna är skyldig dig 1 184,50 kr" (balance_*_amount), or "Kvitt" (balance_account_settled) · amount field (148 dp wide, min height 48, radius 14, surface-container-highest, right-aligned amount-medium + "kr"; system decimal keyboard) · remove icon button close (TalkBack "Ta bort Huset från fördelningen", settle_row_remove). fixed: the amount is plain MoneyText(Medium) (it follows the settlement amount) and there is no remove button.
• Over-settle (overSettles): field border 2 dp warning; under line 1 a strip (warning-container, radius 12, padding 8 / 12): filled warning 20 + "Det här reglerar mer än som är skyldigt i Japan 2027" (settle_over_settle_warning).
• 200 %: name and position on line 1, the amount field full width on line 2, the remove button at the end of line 1.

RemainingIndicator(remainingOre): row, radius 16, padding 10 / 14, gap 10: zero → surface-container-high, filled check_circle in owed, "Kvar att fördela" + "0,00 kr"; positive → warning-container, filled error, "Kvar att fördela" + "250,00 kr"; negative → warning-container, filled error, "Kvar att fördela" + "250,00 kr för mycket" (common_too_much). Words always say which; semantics "Kvar att fördela 250,00 kronor". Live region polite.

3.9 Timeline (S-8, S-10)

Timeline(lines: List<TimelineLine>): header "Historik" (title-small, timeline_title) then a card (padding 16 / 16 / 16 / 12) with items oldest first, newest last (AC-12.4):

• Item: a 24 dp gutter with a 12 dp dot in secondary and a 2 dp outline-variant connector to the next item; text body-medium. Sentence per FieldChange: "Anna skapade den här · 16 okt. 14:02"; "Du ändrade beloppet från 1 147,60 kr till 1 247,60 kr · 16 okt. 19:40"; "Anna ändrade kategorin från Övrigt till Mat & hushåll · 16 okt. 20:05"; "Anna tog bort den här · 17 okt. 09:12"; recurring source "Skapad automatiskt (återkommande) · 25 sep. 06:00"; import source "Importerad från Splitwise · …". Several changes in one entry are one line each with the same time. Values formatted with MoneyFormatter/DateFormatter; field names from timeline_field_*.
• pendingLocal: hollow dot (2 dp pending ring), text in pending weight 600 with a 16 dp cloud_upload before it: "Din ändring väntar på synk" (AC-12.5); always last.
• Semantics: each item one node; the header is a heading.

3.10 Charts (S-11; Vico or the Canvas fallback, §6.2)

ChartCard(title, content): card, padding 18 / 16 / 16, title title-medium; an invisible summary sentence as contentDescription of the chart area.

StackedBarChart(buckets, groups, onBucket)

• Plot 170 dp high, y-axis gutter 44 dp on the left: gridlines (1 dp chart-grid) at 3–4 round values with labels in whole kronor (10 / 12 sp, chart-axis-label, sv "15 000", en "15,000"); x labels under each bar (11 / 14 sp: "maj", "jun" or the week number "41" with the caption "Vecka" under the axis).
• One bar per bucket (every bucket of the range, empty ones as zero, AC-14.7), gap 10, top corners 4, bottom 2; segments stacked in legend order with 2 dp gaps; segment colour per group (category colour or account chart colour).
• More buckets than fit at a minimum bar width of 16 dp: horizontal scroll, scrolled to the newest bucket on first show. At 200 %, x labels are drawn for every second bucket when they would overlap.
• Tap a bar → onBucket(key) (S-12). Each bar is a focusable semantics node: "September, 41 484 kronor, Resor största kategori".
• Chart summary (TalkBack): "Utgifter över tid, : högst i september med 41 484 kronor, lägst i maj med 24 710 kronor" (analytics_summary_over_time).

ChartLegend(groups): wrapping row, gap 4 / 12; 10 dp swatch (radius 3) + label (12 / 16 sp weight 500 on-surface-variant). Only groups with data. Decorative for TalkBack (the bars speak their totals).

BreakdownList(rows, total, onRow) (AC-14.6 charts 2 and 3): rows sorted by amount descending, padding 8 / 0, gap 6: tile 32 (CategoryTile or AccountTile) + name (title-small, 1 line, ellipsis; "Arkiverat" badge for archived accounts) + right column MoneyText(Small) over the percent (body-small muted, one decimal, half-up, "34,8 %", AC-14.10); below, a 10 dp bar track (surface-container-highest, radius full) indented 44 dp, filled to amount / largest amount in the group colour. Row is one node "Boende, 62 000 kronor, 34,8 procent"; click → onRow(id).

AnalyticsFilterBar(filter, onChange): row 1: period chip (date_range, label "Senaste 6 mån" / "Anpassad · 1–30 nov.", expand_more; TalkBack "Period: senaste 6 månaderna") + ButtonGroup "Månad | Vecka" (min width 170, fills the rest); row 2: ButtonGroup "Hushållet | Min del" and ButtonGroup "Kategori | Konto", half width each. Connected buttons: min height 40, label-large weight 600, unselected surface-container-high / on-surface-variant, selected secondary / on-secondary with full radius. 200 %: one control per row. Semantics: each group a radio group named "Indelning", "Mått", "Gruppera efter".

TotalCard(totalOre, caption): card, padding 16 / 20: "Totalt" (label-large muted; "Totalt · Min del" for my share) over MoneyText(Large) over the range caption (body-small muted, "maj–okt 2026 · Hushållet").

3.11 Scaffolding and common controls

KvittScaffold: edge-to-edge; top app bar slot, content, optional FAB, optional bottom bar, snackbar host above the FAB and navigation bar; status-bar inset handled by the app bar.

KvittTopAppBar(title, navigation: Back | Close | None, actions): 64 dp, surface (scrolled: surface-container), navigation icon button 48 (arrow_back TalkBack "Tillbaka" / close TalkBack "Avbryt"), title title-large 1 line ellipsis (pad 16 when there is no navigation icon), optional subtitle body-small muted. Top destinations (S-4) show the wordmark instead of a title: a 22 dp Sunny primary dot with a filled receipt_long (15) in on-primary, then "Kvitt" 24 sp weight 700 primary (capped 1.5×); semantics heading "Kvitt".

KvittNavigationBar(selected): Expressive ShortNavigationBar (fallback NavigationBar), surface-container, items 64 dp high: indicator pill 56 × 32 (primary-container when selected) with the icon (filled when selected), label label-medium (selected: on-surface weight 700) capped at 1.6×. Items: "Översikt" home, "Statistik" bar_chart, "Inställningar" settings (nav_*). Labels always visible.

AddExpenseFab(expanded: Boolean): medium extended FAB, 56 dp, radius 20, primary / on-primary, add 24 + "Lägg till utgift" (16 / 22 sp weight 600), 16 dp from the right edge and above the navigation bar; collapses to the 56 dp icon-only FAB while the list scrolls down and at font scale ≥ 1.5; TalkBack "Lägg till utgift" in both forms. Same component with "Ny återkommande" on S-19.

Buttons: radius full, label-large weight 600, icon 20. Small 40 dp (padding 8 / 20), medium 56 dp (padding 12 / 26, 16 sp, icon 24). Kinds: filled (primary), tonal (secondary-container), tertiary (tertiary), outlined (1 dp outline-variant, on-surface-variant), text (primary), danger text (error), error filled (error / on-error).

Badge: radius full, padding 2 / 10, label-small weight 600; neutral (surface-container-highest / on-surface-variant), lantern (tertiary-container), pending (pending-badge / pending). Icon 14.

SectionHeader(title, action): min height 48, padding 8 / 4 / 0 / 8, title title-large (heading semantics), optional trailing text button.

CollapsibleRow(title, count, expanded): min height 48, padding 6 / 8, inventory_2 + "Arkiverade (1)" (title-small) + expand_more/expand_less; semantics button with state "utfälld"/"hopfälld".

FactRow(icon, label, value) (detail facts in S-8, S-10, S-22): SegmentedGroup item, min height 56, padding 10 / 16, gap 14: outline icon in on-surface-variant, label (label-medium muted) over value (body-large). Merged node "Datum: fredag 16 oktober 2026".

SettingsRow(icon, color: ColorToken, title, subtitle, enabled): SegmentedGroup item, min height 56: tile 40 (Cookie4, cat-<color>-container fill, icon 22 in cat-<color>), title (title-medium) over subtitle (body-small muted), trailing chevron_right. Merged node, role button.

EmptyState(illustration, title, body, action): flat section (surface-container-low, radius 28, padding 28 / 24), centred, gap 10: decorative illustration (three rotated category tiles, ~170 × 110 dp), title headline-small, body body-large muted, optional medium button.

ConfirmDialog(icon, title, body, confirm, dismiss, destructive): surface-container-high, radius 28, padding 24, gap 14, 24 dp from the screen sides; centred 52–56 dp Sunny icon tile (destructive: error-container / on-error-container; otherwise secondary-container or tertiary-container); title headline-small centred; body body-medium muted; buttons right-aligned (dismiss text, confirm filled or error filled). Scrim 38 %.

KvittMenu: surface-container, radius 16, padding 6, min width 244, max 300, level 3. Items min height 48, padding 12, radius 12, icon + body-large; a disabled item shows its reason as a second line (body-small) at 50 % opacity and is still announced with that reason.

Snackbar: inverse-surface, text inverse-on-surface, action inverse-primary, radius 16; 4 s without an action, 10 s with one.

InviteCodeDisplay(code): three groups of four on surface chips (radius 14, padding 6 / 10), 24 / 32 sp weight 700, letter spacing 1.5, wrapping centred; selectable. TalkBack spells it per group: "7 K 3 M, Q X 9 D, 2 H P A".

InviteCodeField: filled field "Inbjudningskod", value title-large, uppercase, inserts the hyphens and normalises per §8.3 while typing (O → 0, I/L → 1), keyboard Ascii with Characters capitalisation; trailing "Klistra in" text button (content_paste), which also accepts a full invite link and fills the server from it.

Skeleton: surface-container-highest blocks, radius 12 (pills full), no shimmer under reduced motion; only for the first-sync and online-fetch loading states.

---

4. Screens

Each screen: layout top to bottom, the binding states (exactly the frames of the screen catalogue; PNG screens/<frame-id>-light.png and -dark.png, "light only" where noted), interactions, TalkBack, and 200 %. Modules and navigation are in ia.md.

S-1 Pairing (:feature:onboarding)

Layout (no app bar, no navigation; scrolling column, gutter 16, gap 14; bottom bar with the button):

1. Brand block, centred, padding 28 / 0 / 12: app mark 88 dp (Sunny, primary, filled receipt_long 44 in on-primary), "Kvitt" (display-small, primary), "Delade utgifter för två" (title-medium muted, common_tagline).
2. InviteCodeField with "Klistra in".
3. "Ditt namn" field (UX-4; 1–40, §9.6; capitalisation Words), required on a first pairing.
4. Help line: info 20 + body-medium muted "Koden får du av Jacob: från en länk eller från Inställningar › Bjud in partner." (onboarding_code_help; the partner's own name is unknown before pairing, so the generic onboarding_code_help_generic is used when the app was not opened from a link).
5. Server row, collapsed (surface-container-low, radius 16, min height 56): dns + "Serveradress" (label-medium muted) over the URL (body-medium, wraps anywhere) + expand_more; tap expands it into an editable field (keyboard Uri). It opens expanded when a link carried a server different from the release default.
6. Bottom bar, padding 12 / 16: "Para ihop" (filled medium 56, full width, link icon).

States

Frame	State	What differs
S-1-pairing	loaded	opened from Anna's invite link: code "7K3M-QX9D-2HPA" and server filled, "Ditt namn" = "Anna", nothing focused, "Para ihop" enabled
S-1-pairing-loading	loading	button shows a 20 dp progress indicator in on-primary and "Parar ihop…" (onboarding_pairing) and is not clickable; all fields read-only (transparent fill, 1 dp outline-variant border); "Klistra in" hidden
S-1-pairing-error	error	invite_invalid: the code field in error with "Koden fungerar inte. Den kan ha gått ut eller redan använts. Be om en ny." (onboarding_error_invite_invalid) under it; button enabled again
S-1-pairing-again	variant Unrecognised (§14.4.8; viewer Jacob)	the tagline is replaced by "Para ihop telefonen igen" (headline-small) and "Dina utgifter finns kvar på telefonen." (body-large muted, onboarding_again_*); no "Ditt namn" field; generic help line

Interactions

• Code typing: uppercase, hyphens inserted after 4 and 8, normalised per §8.3; "Para ihop" enabled when the code has 12 characters, the name is non-blank (first pairing) and the server is a valid URL. IME Next from code to name, Done on the name runs "Para ihop".
• "Klistra in": reads the clipboard; a 12-character code or an invite link (kvitt://invite?… or https://…/i/<CODE>) fills code (and server).
• Other errors, all inline under the field at fault, button enabled again: network "Kunde inte nå servern. Kontrollera adressen och anslutningen." (under the server row, which expands); rate_limited "För många försök. Vänta en stund och försök igen." (under the code); http:// in release (AC-2.8) "Adressen måste börja med https://" (server). Offline: the button stays enabled and gives the network error (pairing never queues).
• Success: pair(serverUrl, code, displayName, deviceName = Build.MODEL) → partner pairing goes to S-2 (AC-2.10), otherwise S-4 in its loading state; after the first full sync the system notification-permission prompt (AC-2.9), preceded by nothing (the rationale string home_notification_rationale is used only if Android asks for a rationale).

TalkBack: the paste button reads its text "Klistra in" (onboarding_code_paste); the code field reads the value group by group; the server row "Serveradress, https://icehack.asuscomm.com:8443, dubbeltryck för att ändra"; errors are announced (live region assertive).

200 %: single column scrolls; the code value wraps after a group; the brand block's title grows ~1.5×; the bottom button stays pinned.

S-2 Partner profile step (:feature:onboarding)

Layout (app bar without title or navigation; column gap 12; bottom bar):

1. Centred intro, padding 24 / 4 / 4: Jacob's avatar 72 (Sunny), "Du går med i Jacobs hushåll" (headline-small, onboarding_profile_joining), "Så här ser Jacob dig i Kvitt. Du kan ändra det senare under Inställningar › Profil." (body-large muted).
2. Card, padding 22 / 20, centred, gap 14: own avatar 112 (Sunny; initials on the own slot colour until a picture exists) with a 40 dp primary circle badge holding add_a_photo 20 at its bottom-right (3 dp card ring); "Lägg till bild" tonal button (photo_library; "Byt bild" when a picture exists, plus a text button "Ta bort bild"); "Ditt namn" field prefilled from the pairing call.
3. Bottom bar: "Fortsätt" (filled medium, full width).

States

Frame	State	What differs
S-2-profile-step	loaded	Anna's initials, name "Anna" focused
S-2-profile-step-loading	loading	a picture was picked and is uploading: the avatar shows it at 60 % with the progress ring (§3.3); "Byt bild" and "Fortsätt" disabled until the upload ends
S-2-profile-step-error	error	upload refused or network: snackbar "Bilden kunde inte användas" (profile_picture_failed, with the reason for payload_too_large / unsupported_media_type / image_invalid, or "Kunde inte nå servern"); avatar back to initials; "Fortsätt" enabled

Interactions: "Lägg till bild" opens the Android photo picker (images only, AC-4.3); upload starts immediately (setPicture). "Fortsätt" saves the name if changed (setDisplayName; failure → snackbar, stays) and goes to S-4; blank name → inline "Skriv ett namn" and "Fortsätt" disabled. Back is not offered (the pairing is done).

TalkBack: the avatar badge is part of the button "Lägg till bild"; avatar while uploading "Laddar upp bilden".

200 %: column scrolls, avatar stays 112.

S-3 Waiting for partner (:feature:onboarding, shown in the Home destination)

Layout (wordmark app bar; bottom navigation with Översikt selected; no FAB):

1. Hero card in the Waiting state (§3.6), padding 28 / 22 / 24: seesaw with the empty seat, "Väntar på din partner" (headline-small), "Kvitt behöver er båda innan ni kan börja. Bjud in din partner med en länk." (body-large muted), "Bjud in partner" (filled medium, person_add).
2. When an invite is pending: a one-item group: schedule + "Inbjudan skickad" (title-small) over "Inbjudan gäller till mån 19 okt. 21:40" (onboarding_waiting_invite_expires).
3. Body-medium muted line: "Konton, utgifter och betalningar blir tillgängliga när din partner har gått med."

States

Frame	State	What differs
S-3-waiting	loaded	pending invite row shown
S-3-waiting-offline	offline	"Bjud in partner" disabled with NeedsConnectionHint "Kräver anslutning" under it; the pending invite row is not shown (invites are online only)

Interactions: "Bjud in partner" → S-21 (it creates a partner invite there). When the partner joins, the next sync replaces this content with S-4 (empty). Statistik shows its empty state; Inställningar works.

TalkBack: hero one node "Väntar på din partner. Kvitt behöver er båda innan ni kan börja."; the seesaw is decorative.

S-4 Home (:feature:home)

Layout (wordmark app bar; column gap 12, bottom padding 120; bottom navigation; FAB):

1. UpdateBanner when HomeState.update / UpdateState is not None (S-17).
2. BalanceHero from HomeState.global.
3. SyncStatusPill from HomeState.sync and connectivity.
4. SectionHeader "Konton" with "Nytt konto" (text button, add).
5. AccountCard per active account, created order (AC-6.6).
6. CollapsibleRow "Arkiverade (n)" when archived accounts exist; expanded in place to their AccountCards (AC-6.4); collapsed by default, state kept for the session.
7. AddExpenseFab.

States

Frame	State	What differs
S-4-home	loaded	"Du är skyldig Anna 3 250,00 kr"; Vardag, Huset, Japan 2027; "Arkiverade (1)" collapsed
S-4-home-settled	variant settled + archived expanded	hero Settled with bunting, accounts "Kvitt", archived Gotland 2026 visible with badge; no "Gör upp"
S-4-home-empty	empty	partner joined, no accounts: a card with both avatars (44, overlapping by 10) "Du och Anna är med" / "Hushållet är klart. Nu behövs ett konto."; then EmptyState (pile of three solid tiles: groceries, travel, restaurants) "Skapa ert första konto", "Ett konto samlar utgifter som ni delar på samma sätt, till exempel Vardag, Huset eller en resa. Ni kan ha hur många ni vill.", button "Nytt konto" (medium, add); no sync pill, no FAB (AC-8.6 needs an account)
S-4-home-loading	loading (first sync only)	hero Loading, a 40 × 200 dp pill skeleton, "Konton" header without action, three skeleton account cards; no FAB
S-4-home-offline	offline + update banner	pill "Offline · 2 ändringar väntar på synk"; "Nytt konto" disabled with "Kräver anslutning" as its supporting text; banner Available with "Uppdatera" disabled ("Kräver anslutning")
S-4-home-200	long, 200 %, light only	app bar surface-container (scrolled 90 dp), hero amount ~1.5× with "kr" on its own line, account amounts under the names, FAB icon-only
S-4-home-en	English, light only	"You owe Anna", "SEK 3,250.00" (unit before the number), "Synced 3 min ago", "Accounts", "New account", "Add expense"

Interactions

• FAB → S-7 new (account per AC-8.6). Hidden while no active account exists (only archived accounts: hidden too, UX-6).
• "Gör upp" → S-9 global. Account card → S-5. "Nytt konto" → S-6 (offline: disabled). Pill → S-16. Banner per S-17.
• Returning from S-7 shows the S-7 snackbar here; from S-9 "Betalningen sparades" (snackbar_payment_saved).
• After the first full sync after pairing, the notification permission is asked once (AC-2.9).
• Pull-to-refresh is not offered (sync runs on its own triggers, AC-15.3).

TalkBack: hero as §3.6; pill as §3.6; account cards as §3.4; "Arkiverade (1), hopfälld"; FAB "Lägg till utgift"; navigation items "Översikt, flik 1 av 3, vald".

200 %: see S-4-home-200; every element reflows, nothing truncates except account names (two lines then ellipsis).

S-5 Account detail (:feature:account)

Layout (app bar: back, account name, more_vert; column gap 12; FAB):

1. AccountBalanceHeader.
2. Ledger: per month a LedgerMonthHeader and a SegmentedGroup of ExpenseRow / SettlementRow in AC-8.10 order; settlement amounts are the allocation to this account (AC-11.7).
3. AddExpenseFab (account preset to this one); hidden for archived accounts (UX-6).

Overflow menu (KvittMenu): "Ändra konto" (edit) → S-6; "Arkivera" (inventory_2) or "Återställ från arkiv" (unarchive); "Ta bort konto" (delete) enabled only when deletable, otherwise disabled with "Kontot kan inte tas bort så länge det har utgifter, betalningar eller återkommande utgifter" (account_delete_blocked).

States

Frame	State	What differs
S-5-account	loaded	Vardag: "Anna är skyldig dig 1 184,50 kr", October and September groups, the SL-kort row pending
S-5-account-menu	variant: overflow menu open	menu over the content; "Ta bort konto" disabled with its reason
S-5-account-archived	variant archived	Gotland 2026: "Arkiverat" badge, "Kvitt", "Återställ från arkiv" (tonal) in the header, no FAB
S-5-account-empty	empty	new account "Sommarstugan": header "Kvitt" without a settle button; EmptyState "Inga utgifter än" / "Lägg till den första utgiften i Sommarstugan." (no illustration, no button); FAB shown
S-5-account-offline	offline	menu open: all three items disabled, each with "Kräver anslutning" as its second line; rows, "Gör upp det här kontot" and FAB work
S-5-account-error	error	after "Arkivera" while the server is unreachable: snackbar "Kunde inte nå servern" with "Försök igen"; account unchanged
S-5-account-long	long	"Sommarstugan i Österåker 2027" ellipsized in the app bar; rows with long descriptions ellipsized at one line; an amount of 1 234 567,89 kr and a month total of 7 digits shown in full

Interactions

• Row → S-8 / S-10. "Gör upp det här kontot" → S-9 per account. FAB → S-7 with this account.
• "Arkivera" / "Återställ från arkiv": no confirmation (reversible); success → back to S-4 with snackbar "Vardag arkiverades" + "Ångra" (account_archived_snackbar; "Ångra" unarchives) / stays with "Vardag återställdes"; network failure → S-5-account-error.
• "Ta bort konto": ConfirmDialog (destructive) "Ta bort kontot Vardag?" / "Det går inte att ångra." → "Ta bort"; success → S-4; account_not_empty → snackbar "Kontot har fortfarande utgifter, betalningar eller återkommande utgifter".

TalkBack: overflow "Fler alternativ"; header one node (§3.6); month headers are headings; rows §3.5; disabled menu items read with their reason.

200 %: header wording and amount wrap; rows per §3.5 (amount under the text).

S-6 Account editor (:feature:account)

Layout (app bar: close, "Nytt konto" / "Ändra konto", "Spara" small filled; column gap 14):

1. Name field "Namn" (1–60, focused on open for a new account; capitalisation Sentences).
2. Card "Standarddelning", padding 18, gap 14: subtitle "Gäller nya utgifter i kontot. Varje utgift kan ändra sin egen delning." (account_editor_split_hint; this line also carries AC-6.3 when editing); the two people (avatar 32 + name, viewer left); SplitSlider; two percent fields ("Jacob", "Anna", suffix "%", system decimal keyboard, two decimals, the other follows as 100 minus); ButtonGroup presets "40/60 · 50/50 · 60/40"; preview box (surface-container-high, radius 16, padding 12 / 14, calculate icon): "Av 100,00 kr: Jacob 60,00 kr, Anna 40,00 kr" (account_editor_preview).

States

Frame	State	What differs
S-6-account-editor	loaded	new "Sommarstugan", 60 / 40
S-6-account-editor-offline	offline	NeedsConnectionBanner "Konton sparas direkt på servern. Anslut telefonen till internet för att skapa kontot." on top; field, card (45 % opacity) and "Spara" disabled
S-6-account-editor-error	error	name_taken: name field in error with "Det finns redan ett konto som heter Vardag" (account_editor_name_taken); "Spara" enabled again

Interactions: "Spara" enabled when the name is non-blank and the percentages sum to 100; shows a progress indicator inside the button while saving; success → back (new: to S-5 of the new account; edit: to S-5); network → snackbar "Kunde inte nå servern" + "Försök igen". Close with changes → ConfirmDialog "Slänga ändringarna?" "Släng" / "Fortsätt redigera".

TalkBack: slider "Jacobs andel, Jacob 60 procent, Anna 40 procent" (editor_ratio_slider, editor_ratio_spoken); preset buttons "60 procent du, 40 procent Anna".

200 %: percent fields stack vertically; presets wrap.

S-7 Expense editor (:feature:expense)

Full screen (§13.2), works offline (AC-8.2). The flow and the category rule are in §5.

Layout (app bar: close, "Ny utgift" / "Ändra utgift", "Spara" small filled with check; scrolling column gap 12, padding 16 bottom; keypad at the bottom while a keypad field has focus):

1. AmountDisplay (focused on open for a new expense).
2. DescriptionField "Beskrivning".
3. CategoryQuickRow (five tiles + "Alla").
4. Chips row: Konto · Datum · Betalt av · Delning (§3.7).
5. SplitPreview (when the split section is closed).
6. SplitSection (when open: after a tap on Delning, or always when the mode is not default in edit mode).
7. NotesField ("Lägg till anteckning", or the field when notes exist).
8. Edit mode: "Ta bort utgift" (danger text button, delete) at the end.
9. AmountKeypad; CompactEditorSummary pinned under the app bar when the amount has scrolled away.

States

Frame	State	What differs
S-7-editor	loaded (new, ten-second flow)	"412", "Systembolaget", category Nöje selected by the suggestion (no caption, CS-7), Vardag, Idag, Betalt av Du, Kontots standard 50/50, preview "Du 206,00 kr · Anna 206,00 kr", keypad up
S-7-editor-split	variant: exact split with error	compact summary row (Ullared, Shopping, 1 060,00 kr); Delning chip selected; split section open with "Exakta belopp"; Jacob's field 1 200,00 kr in error, Anna's read-only "—"; error box "140,00 kr för mycket"; compact keypad; "Spara" disabled
S-7-editor-full	variant: full split + notes (edit mode)	"Ändra utgift", SL-kort 30 dagar, Anna, Transport, 14 okt., "Allt på en person" with Anna as bearer, notes expanded, "Ta bort utgift"
S-7-editor-edit	variant edit mode	"Ändra utgift" for ICA Maxi Lindhagen (1 247,60 kr, Mat & hushåll, Vardag, 16 okt., Betalt av Anna); nothing focused, keypad hidden; "Ta bort utgift" visible at the end
S-7-editor-200	long, 200 %, light only	amount and "Spara" visible, quick row in 3 columns, the middle scrolls, keypad keys grow

Interactions

• Defaults (new): account per AC-8.6; category per §5 (UX-3: suggestion, falling back to AC-8.6); date today; payer the viewer (AC-8.3); mode default. From S-5 the account is that account.
• Changing the account: mode default re-copies the account's ratio (AC-8.8); the suggestion re-runs (CS-3) unless the category was picked by hand.
• "Spara" enabled when the amount is > 0, the description is non-blank and preview is not null; tap → save. SaveResult.Invalid maps each FieldError inline: amount required "Skriv ett belopp", out of range "Beloppet måste vara mellan 0,01 kr och 10 000 000,00 kr"; description required "Skriv en beskrivning", too long; date out of range "Datumet ligger för långt fram"; exact_sum_mismatch / exact share > amount "Andelen är större än beloppet". Focus moves to the first field in error.
• Saved (new) → back to the opener with snackbar "Utgiften sparades" (online) / "Sparad. Synkas när du är online." (offline), no "Ångra" (UX-6). Saved (edit) → back to S-8, no snackbar (the timeline shows the pending line).
• Description IME Done: saves when valid; otherwise hides the keyboard and focuses the first invalid field.
• Close or back with changes: ConfirmDialog "Slänga utgiften?" (new) / "Slänga ändringarna?" (edit) with "Släng" / "Fortsätt redigera"; without changes it closes directly.
• "Ta bort utgift" (edit): ConfirmDialog (destructive, delete) "Ta bort utgiften?" / "Den försvinner för er båda." → "Ta bort"; then back past S-8 to its opener with snackbar "Utgiften togs bort".
• Editing an expense the other person created: same editor, no warning.
• Not reachable without an active account (no FAB).

TalkBack: close "Avbryt"; "Spara"; amount, keypad, quick row, chips, split section per §3.7; the compact row "Ullared, Shopping, 1 060,00 kronor, dubbeltryck för att ändra beloppet". Errors announced.

200 %: S-7-editor-200; "Spara" always in the app bar; chips wrap to several rows; split section scrolls.

S-8 Expense detail (:feature:expense)

Layout (app bar: back, no title, edit "Ändra" and delete "Ta bort" icon buttons; column gap 10):

1. Hero card (fill cat-<token>-container, padding 20, gap 12): CategoryTile 60 + description (title-large, wraps) over "Mat & hushåll · Vardag" (body-medium muted); amount MoneyText(Large) with the pending marker (20) after it when pending; badge "Återkommande: Hyra" (lantern, event_repeat) when recurringTemplateName != null (AC-8.11).
2. Facts (FactRows): Datum (event, "fredag 16 oktober 2026"); Betalt av (person, avatar 24 + name, "Du" for the viewer); Delning (call_split, mode label "Kontots standard 50/50" / "Egen fördelning 70/30" / "Exakta belopp" / "Allt på Anna", a thin SplitBar, "Du 623,80 kr · Anna 623,80 kr"); Anteckning (notes, full text) only when notes exist.
3. Timeline.

States

Frame	State	What differs
S-8-expense	loaded + pending	ICA Maxi Lindhagen, notes, timeline with create, two changes and "Din ändring väntar på synk"
S-8-expense-recurring	variant recurring	Hyra september, Boende · Huset, badge "Återkommande: Hyra", timeline "Skapad automatiskt (återkommande) · 25 sep. 06:00"
S-8-expense-deleted	variant deleted	Neutral banner on top: filled delete in error + "Anna tog bort den här utgiften · 17 okt. 09:12" + "Den räknas inte längre i saldon eller statistik."; hero and facts at 62 % opacity, tile desaturated; no "Ändra" / "Ta bort"
S-8-expense-missing	empty	ExpenseRepository.detail emits null: EmptyState (Cookie9 tile, sync_problem) "Utgiften finns inte på telefonen än" / "Den kan finnas på servern. Synka för att hämta den." with "Synka nu" (tonal, sync); no actions in the app bar

Interactions: "Ändra" → S-7 edit. "Ta bort" → the delete dialog of S-7, then back with snackbar "Utgiften togs bort". "Synka nu" → SyncRepository.syncNow(); the screen fills in when the row arrives. Opened from a deletion notification → deleted state (AC-13.6 opens Home for deletions; the deleted state also shows when the row is deleted while open).

TalkBack: icon buttons "Ändra utgift" (expense_editor_edit), "Ta bort utgift" (expense_editor_delete); hero one node "ICA Maxi Lindhagen, Mat & hushåll, Vardag, 1 247,60 kronor, väntar på synk"; facts per FactRow; timeline items one node each.

200 %: facts wrap; hero description wraps.

S-9 Settle up (:feature:settle)

Layout (app bar: close, "Gör upp" / "Gör upp Huset" (per account) / "Ändra betalning" (editing); column gap 10, padding bottom 20; bottom bar):

1. DirectionCard.
2. Amount field "Belopp" (filled, value amount-large, suffix "kr" title-large muted; system decimal keyboard; §9.6 input rules).
3. Header "Fördelning" (title-small) and a SegmentedGroup of AllocationRows (SettleState.lines).
4. RemainingIndicator (global variant only).
5. "Lägg till konto" (text, add) and, after a row was edited, "Föreslå igen" (text, refresh).
6. Info line (global variant, when an account where the payer is owed is not in the rows, §9.4): info 18 + body-small muted "Vardag lämnas som det är, eftersom Anna är skyldig dig där." (settle_untouched_partner_owes; "… eftersom du är skyldig Anna där." is settle_untouched_you_owe).
7. Chip "Datum Idag" (date picker) and field "Anteckning" (0–200, placeholder "Till exempel Swish").
8. Bottom bar (surface, 1 dp outline-variant top line, padding 10 / 16): "Bekräfta" (filled medium, full width, check), enabled only when canConfirm.

States

Frame	State	What differs
S-9-settle	loaded (proposal)	"Du betalar Anna", 3 250,00 kr; Huset 3 084,50, Japan 2027 165,50; "Kvar att fördela 0,00 kr"; info line about Vardag
S-9-settle-adjusted	variant over-settle	Huset 1 750,00, Japan 2027 1 500,00 with the warning border and strip; remaining 0,00
S-9-settle-remaining	variant sum mismatch	Huset 2 000,00, Japan 2027 1 000,00; remaining "250,00 kr" in warning style; "Bekräfta" disabled
S-9-settle-account	variant per account	"Gör upp Huset": one fixed row (no remove, amount follows), no remaining, no "Lägg till konto", no info line; direction swap and amount editable (UX-6)
S-9-confirm-dialog	variant confirm dialog	over S-9-settle-adjusted: dialog "Bekräfta betalningen", "Du betalar Anna 3 250,00 kr idag, lördag 17 oktober 2026.", the allocations (name + amount per line), the warning strip per warned row, "Avbryt" / "Bekräfta"
S-9-settle-empty	empty	global balance zero: amount empty (hint "0,00"), no rows; in place of the rows a body-medium muted line "Skriv ett belopp så föreslår Kvitt en fördelning."; no remaining indicator; "Bekräfta" disabled
S-9-settle-200	long, 200 %, light only	each allocation row stacks name and debt over a full-width amount field; direction card wraps its text; bottom button stays pinned

Interactions

• Defaults from SettlementRepository.start (AC-11.3, AC-11.4; editing: AC-11.6).
• Editing the amount calls recompute with allocations = null (a fresh proposal) until the user edits a row; afterwards it keeps the rows and only updates the remaining amount; "Föreslå igen" re-proposes. Swapping the direction re-proposes. Per account: the single row follows the amount.
• "Lägg till konto" → bottom sheet of all non-deleted accounts not yet listed (archived with badge, AC-11.3); picking adds a row with an empty amount, focused.
• Remove → the row disappears and the remaining amount updates.
• "Bekräfta": with any overSettles row → the confirm dialog (AC-11.5) → "Bekräfta" saves; without warnings it saves directly. Saved → back to S-4 or S-5 with snackbar "Betalningen sparades". Invalid → inline under the amount or the rows (settle_error_allocation_sum, settle_error_allocation_positive, …).
• Close with changes → ConfirmDialog "Slänga ändringarna?" (common_discard_title) "Släng" / "Fortsätt redigera".
• Works offline unchanged.

TalkBack: swap "Byt riktning"; remove "Ta bort Huset från fördelningen"; row fields labelled "Belopp för Huset"; the remaining indicator is a polite live region; dialog title announced.

200 %: S-9-settle-200.

S-10 Settlement detail (:feature:settle)

Layout (app bar: back, "Betalning", edit "Ändra", delete "Ta bort"; column gap 10):

1. Hero card (fill settlement-hero, padding 22 / 20, centred, gap 8): payer avatar 52 (Sunny) → arrow_forward 28 → recipient avatar 52; "Anna betalade dig" (title-medium); MoneyText(Large) with the pending marker when pending.
2. Facts: Datum ("tisdag 6 oktober 2026"), Anteckning (when present).
3. "Fördelning" header and a group: one row per allocation (AccountTile 36, name title-medium, MoneyText(Small)).
4. Timeline.

States

Frame	State	What differs
S-10-settlement	loaded	Anna → Jacob 800,00 kr, Vardag, "Swish"
S-10-settlement-deleted	variant deleted	Neutral banner "Anna tog bort den här betalningen · 17 okt. 09:12" + "Den räknas inte längre i saldona."; content at 62 % opacity; no "Ändra" / "Ta bort"; timeline ends with "Anna tog bort den här · 17 okt. 09:12"

Interactions: "Ändra" → S-9 editing. "Ta bort" → ConfirmDialog (destructive) "Ta bort betalningen?" / "Saldona räknas om för er båda." → back with snackbar "Betalningen togs bort". A missing settlement uses the S-8 missing layout ("Betalningen finns inte på telefonen än"); no frame.

TalkBack: hero one node "Anna betalade dig 800,00 kronor"; icon buttons "Ändra betalning", "Ta bort betalning".

S-11 Analytics (:feature:analytics)

Layout (app bar "Statistik" without navigation icon; column gap 10; bottom navigation with Statistik selected; no FAB):

1. AnalyticsFilterBar (defaults AC-14.2–AC-14.5: Senaste 6 mån, Månad, Hushållet, Kategori).
2. TotalCard.
3. ChartCard "Utgifter över tid": StackedBarChart grouped by the group-by toggle, ChartLegend.
4. ChartCard "Per kategori": BreakdownList of categories.
5. ChartCard "Per konto": BreakdownList of accounts (archived included with badge, AC-14.9).

States

Frame	State	What differs
S-11-analytics	loaded	maj–okt 2026, household, by category; legend of the categories with data; "Per kategori" begins
S-11-analytics-scrolled	loaded, scrolled	app bar surface-container; the end of "Per kategori" and the whole "Per konto"
S-11-analytics-week	variant week / my share / by account	"Anpassad · 24 aug.–17 okt.", Vecka, Min del, Konto; eight weekly bars by account with "Vecka" caption; "Per konto"
S-11-analytics-empty	empty	"Anpassad · 1–30 nov."; total 0,00 kr; EmptyState (three other container tiles) "Inga utgifter i den här perioden" / "Välj en annan period, eller lägg till en utgift med ett datum i perioden." + "Byt period" (tonal, date_range); charts hidden, filters stay
S-11-analytics-200	long, 200 %, light only	filter controls one per row; total amount ~1.5×; chart labels thinned; breakdown names ellipsize, amounts and percents whole

Interactions

• Period chip → menu of the presets (AC-14.2: "Denna månad", "Senaste 3 mån", "Senaste 6 mån", "Senaste 12 mån", "I år", "All tid", "Anpassad…"); "Anpassad…" opens the Material date range picker; "Använd" is enabled only with both dates (AnalyticsState note in §14.2.4).
• Toggles re-query immediately; the filter survives tab switches within the session.
• Bar → S-12 for that bucket (all groups); breakdown row → S-12 for that category or account over the range (AC-14.8).
• Settlements are never counted (AC-14.6). Works offline.

TalkBack: chart summary sentences as §3.10; each bar and row a node; toggles are radio groups.

200 %: S-11-analytics-200.

S-12 Analytics drill-down (:feature:analytics)

Layout (app bar: back, title formatted from the drill-down arguments: "Mat & hushåll, oktober 2026" / "Vardag, v. 41" / "Oktober 2026" / "Mat & hushåll, maj–okt 2026"; one line, ellipsis; column gap 10):

1. Header card (fill cat-<token>-container for a category, account-header-n for an account, primary-container for a whole bucket; padding 18 / 20): tile 56 (CategoryTile, AccountTile, or a Cookie4 primary tile with bar_chart for a bucket) + "Totalt · Hushållet" / "Totalt · Min del" (label-large muted) over MoneyText(Large) over "4 utgifter" (body-small muted, plural).
2. SegmentedGroup of ExpenseRows, newest first.

States

Frame	State
S-12-drilldown	loaded (Mat & hushåll, oktober 2026)

Interactions: row → S-8. If the data changed and nothing is left: the header shows 0,00 kr and the line "Inga utgifter längre" replaces the list (no frame).

TalkBack: header one node "Mat & hushåll, oktober 2026, totalt 3 910,00 kronor, 4 utgifter".

S-13 Settings hub (:feature:settings)

Layout (app bar "Inställningar"; column gap 12; bottom navigation with Inställningar selected):

1. Household card (padding 16 / 18, gap 12; role lines only, no device name: SessionState carries none): viewer row: avatar 52 (Sunny) + name (title-medium) over "Du · Administratör" (settings_role_admin) or "Du" (settings_role_member) in body-small muted; 1 dp divider; partner row: avatar 52 + name over "Partner" (common_partner) or "Admin" (settings_role_admin_other).
2. Group 1: SettingsRows "Profil" (person, orange, "Namn och bild"), "Kategorier" (category, green, "14 aktiva"), "Återkommande utgifter" (event_repeat, brown, "3 aktiva, 1 pausad" / "Inga").
3. Group 2: "Enheter" (devices, blue, no subtitle: the list is online only); admin only: "Bjud in partner" (person_add, teal) while the partner has not joined, else "Para ihop en enhet" (add_link, teal); "Synkstatus" (sync, purple, the pill's text, e.g. "Synkad för 3 min sedan" / "2 väntar på synk"); "Om Kvitt" (info, grey, "Version 1.1" / "Uppdatering finns").

States

Frame	State	What differs
S-13-settings	loaded (admin)	Jacob "Du · Administratör", Anna "Partner"; "Para ihop en enhet" shown
S-13-settings-member	variant member	Anna's phone: Anna "Du" first, Jacob "Admin"; no invite or pairing row (AC-2.2)

Interactions: each row pushes its screen (S-14, S-15, S-19, S-20, S-21, S-16, S-22). Rows to online-only screens stay enabled; those screens show their offline state.

TalkBack: household card two nodes ("Jacob, du, administratör"; "Anna, partner"); rows "Kategorier, 14 aktiva, knapp".

S-14 Profile (:feature:settings)

Layout (app bar: back, "Profil", "Spara" small filled; column gap 14):

1. Centred, padding 20 / 0 / 10: own avatar 128 (Sunny); buttons "Byt bild" (tonal, photo_library; "Lägg till bild" without a picture) and "Ta bort bild" (text, delete; only with a picture).
2. Field "Namn" (1–40) with supporting text "Så här ser Anna dig i Kvitt." (partner's name).

States

Frame	State	What differs
S-14-profile	loaded	Jacob, picture, name focused
S-14-profile-loading	loading	a new picture uploading: progress ring on the avatar, both picture buttons disabled
S-14-profile-offline	offline	Warning banner "Kräver anslutning. Profilen kan bara ändras när telefonen är online." (settings_profile_offline_banner); buttons, field and "Spara" disabled

Interactions: picture changes apply on success without "Spara" (AC-4.3); "Ta bort bild" asks nothing (reversible by adding again). "Spara" enabled when the name changed and is valid; saves with setDisplayName; success → back (no snackbar). Failures: snackbar per S-2 (picture) or "Kunde inte nå servern" + "Försök igen".

TalkBack: avatar = the viewer's name; while uploading "Laddar upp bilden".

S-15 Categories (:feature:settings)

List layout (app bar: back, "Kategorier", add icon button "Ny kategori"; column gap 4):

1. SegmentedGroup of active categories in sort_order: row min height 56, padding 4 / 12 / 4 / 8, gap 12: drag handle (drag_indicator, 32 × 48 target), CategoryTile 36 solid, name (title-medium; custom name or localised default), chevron_right.
2. CollapsibleRow "Arkiverade (n)" and, expanded, a group of archived categories (no drag handle, 32 dp spacer, muted tile).

Editor layout (pushed; app bar: close, "Ändra kategori" / "Ny kategori", "Spara"; column gap 10):

1. Row: live preview CategoryTile 64 + name field "Namn" (1–40; for a default category an empty field means "use the default name"); for a default category under the field "Standardnamn: Mat & hushåll" (body-small muted) and, when a custom name exists, "Återställ namn" (text, restart_alt, AC-7.4).
2. "Ikon" (title-small) + CategoryIconPicker (33).
3. "Färg" + ColorSwatchPicker (14).
4. Footer row: "Arkivera" (outlined, inventory_2) or "Återställ från arkiv" (outlined, unarchive); delete: default category → lock 16 + "Kan inte tas bort: standardkategori" (body-small muted, settings_category_delete_blocked_default_short); custom unused → "Ta bort kategori" (danger text, delete); custom in use → disabled "Ta bort kategori" with "Kategorin används av utgifter eller återkommande utgifter. Arkivera den i stället." (settings_category_delete_blocked_in_use); the state comes from CategoryRepository.deletable(id) (UX-9, pending), see open point 2 for the behaviour until then.

States

Frame	State	What differs
S-15-categories	loaded	the 14 defaults in sort order
S-15-categories-scrolled	loaded, scrolled	the end of the list, "Arkiverade (1)" expanded with Pant
S-15-categories-offline	offline	no drag handles; a NeedsConnectionHint line "Kräver anslutning för att ändra" above the list; "Ny kategori" disabled; rows not clickable, no chevrons
S-15-category-editor	variant editor (default renamed)	"Matvaror" over "Standardnamn: Mat & hushåll" with "Återställ namn"; shopping_cart, green; "Arkivera"; "Kan inte tas bort: standardkategori"
S-15-category-editor-custom	variant editor, custom archived	"Pant", water_drop, teal; no default-name line; "Återställ från arkiv"; "Ta bort kategori" disabled with "Kategorin används av utgifter eller återkommande utgifter och kan inte tas bort." (settings_category_delete_blocked_in_use_archived; an active category uses settings_category_delete_blocked_in_use, which adds "Arkivera den i stället.")

Interactions

• Reorder: long-press a row or drag its handle; on drop reorder(ids); failure → snackbar "Kunde inte nå servern" and the old order returns. TalkBack custom actions "Flytta upp" / "Flytta ned" on each active row.
• Row → editor. "Spara" (online) → update / create; success → back. "Återställ namn" sets the field empty and the preview name to the default (saved with "Spara", name = null).
• "Arkivera" / "Återställ från arkiv" act immediately (online) and return to the list with a snackbar ("Pant arkiverades"). "Ta bort kategori" → ConfirmDialog "Ta bort kategorin Pant?" → delete; category_in_use → the disabled reason inline.

TalkBack: drag handle "Flytta Mat & hushåll" (settings_categories_drag_handle); add "Ny kategori"; icon and colour pickers per §3.4; preview tile decorative.

200 %: icon grid stays 7 columns (icons do not scale); colour grid 7 columns; the footer wraps.

S-16 Sync status (:feature:home)

Layout (app bar: back, "Synkstatus"; column gap 10):

1. When clockSkew: Error banner (schedule) "Telefonens klocka går fel. Rätta den och synka igen." / "Klockan ligger mer än 10 minuter före servern. Dina ändringar sparas på telefonen tills dess." with "Datum och tid" (text, open_in_new, opens the system date settings).
2. Status card (padding 20, gap 14): 52 dp Sunny tile (owed-container + filled cloud_done; surface-container-highest + sync_problem when the last attempt failed or was refused) + "Synkad för 3 min sedan" / "Synkar…" / "Offline" (title-medium) over "Senast lyckade synk 13:59" (body-small muted).
3. "Synka nu" (filled medium, full width, sync); disabled with a progress indicator while running; offline disabled with "Kräver anslutning".
4. "Väntande ändringar (2)" header + group of pending rows: CategoryTile 36 (settlements: the settlement tile), description (title-medium, ellipsis), "Väntar på synk" with cloud_upload 15 in pending (body-small), MoneyText(Small); tap → S-8 / S-10. Rows carry no change-kind tag ("Ny" / "Ändrad" / "Borttagen" of U1): SyncStatusState.pending is a list of LedgerRows without one, and the tag is not needed for v1.
5. "Ändringar som inte synkades" header + one outlined card per rejection (1 dp outline-variant, padding 16, gap 10): 36 dp tile (receipt_long for an expense, handshake for a settlement, on surface-container-highest) + summary (title-medium) + reason text per §14.4.6 with the time ("Din ändring ersattes av en nyare ändring från Anna · 17 okt. 08:31", body-medium) + a body-small muted consequence line ("Annas version gäller. Öppna utgiften om du vill göra din ändring igen."); actions "Öppna" (text) and "Ta bort från listan" (tonal).

States

Frame	State	What differs
S-16-sync	loaded	synced 3 min ago, two pending rows, one stale rejection (Babette)
S-16-sync-clock	variant clock skew	clock banner first; status "Synkad för 2 h sedan" / "Senaste försöket nekades: klockan" with sync_problem; pending rows; no rejection list
S-16-sync-empty	empty	status card "Allt är synkat" (home_sync_status_all_synced) over "Senast lyckade synk 13:59"; "Synka nu"; no pending or rejection sections

Interactions: "Öppna" opens the entity's current version (S-8 / S-10; deleted or missing states apply); "Ta bort från listan" → dismiss (works offline). The rows update live while a sync runs.

TalkBack: status card one node; rejection card one node plus its two buttons, read with their visible text ("Öppna", "Ta bort från listan", home_sync_status_dismiss).

S-17 Update available (:feature:home)

Not a screen: the UpdateBanner on S-4 (and S-22) and one dialog.

Dialog "Tillåt installation" (shown once, before the first install, when UpdateState.NeedsInstallPermission): ConfirmDialog with a 56 dp Sunny tertiary-container tile (install_mobile), title "Tillåt installation", body "Kvitt uppdateras direkt från er server, inte från Play Butik. Därför frågar Android en gång om Kvitt får Installera okända appar." and "Slå på Tillåt från den här källan och gå sedan tillbaka till Kvitt. Uppdateringen fortsätter av sig själv.", buttons "Senare" / "Fortsätt" (arrow_forward, opens the system setting for Kvitt).

States

Frame	State	What differs
S-17-update	variant first-time dialog	the dialog over S-4 with the Available banner
S-17-update-progress	loading (downloading)	banner Downloading 64 %
S-17-update-failed	error	banner Failed

Interactions: "Uppdatera" → install(); after the system setting, returning to the app continues; verified download → system installer (out of the app's hands). "Senare" hides the banner until the next cold start. Offline: "Uppdatera" disabled with "Kräver anslutning". Debug builds never show it (AC-16.5).

TalkBack: progress announced as a percentage every 10 %; dialog title read on open.

S-18 Device removed (:feature:onboarding)

Layout (no app bar, no navigation): centred column, padding top 80, gap 14: Cookie9 tile 112 (error-container, phonelink_erase 52 in on-error-container); "Den här telefonen har tagits bort" (headline-medium); "Åtkomsten togs bort och allt Kvitt-data på telefonen har raderats." (body-large muted); "Vill du använda Kvitt igen behöver du en ny inbjudningskod." (body-medium muted). Bottom bar: "Para ihop igen" (filled medium, full width, link).

States

Frame	State
S-18-removed	loaded

Interactions: "Para ihop igen" → acknowledgeRevoked() → S-1 (first pairing: with the name field). Back closes the app.

S-19 Recurring expenses (:feature:settings)

List layout (app bar: back, "Återkommande utgifter"; column gap 10; FAB "Ny återkommande"):

• SegmentedGroup of templates (row min 72, top-aligned, padding 14 / 16): CategoryTile 40 (muted when paused) · description (title-medium, ellipsis) over "Huset · Anna betalar" (account · payer, body-medium muted) over "Varje månad den 25:e" and "Nästa 25 okt." (body-small muted, two lines; settings_recurring_every_month_on, settings_recurring_next) or, when paused, a "Pausad" lantern badge (pause) + "Varje månad den 12:e" · MoneyText(Small) right (70 % opacity when paused).

Editor layout (pushed; app bar: close, "Ny återkommande utgift" / "Återkommande utgift", "Spara"; column gap 12): AmountDisplay (+ keypad when focused; focused on open for a new template), DescriptionField, CategoryQuickRow (no suggestion, open point 3), chips Konto · Betalt av · Delning (no Datum), SplitSection when open; then a flat section "Schema" (padding 16, gap 10): "Dag i månaden" field (1–31, number keyboard) and "Första månad" (dropdown; a month picker dialog titled with the field label, with a year row and 12 month chips; months before the allowed start disabled, AC-9.8 default) side by side (1 : 1.5); "Sista månad (valfritt)" (placeholder "Ingen slutmånad"); a switch row "Pausad" with "Skapas kl. 06:00 den 25:e varje månad" (body-small muted). Day 29–31: hint "I kortare månader används sista dagen". Editing: hint "Ändringen gäller kommande utgifter." (AC-9.4); after un-pausing: "Månader som passerat under pausen skapas inte i efterhand." (§9.5). Edit mode: "Ta bort" (danger text) at the end.

States

Frame	State	What differs
S-19-recurring	loaded	Hyra, Bahnhof bredband, Netflix, Spotify Family (paused)
S-19-recurring-empty	empty	EmptyState "Inga återkommande utgifter" / "Hyra, el och streaming kan läggas in automatiskt varje månad." + "Ny återkommande utgift" (medium, add); no FAB
S-19-recurring-offline	offline	Warning banner "Kräver anslutning. Återkommande utgifter kan bara ändras när telefonen är online." (settings_recurring_offline_banner) above the list; FAB disabled (on-surface 12 % fill, 38 % content); rows not clickable, list readable
S-19-recurring-editor	variant editor	Hyra 12 400,00 kr, Boende, Huset, Betalt av Anna, Kontots standard 60/40, day 25, from september 2026

Interactions: FAB or empty-state button → editor (new). Row → editor. "Spara" (online) → create / update; success → back; network → snackbar. "Ta bort" → ConfirmDialog "Ta bort Hyra?" / "Utgifter som redan skapats finns kvar." → delete. Close with changes → discard dialog.

TalkBack: row one node "Hyra, 12 400,00 kronor, Huset, Anna betalar, varje månad den 25:e, nästa 25 oktober" (paused: "pausad"); FAB "Ny återkommande utgift".

S-20 Devices (:feature:settings)

Layout (app bar: back, "Enheter"; column gap 10): SegmentedGroup of devices (row min 72, top-aligned, padding 16): tile 40 (Cookie4, cat-blue container, smartphone in cat-blue) · name (title-medium) + "Den här enheten" lantern badge for the current one · avatar 20 + owner name (body-medium muted) · "Parad 3 okt. · Senast sedd nyss · Kvitt 1.1" (body-small muted) · for revocable devices "Ta bort åtkomst" (danger text, block). Revoked devices are not listed. Footer: "Du kan inte ta bort åtkomsten för den telefon du använder just nu." (body-small muted). Admin sees both users' devices, a member their own (AC-3.1).

States

Frame	State	What differs
S-20-devices	loaded	Galaxy S26 (Jacob, this device), Galaxy S26+ (Anna)
S-20-devices-revoke	variant confirm dialog	ConfirmDialog (destructive, phonelink_erase) "Ta bort åtkomst för Galaxy S26+?" / "Annas telefon loggas ut och allt Kvitt-data på den raderas. Anna kan para ihop den igen med en ny inbjudningskod." / "Avbryt", "Ta bort åtkomst"
S-20-devices-loading	loading	two skeleton rows while list() runs
S-20-devices-offline	offline	no list; centred cloud_off 48 + "Kräver anslutning för att visa enheter" (title-medium)

Interactions: revoke → dialog → revoke(id) → the row updates; failure → snackbar. Network failure on open → the offline layout with "Kunde inte nå servern" and "Försök igen".

S-21 Invites (:feature:settings, admin only)

Layout (app bar: back, "Bjud in partner" while the partner has not joined, else "Para ihop en enhet"; column gap 10):

1. Before an invite is created in this visit: card with a body-medium explanation and the create buttons: "Bjud in partner" (filled, person_add, only while one user exists, AC-2.1) or, after the partner joined, "För mig" and "För Anna" (tonal, add_link; AC-2.2).
2. After creation, in its place: a tertiary-container card (padding 20, gap 12): key (filled) + "Ny enhet för Jacob" (settings_invites_new_device_for) / "Inbjudan till din partner" (settings_invites_new_partner) (title-medium); "Inbjudningskod" (label-medium); InviteCodeDisplay; the link (body-small, centred, wraps anywhere); schedule + "Gäller till tis 20 okt. 14:02"; "Dela" (tertiary, share; Android share sheet with settings_invites_share_message) and "Kopiera kod" (outlined in on-tertiary-container, content_copy; snackbar "Koden kopierades"). Under the card: "Öppna länken på den nya telefonen, eller skriv in koden i Kvitt. Koden fungerar en gång." (body-medium muted).
3. "Väntande inbjudningar" header + group: tile (key, cat-yellow container) + "Enhet · Jacob" / "Partner" (title-medium) over "Skapad idag 14:02 · Gäller till tis 20 okt. 14:02" (body-small muted) + "Avbryt" (text). Rows created earlier have no code ("Koden visas bara när den skapas").

States

Frame	State	What differs
S-21-invites	loaded	created device invite for Jacob; one pending row
S-21-invites-offline	offline	Warning banner "Kräver anslutning. Inbjudningar kan bara skapas och visas när telefonen är online." (settings_invites_offline_banner); create buttons disabled; no pending list
S-21-invites-error	error	after a create: snackbar "Kunde inte nå servern" with "Försök igen"; no card

Interactions: create → create(kind, targetUser); household_full → snackbar "Din partner har redan gått med" (error_household_full). "Avbryt" on a pending row → ConfirmDialog "Avbryta inbjudan?" → cancel(id). Leaving the screen discards the shown code (it cannot be shown again).

TalkBack: code spelled per group (§3.11); "Dela" (settings_invites_share), "Kopiera kod" (settings_invites_copy_code); pending row "Enhet för Jacob, gäller till tisdag 20 oktober 14:02" + "Avbryt inbjudan".

S-22 About (:feature:settings)

Layout (app bar: back, "Om Kvitt"; column gap 10): centred app mark 96 (Sunny, primary, receipt_long 48), "Kvitt 1.1 (11)" (headline-medium), "Delade utgifter för två" (body-medium muted); UpdateBanner when an update is available; group of FactRows: Server (dns, URL wraps), Serverversion (memory, "1.1.0" or "Okänd" when /health failed), "Licenser för öppen källkod" (description, chevron → the licences screen); "Sök efter uppdatering" (tonal medium, system_update, centred; hidden in debug builds, AC-16.5).

States

Frame	State
S-22-about	loaded

Interactions: "Sök efter uppdatering" → check() with progress in the button; result: the banner appears, or snackbar "Du har den senaste versionen"; network → "Kunde inte nå servern".

Notifications (:app builds them, copy in :core:design)

Built locally after the sync per AC-13.5; channel "Aktivitet" (notif_channel_activity). Small icon: the monochrome receipt_long app mark; accent colour primary; large icon: the actor's avatar when cached (else none). Title and body per §13.3 in the phone's language (notif_*), e.g. "Anna lade till en utgift" / "ICA Maxi Lindhagen · 1 247,60 kr · Vardag"; "Anna registrerade en betalning" / "Anna betalade dig 800,00 kr". Generic fallback without amounts when the sync fails. Tap per AC-13.6.

Frame	State
N-notifications	the notification shade with two notifications

---

5. The add-expense flow (S-7) in detail

The most important flow (§13.1). It must need at most: open app, tap add, type amount, type description, tap save; account and category are defaulted (AC-8.6, and UX-3 for the category).

5.1 The ten-second path (binding)

Step	User	Screen
1	Taps "Lägg till utgift" on S-4 (or S-5)	S-7 slides up: amount focused, keypad up, all defaults set (Konto per AC-8.6 or the S-5 account; category = the step-4 default of CS-5; Datum "Idag"; Betalt av "Du"; Delning "Kontots standard …"). "Spara" disabled
2	Types 4 1 2 on the keypad	"412" in the amount; preview computed; "Spara" still disabled (no description)
3	Taps "Beskrivning", types "Systembolaget"	keypad slides out, the Swedish system keyboard in; on every change the suggestion re-runs (§5.3) and the quick row selects Nöje; "Spara" enabled
4	Taps "Spara" (app bar) or the keyboard's Done	save → Saved; the editor closes; S-4 shows "Utgiften sparades" (offline: "Sparad. Synkas när du är online."); balances already include it (AC-10.4); sync after 2 s (AC-15.3)

One tap each, never more, for the common overrides from step 3 on: payer (tap "Betalt av" toggles), category (tap a tile), split (tap "Delning" opens the section; one more tap picks a mode). Nothing else needs touching.

5.2 Keypad and keyboard

• The keypad (§3.7) owns the amount, the exact-share field and the ratio percent fields; the system keyboard owns the description and the notes. Only one of the two is visible.
• Focus order: amount → description → (notes when expanded). Tapping the description while the keypad is up swaps keypad for keyboard in one motion (keypad slides down 150 ms while the IME animates in; the content keeps the description visible above the IME with imePadding).
• Tapping outside any field hides both.
• The keypad never inserts invalid input (§9.6); the amount needs no separate validation message for format, only for "required" and the range.

5.3 Category suggestion (UX-3, CS-1 … CS-7)

• Scope (CS-1): new expenses only. In edit mode (S-7-editor-edit, S-7-editor-full) the saved category stays and nothing is suggested.
• Manual flag (CS-2): categoryPickedByHand = false on open. Tapping any tile in CategoryQuickRow or CategoryGridSheet sets it true, also when the tile was already selected. It is never reset in this editor session.
• Runs (CS-3) while the flag is false, on every description change and every account change, by calling ExpenseRepository.suggestCategory(accountId, description) (UX-3; local, no network); debounce 150 ms so typing stays smooth. A non-null result becomes the selected category; null (no suggestion possible) leaves the step-4 default (CS-5 step 4; for an empty description, CS-7).
• Order (CS-5): history exact → history first token → keyword table → default; "most often", ties by most recent. The UI does not know which step answered.
• What the user sees (CS-7): the Kategori selection simply moves to the suggested tile (container → solid cross-fade and check badge, §2.11); no caption, no marker, no snackbar. If the suggested category is not among the five tiles it takes the fifth place (§3.7). TalkBack does not announce suggestion changes (no live region); the selected tile reads "vald" when focused.
• Clearing the description returns the selection to the step-4 default (CS-7).
• A wrong guess costs one tap: the right tile, or "Alla" and the right category.

5.4 Split override

• Closed state: the "Delning" chip shows the current mode and ratio ("Delning Kontots standard 60/40"); SplitPreview under the chips shows the shares.
• One tap on the chip opens SplitSection in place (spatial default spring) and scrolls it into view; the chip turns secondary-container with expand_less; the keypad switches to its compact height when a keypad field in the section gets focus.
• Picking a mode is one tap; "Allt på en person" then needs the bearer (one tap; default the partner when the viewer pays, else the viewer — the person who did not pay is the usual reason for "all on one"); "Egen fördelning" starts at the account's ratio; "Exakta belopp" starts with the viewer's field empty and focused.
• Closing the section keeps the chosen mode. Changing the account in mode default re-copies its ratio (AC-8.8); in other modes the split is kept.
• The preview is always ExpenseRepository.preview(draft); when it returns null the preview hides and "Spara" is disabled.

5.5 Edit mode

Same editor with "Ändra utgift", fields loaded from load(id), nothing focused and the keypad hidden (S-7-editor-edit); tapping the amount shows the keypad. The split section is open when the mode is not default. Notes are expanded when present. "Ta bort utgift" at the end. Save returns to S-8.

---

6. Open points

1. Quick-row usage data (UX-9). CategoryQuickRow needs ExpenseEditorOptions.frequentCategoryIds (proposed in proposed-decisions.md UX-9: per active account, up to five active categories by use count in that account, ties by sort_order, from the Room copy). Until it lands the row uses the fallback of §3.7.
2. Category deletability (UX-9). S-15-category-editor-custom needs CategoryRepository.deletable(id) (UX-9). Until it lands, "Ta bort kategori" is enabled for custom categories and Failed("category_in_use") shows the in-use reason inline after the tap.
3. Recurring editor suggestion. CS-1 limits the suggestion to new expenses; S-19's editor uses the AC-8.6-style default (last category of the account, else Övrigt) and no suggestion (category-suggestion.md open point 3).
4. System font on One UI. FontFamily.Default may resolve to a One UI font style instead of Roboto; M6 checks on the owner's S26 that amounts stay tabular and weights 500/600/700 are distinct (D-020 stands either way).
5. Expressive API status. Every Expressive API of §3.1 is checked against the current Material 3 release when M6 pins it; any that is not usable takes its listed fallback without a design change.

Resolved in the U2 alignment pass: the catalogue frames follow this file (payer chip swap_horiz, ratio presets 40/60 · 50/50 · 60/40, allocation remove buttons, S-13 "14 aktiva" without an "Enheter" subtitle and without a device name, S-16 rows "Väntar på synk", S-12 count caption), and every label quoted here has a strings.csv key (including the split-section collapse label, the keypad's "Rensa" action, the S-10 missing state and the category delete confirmation).

Recorded after U2 in SPEC v0.10: open points 1 and 2 are resolved by M12d (D-059 to D-062) and open point 5 by M6 (D-064); English "Dining" for restaurants (D-067, so §2.13 reads "Dining") and ledger_settlement_label, the settlement-title wrap and the empty-chart baseline (see D-068) live in SPEC.md and strings.csv, which win where this file differs.