Hoppa till innehållet
Inställningar:

Granskning mot Rams

Varje komponent gången igenom mot Dieter Rams tio principer, som AGENTS.md läser dem: varje märke har ett skäl, inget ser ut som en kontroll utan att vara det, en betoning per vy, och så lite formgivning som möjligt. Avläst ur CSS:en och hjälpkoden 13 oktober 2026. Fyra förslag är införda i komponenterna och visas som Förut och Nu; resten är förslag.

Behov: Standarder säger Delvis om formgivning och att varje del ska gås igenom. Det här är genomgången, så att Delvis kan bli Följs en ändring i taget.

Sammanfattning

Komponenter33
Följer12
Delvis20
Bryter1
Fynd65
Infört4

Infört

Valda förslag. Infört betyder ändrat i komponenten; varje rad leder till jämförelsen Förut och Nu.

FörslagÄndringVarLäge
Siffror som inte är högerställdaVärmeceller och värmekartans rubriker högerställs, markdown-kolumner med ---: likasåtable.css, heatmap.css, prose.cssInfört
Knapp: två kanterPrimär- och faraknappen har bara underkantenbutton.cssInfört
Statuspill i accentfärgtone=accent ritas som infopill.css, StatusPill.astroInfört
Notisens rubrikRubriken är halvfetnotice.cssInfört
Knapp: markeradYtan står kvar; knappen ska säga vad, Semester 8 hTid: frånvaroknappenÄndrat förslag

Genomgående

Det som kom upp i många komponenter. Till vänster komponenten som den är, till höger som granskningen föreslår. Det som är infört visar Förut och Nu.

Två avskiljare för en gräns

Så lite formgivning som möjligt
Nu

Faktura 1042

Region Skåne, september.

Förslag

Faktura 1042

Region Skåne, september.

Panelfoten har både hårlinje och nedsänkt yta. Hårlinjen räcker. Gäller: panelfot, dialogfot, summeringsrad, kodblock, inline-info, sidofält, gruppram i segmented, primärknapp.

Avstängt med opacitet

Grundlig
Nu
Förslag

Opacitet sänker texten under kontrastkravet. En svagare bläckfärg säger avstängt och går att läsa. Gäller: knapp, menyval, sidnumrering, segmented.

Siffror som inte är högerställda

BegripligInfört
Förut
DagFmEmKväll
Mån481 2407
Tis11213022
Nu
DagFmEmKväll
Mån481 2407
Tis11213022

Värmecellerna centrerade sina siffror. Högerställda läses de som en kolumn, som i alla andra tabeller. Gäller: värmekarta och dess rubriker, värmeceller i tabell, markdown-tabeller med ---:, data-align=center (nu bara för märken och kontroller).

Effekter som dateras

Hållbar
Nu
Förslag

Inloggningen har en gradient bakom ett kort med dialogskugga, och laddningsrutan skimrar. Plana ytor, och ett kort som inte svävar. Gäller: inloggningens bakgrund, skeleton-skimret, trädkartans färgrand.

Det som bara syns vid hover

Grundlig
Nu

Vilka enheter används? #

Förslag

Vilka enheter används? #

Ankaret till ett avsnitt syns bara under pekaren, så aldrig på en pekskärm. Synligt hela tiden, dämpat. Gäller: avsnittsankare, Visa tabell i diagram, kort som är länkar.

Markeringar som försvinner i högkontrast syns inte i en vanlig webbläsare. De gäller din egen sida i sidhuvudet, aria-current=true i menyn och avstängda steg i period, och rättas med en regel för forced colors per markering.

Per komponent

Det som syns, komponent för komponent.

Knapp: två kanter

Så lite formgivning som möjligtInfört
Förut
Nu

Primär- och faraknappen hade både en mörkare ram och en mörkare underkant. En räcker: underkanten, och fyllnaden går ut till kanten.

Knapp: markerad

Begriplig
Nu
Förslag

btn--marked säger med grönt att något är ifyllt bakom knappen, men inte vad. Behåll ytan och säg det i knappen: Semester 8 h.

Nyckeltal: enhet och förändring

Ärlig
Nu
Nedlagt412,5 h↑ 12 %
Förslag
Nedlagt, timmar412,5
Mot förra månaden+12 %

Enheten står efter siffran och förändringen som en lös rad. Enheten i etiketten, förändringen som ett eget kort.

Jämförelse: två betoningar

Diskret
Nu
  • Besök:11 90212 480+4,9 %
  • Sidvisningar:40 21038 004−5,5 %
Förslag
  • Besök:11 90212 480+4,9 %
  • Sidvisningar:40 21038 004−5,5 %

Både det nya värdet och förändringen betonas. Låt förändringen bära raden.

Fynd: allvarligheten tre gånger

