En enhetlig upplevelse för hyresgäster och hyresvärdar.A consistent experience for tenants and landlords.

Tio auktoriserade färger. Sam Red används sparsamt för primära handlingar. Sam Dark bär texten. Brunskalan ger en lugn, trygg ton—perfekt för kort, ramar och sekundär information.Ten authorised colours. Sam Red is used sparingly for primary actions. Sam Dark carries the text. The brown scale provides a calm, trustworthy tone—perfect for cards, borders and secondary information.

Nuckle är vårt primära typsnitt. Bold för rubriker, Regular för brödtext, Light för småtext. Helvetica reserveras för miljöer där Nuckle inte är tillgängligt (e-post, dokument).

8 px är vår grundenhet. Allt från knappar till sektioner består av multiplar av 8. Layout följer ett 12-kolumnsgrid på desktop, som kollapsar till färre kolumner på mindre skärmar.

Ikoner är uppbyggda på ett 32×32 px grid med 2 px outline, och använder endast Sam Dark eller Sam White. Minsta storlek är 16 px, största rekommenderade 64 px.

Pillformade knappar i tre hierarkier: primär (Sam Red, reserveras för huvudhandling per sektion), sekundär (Sam Dark outline) och ghost. Storlekar S / M / L. Alla tillstånd måste implementeras.

Varje input har label, hint och felmeddelande. Focus ringar med Sam Dark + 12% transparens. Fel markeras tydligt med Sam Error plus text—aldrig bara färg.

Kort följer 12-kolumns-grid och har tre varianter: statisk (information), klickbar (leder någon annanstans) och hover (visar åtgärder). Bostadsannonser använder klickbar-variant med tydligt fokustillstånd.Cards follow the 12-column grid and have three variants: static (information), clickable (leads somewhere else) and hover (shows actions). Rental listings use the clickable variant with a clear focus state.

Topnotice, header och footer. Kopieras verbatim till varje sida så språkväljare, logotyp och navigation beter sig identiskt överallt. Handoff-baren läggs överst på designreview-sidor bara.

Sidebar, tabs, breadcrumbs, pagination och stepper. Används för intern navigering inom ett flöde.Sidebar, tabs, breadcrumbs, pagination and stepper. Used for internal navigation within a flow.

Datatabeller för Dashboard — ansökningar, annonser, transaktioner. Sorterbar, med expanderbara rader.Data tables for Dashboard — applications, listings, transactions. Sortable, with expandable rows.

Modal, confirm dialog, drawer (sida-panel) och bottom sheet. Alltid en primär och en sekundär knapp.Modal, confirm dialog, drawer (side panel) and bottom sheet. Always one primary and one secondary button.

Tomma listor ska kännas varma, inte gåtfulla. Alltid: ikon/illustration, rubrik, kort förklaring, primär CTA. Skeleton = samma layout som färdigt innehåll.Empty lists should feel warm, not mysterious. Always: icon/illustration, heading, brief explanation, primary CTA. Skeleton = same layout as finished content.

BankID-kort i tre states: QR-ruta, väntar på signering, klar. Används vid inloggning, signering av avtal, verifiering och kontoskapande.BankID card in three states: QR code, awaiting signature, complete. Used for login, contract signing, verification and account creation.

Månadskalender med range-selektion, tid-slot-grid, och kompakt date-input. Range: start och slut får --sam-red, mellanliggande dagar --sam-brown-light.

Kartkomponenter för sökresultat och annonssidor. Pin-stil, kluster, infobox, zoom-kontroller.Map components for search results and listing pages. Pin style, clusters, infobox, zoom controls.

Kortvariga meddelanden nere till höger. 5 sek auto-dismiss, stackas uppåt, max 3 synliga.Short-lived notifications in the bottom right. 5s auto-dismiss, stacks upward, max 3 visible.

Profilbilder i 5 storlekar, initialer som fallback, online-status, grupp-stackning och user-chips.Profile pictures in 5 sizes, initials as fallback, online status, group stacking and user chips.

Grid-kortet är standarden. Här är fyra sammanhang där vi avviker: horisontell rad, featured/hero, compact och map-popup.The grid card is the standard. Here are four contexts where we deviate: horizontal row, featured/hero, compact and map popup.

Pris är känsligt — alltid tabulära siffror, tydliga linjer mellan poster, och info-tooltips. Totalsumman ska alltid vara visuellt dominant.Price is sensitive — always tabular numerals, clear lines between items, and info tooltips. The total must always be visually dominant.

Dialog mellan hyresgäst och hyresvärd sker alltid i Samtryggs trådar — aldrig via privat mejl.Dialogue between tenant and landlord always happens in Samtrygg threads — never via private email.

Hyresgäst och hyresvärd betygsätter varandra efter avslutad uthyrning.Tenants and landlords rate each other after a completed rental.

Uppladdning, ordning, lightbox. Hyresvärden måste ha minst 5 bilder för att publicera.Upload, order, lightbox. Landlords must have at least 5 photos to publish.

Fyra tonlägen: success, info, warning, error. Kombinera alltid färg med ikon och text.Four tones: success, info, warning, error. Always combine colour with icon and text. Toast-notifikationer stannar 5 sekunder; kritiska meddelanden kräver manuell stängning.

Rörelse ska vara subtil och meningsbärande. Hela systemet använder samma easing—cubic-bezier(.2, .8, .2, 1)—med durations från 150 ms till 300 ms. Hovra över rutorna nedan för att se beteendet.

Alla komponenter i kontext—hyresgästens sökvy till vänster, hyresvärdens översikt till höger. Båda följer samma grid, typografi och färgprinciper.

Samtrygg följer WCAG 2.1 AA. Alla designbeslut testas mot kontrast, tangentbordsnavigering och skärmläsarkompatibilitet. Ingen information förmedlas enbart genom färg.