Så lite formgivning som möjligt
Nu
NotabelBygglov tappar 60 procent av sina besök

/bygglov hade 1 337 besök i september mot 3 350 i augusti.

Att göra: kontrollera att e-tjänsten mäts.
Förslag
NotabelBygglov tappar 60 procent av sina besök

/bygglov hade 1 337 besök i september mot 3 350 i augusti.

Att göra: kontrollera att e-tjänsten mäts.

Färgkant, ram och pill säger samma sak, och Att göra får en egen kant. Färgkanten och pillen räcker.

Tagg som ser ut som ett filter

Ärlig
Nu
SupportSaaSVäntar på kund
Förslag
SupportSaaSVäntar på kund

En passiv tagg har ram och yta och ser ut att gå att ta bort. Bara ordet, och chipformen för det som är ett aktivt filter.

Statuspill i accentfärg

DiskretInfört
Förut
Pågår
Nu
Pågår

Accenten är vyns enda betoning, primärknappens. tone=accent ritas nu som info och finns kvar bara för det som redan är skrivet.

Segmentväljare: två ramar

Så lite formgivning som möjligt
Nu
Förslag

Gruppen har en ram och det valda segmentet en till. Det valda segmentets kant räcker.

Verktygsrad: intryckt i accent

Diskret
Nu
Förslag

En intryckt knapp får accentyta, men ett val är ett grått steg, som i segmentväljaren.

Kodblock med ram

Så lite formgivning som möjligt
Nu
bun run check
Förslag
bun run check

Det mörka blocket har en ram fast ytan redan avgränsar det.

Notisens rubrik

BegripligInfört
Förut

Perioden är stängd

Ändringar i september kräver en upplåsning.

Nu

Perioden är stängd

Ändringar i september kräver en upplåsning.

Rubriken hade samma storlek och vikt som texten och syntes inte som rubrik. Nu halvfet.

Alla fynd

Hela listan, också det som inte syns i en bild: skärmläsare, högkontrast, kod. Siffrorna inom parentes är rader i komponentens CSS-fil.

KomponentBedömningFynd och förslag
app-shell
app-shell.css		Delvis
  • Grundlig. Ringen som visar din egen sida är en skugga och försvinner i högkontrastläge (113–115). Förslag: Lägg till outline i Highlight under forced-colors.
  • Så lite formgivning som möjligt. Sidofältet har både egen yta och kant mot sidan (136–137). Förslag: Behåll kanten eller tonskillnaden, inte båda.
avatar och stat
avatar.css		Delvis
  • Ärlig. ws-stat__unit sätter enheten efter siffran (109–113), men enheten ska sägas en gång, i etiketten. Förslag: Ta bort __unit och lägg enheten i etiketten.
  • Ärlig. ws-stat__delta gör en förändring till en lös rad under siffran (122–133). Förslag: Visa förändringen som ett eget kort i raden.
  • Så lite formgivning som möjligt. ws-stat--end gör det som ws-stat redan gör (153–156). Förslag: Ta bort modifieraren.
bar-line
bar-line.css		FöljerInget att ändra.
button
button.css		Delvis
  • Infört Så lite formgivning som möjligt. Primär- och faraknappen har både mörkare ram och mörkare underkant (78–80, 142–144). Förslag: Behåll en av dem.
  • Begriplig. btn--marked säger med grön ton att knappen håller något. Grönt läses som lyckat, och betydelsen kräver förklaring (172–180). Förslag: Säg det i knappen, med ett värde, och behåll ytan: Semester 8 h på den gröna tonen.
  • Grundlig. Avstängd knapp med opacity 0,55 (228) ger för låg kontrast. Förslag: Se Avstängt med opacitet.
change
change.css		Delvis
  • Diskret. Både nya värdet (halvfett) och förändringen betonas på samma rad (112–119). Förslag: Låt förändringen bära raden, ta bort halvfetan på __to.
  • Så lite formgivning som möjligt. Textstorleken sätts två gånger (32, 106–108). Förslag: Ta bort den andra regeln.
chart
chart.css		Följer
  • Ärlig. Visa tabell är dämpad text som bara stryks under vid hover (168–181). Förslag: Visa pilen eller understrykningen hela tiden.
  • Så lite formgivning som möjligt. Rundning på förklaringens 10 px-ruta och 2 px-linje (121, 127) syns inte. Förslag: Ta bort den.
code
code.css		Följer
  • Så lite formgivning som möjligt. Det mörka blocket har en ram fast ytan redan avgränsar det (12). Förslag: Ram bara på --light.
combobox
combobox.css		Delvis
  • Diskret. Accentfärgen betyder tre saker i samma lista: aktiv, vald och din egen (119–159). Förslag: Gör din egen neutral, eller sortera dem under en rubrik Dina.
  • Begriplig. Strecket för data-mine säger inte vad det betyder (147–159). Förslag: En grupprubrik (__group finns) i stället för strecket.
  • Så lite formgivning som möjligt. Fokus ritas med yttre skugga, fel med inre (40–46). Förslag: Samma teknik för båda.
day-split
day-split.css		Följer
  • Så lite formgivning som möjligt. Stapeln är rundad (34) medan raderna bredvid medvetet är fyrkantiga (154). Förslag: Samma form för stapel och rader.
  • Diskret. Procentpillerna på varje del blir mycket brus i en full dag (53–64). Förslag: Pröva procent bara på delen i fokus, eller bara i raden.
document
document.css		Delvis
  • Så lite formgivning som möjligt. Ringen i huvudet förstoras för att ge en blickpunkt (57–61), och döljs ändå på smal skärm (88). Förslag: Ta bort ringen eller gör den lika stor som resten.
  • Diskret. Stor titel, ingress i --text-xl och elementet: två–tre saker drar blicken (37). Förslag: Låt titeln vara ensam, ingressen i --text-lg.
feedback
feedback.css		Delvis
  • Hållbar. Skeleton-rutan skimrar med en gradient (170–178). Förslag: Grå ruta, högst en långsam opacitetspuls.
  • Så lite formgivning som möjligt. Fyra sätt att visa laddning, och loadern med märket är varumärke snarare än information (50–123). Förslag: Spinner, laddningslinje och skeleton. Loadern bara för en hel sida, eller inte alls.
  • Ärlig. ws-meter--over betyder två olika saker beroende på --budget (266, 293). Förslag: Byt namn på budgetvarianten, till exempel --overrun.
field
field.css		Följer
  • Så lite formgivning som möjligt. Överskriden teckengräns ger ram, inre skugga och felkant (81–84). Förslag: Ram och felkant räcker, ta bort skuggan.
finding
finding.css		Delvis
  • Så lite formgivning som möjligt. Allvarlighetsgraden sägs tre gånger: färgkant, ram och yta, och pill (14–17). Förslag: Behåll färgkanten och pillen, ta bort ram och rundning.
  • Diskret. Att göra får en egen accentkant bredvid allvarlighetskanten (60–64). Förslag: Markera Att göra bara med rubriken.
heatmap
heatmap.css		Delvis
  • Infört Begriplig. Värdena i cellerna är centrerade (20), inte högerställda. Förslag: Se Siffror som inte är högerställda.
  • Grundlig. Elva nyanser, fler än ögat skiljer (24–33). Förslag: Fem–sex steg, tydliga i båda teman.
heatmap-tone
heatmap-tone.css		FöljerInget att ändra.
icon
icon.css		Följer
  • Begriplig. @keyframes ws-spin ligger här men används också av spinnern i feedback (37). Förslag: Flytta rörelserna till en gemensam fil.
login
login.css		Bryter
  • Hållbar. Bakgrunden är en gradient (19–23), och kommentaren säger något annat. Förslag: Plan --color-canvas.
  • Så lite formgivning som möjligt. Kortet har ram, extra stor rundning och dialogens skugga, fast det inte svävar (39–42). Förslag: Ram och panelens rundning, ingen skugga.
logo
logo.css		FöljerInget att ändra.
nav
nav.css		Delvis
  • Begriplig. Här är du visas på tre sätt: understrykning, tonad yta och hel färg (30–74). Förslag: En markering per läge.
  • Grundlig. Forced colors täcker aria-current=page men inte true (79). Förslag: Ta med [aria-current=true].
  • Ärlig. Kommentaren säger att --active fyller med accent, koden stryker under (1–2). Förslag: Rätta kommentaren.
notice
notice.css		Följer
  • Infört Begriplig. Rubriken har samma storlek och vikt som texten (43–45). Förslag: Halvfet, eller ingen rubrik.
overlay
overlay.css		Delvis
  • Så lite formgivning som möjligt. Dialogens fot har hårlinje och nedsänkt yta (149–150). Förslag: Se Två avskiljare för en gräns.
  • Så lite formgivning som möjligt. Tooltippen är redan mörk men har popover-skugga (313). Förslag: Ta bort skuggan.
  • Grundlig. Avstängt menyval med opacity 0,5 (250–253). Förslag: Se Avstängt med opacitet.
pagination
pagination.css		Delvis
  • Ärlig. Ellipsen ska inte läsas upp enligt kommentaren (61), men hjälpen skriver den utan aria-hidden (pagination.js:10). Förslag: aria-hidden="true" på ellipsen.
  • Grundlig. Sidnumren radbryts inte och blir bredare än en mobil (20–24). Förslag: flex-wrap, eller färre nummer i smala lägen.
panel
panel.css		Delvis
  • Så lite formgivning som möjligt. Panelfoten har hårlinje och nedsänkt yta (134–135). Förslag: Se Två avskiljare för en gräns.
  • Ärlig. ws-card är en länk men ser ut som en panel tills man hovrar (190–207). Förslag: Ett synligt tecken: en pil eller en rubrik som ser ut som en länk.
period
period.css		Följer
  • Grundlig. Dagremsan klipper veckodagarna vid 320 px (25–35). Förslag: Kortare namn eller rullbar under 24 rem.
  • Grundlig. Avstängt steg ser aktivt ut i högkontrast (160–197). Förslag: GrayText under forced-colors.
pill och tag
pill.css		Delvis
  • Ärlig. En vanlig ws-tag har ram, rundning och yta och ser ut som ett filterchip, men är bara en etikett (109–111). Förslag: Passiv tagg utan ram; chipformen bara för --on med ta bort.
  • Infört Diskret. ws-status-pill--accent tävlar med vyns enda betoning (43). Förslag: Ta bort den eller låt den bli info.
  • Så lite formgivning som möjligt. __dot är en andra prickmekanism bredvid ::before (61–67). Förslag: Behåll ::before.
prose
prose.css		Delvis
  • Begriplig. Siffror i markdown-tabeller är vänsterställda och proportionella (166–170). Förslag: tabular-nums och högerställda sifferceller.
  • Så lite formgivning som möjligt. Kodblock med ram, yta och rundning (137–139); rundade bilder (152–154). Förslag: Ytan räcker; inga rundade bilder.
rich-text
rich-text.css		FöljerInget att ändra.
section-anchor
section-anchor.css		Delvis
  • Grundlig. Ankaret syns bara vid hover eller fokus (13–18), aldrig på pekskärm. Förslag: Alltid synligt under (hover: none).
  • Diskret. Avsnittet man landat på får en accentram som ligger kvar (27–31). Förslag: Neutral linje, eller bara en kort stund.
segmented
segmented.css		Delvis
  • Ärlig. Flikarna döljer sin rullningslist (94–97), så fler flikar syns inte på smal skärm. Förslag: En tunn rullningslist eller en uttonad kant.
  • Så lite formgivning som möjligt. Gruppens ram och det valda segmentets kant ger två ramar i varandra (20–21, 65). Förslag: Ta bort gruppens ram.
  • Användbar. Avstängd flik går att nå med tangentbordet om den är en länk (155–159). Förslag: aria-disabled och tabindex=-1 i hjälpen.
strip-table
strip-table.css		FöljerInget att ändra.
table
table.css		Delvis
  • Begriplig. Värmeceller och data-align=center centrerar siffror (122, 208). Förslag: Se Siffror som inte är högerställda. Värmecellerna är rättade, data-align=center står kvar.
  • Så lite formgivning som möjligt. Summeringsraden har både 2 px-linje och yta, och kommentaren lovar en dubbellinje som inte ritas (101–103). Förslag: Behåll linjen, rätta kommentaren.
  • Diskret. Radlänken är halvfet och blir accent vid hover, så varje rad blir en betoning (241–252). Förslag: Normal vikt, understrykning vid hover.
  • Grundlig. Tomt läge saknas. Förslag: En dämpad rad över alla kolumner, ws-table__empty.
toolbar
toolbar.css		Delvis
  • Så lite formgivning som möjligt. ws-toolbar-action är en kopia av ghost-knappen, och varningen finns under två namn (47–87). Förslag: Ett alias för ghost-knappen.
  • Diskret. Intryckt knapp får accentyta, fast segmented säger att ett val är ett grått steg (74–77). Förslag: --color-surface-active, som segmented.
  • Begriplig. ws-label-caps är inte versaler; ws-inline-info har ram och yta för en rad (101, 164–166). Förslag: Byt namn med alias; ram eller yta.
tree-diagram
tree-diagram.css		Delvis
  • Så lite formgivning som möjligt. Kartans rutor har färgrand och tonad yta för samma färg (414–423). Förslag: Behåll ytan, ta bort randen.
  • Så lite formgivning som möjligt. ws-tree__count är en kopia av ws-badge (320–331). Förslag: Rendera ws-badge.
  • Begriplig. Nodens värde är vänsterställt, och totalen är en siffra inklistrad i brödsmulan (260–372). Förslag: Högerställt värde; totalen med egen etikett.
  • Diskret. Aktuellt kort får dubbel accentkant (283–286). Förslag: En 1 px-ram.

Nästa steg

Först de genomgående mönstren, eftersom en regel rättar många komponenter. Sedan det som bryter (login), och sist komponent för komponent. Varje ändring körs genom check:contrast, check:a11y och check:layout, och Standarder går till Följs när listan är tom.