Tidya designspråk

Mørk modus er standard, lys følger OS eller data-theme="light". Kontrast er mot --color-bg (mørk / lys). Kilde: tokens.css.

• bg
• surface
• accent-fill
• accent
• text
• label

Avstand

Radius

Kanter

Kanter som markerer et UI-element (input, ghost-knapp, drop-sone) har minst 3:1 (WCAG 1.4.11). Dekorative kanter er unntatt.

Dybde

Flater skilles med --color-surface og kant. Skygge kun på flytende elementer. Native <dialog> og popover ligger i nettleserens top layer, så det trengs ingen z-index-skala.

Bevegelse

Med prefers-reduced-motion: reduce slås alle overganger av.

Ordmerket Tidya med gul prikk (--color-accent-fill). To varianter: mørk logo på lys bakgrunn og lys logo på mørk bakgrunn. Minstehøyde 24 px, frirom minst prikkens diameter på alle sider. Ikke strekk, farge om eller legg på bilder. Filene ligger i brand/.

Vil du ha en logo som bytter selv når modus skifter, bruk .logo med begge bildene. Prøv tema-knappen øverst.

<div class="logo">
	<img class="logo-for-dark" src="brand/logo-mork-bakgrunn.svg" alt="Tidya" height="32">
	<img class="logo-for-light" src="brand/logo-lys-bakgrunn.svg" alt="Tidya" height="32">
</div>

<img src="brand/logo-lys-bakgrunn.svg" alt="Tidya" height="32">   <!-- på lys bakgrunn -->
<img src="brand/logo-mork-bakgrunn.svg" alt="Tidya" height="32">  <!-- på mørk bakgrunn -->

Fav-ikonet er det lille bildet i nettleserfanen, bokmerker og historikk. Her er det bare prikken, fordi hele logoen blir uleselig i 16 px. Tre filer dekker alle enheter. Hver app må lenke til dem i <head>, ellers vises ingen ikon. Denne siden bruker de samme filene, så du ser dem i fanen din nå.

Tidya designspråk

Tidya designspråk

favicon.svgFanen i moderne nettlesere. Skarp i alle størrelser.

favicon.icoFallback for eldre nettlesere og verktøy (16, 32 og 48 px).

apple-touch-icon.pngNår noen legger siden på hjemmeskjermen på iPhone (180 × 180 px, mørk bakgrunn, iOS runder hjørnene).

<link rel="icon" href="brand/favicon.ico" sizes="32x32">
<link rel="icon" href="brand/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="brand/apple-touch-icon.png">

Headeren øverst på denne siden er komponenten. Den er position: fixed, gjennomsiktig i toppen og tåkete med bunnlinje etter scroll. Under 720 px blir menyen en nedtrekksmeny. header.js tar scroll, meny og tema (husker valget i localStorage med nøkkelen i data-theme-key). Prøv den på smal skjerm, og bytt modus med knappen.

Menyen er <a> for sider (aria-current="page" på den aktive) og .link-button for handlinger som skal se ut som lenker. Utenfor menyen er .link-button en vanlig understreket lenke: Logg ut. Ikke bruk btn-* i headeren. Gi første innhold .site-header-offset, siden headeren ikke tar plass i flyten. Bredden er 860 px; sett --site-width på .site-header-inner for bredere sider.

<header class="site-header">
	<div class="site-header-inner">
		<a class="site-brand" href="./">
			<span class="logo">
				<img class="logo-for-dark" src="brand/logo-mork-bakgrunn.svg" alt="Tidya" height="32">
				<img class="logo-for-light" src="brand/logo-lys-bakgrunn.svg" alt="Tidya" height="32">
			</span>
		</a>
		<div class="site-header-actions">
			<nav class="site-nav" id="site-nav" aria-label="Hovedmeny">
				<a href="/kunder" aria-current="page">Kunder</a>
				<a href="/innstillinger">Innstillinger</a>
				<button class="link-button" type="button">Logg ut</button>
			</nav>
			<button class="theme-toggle" type="button" data-theme-toggle data-theme-key="tidya-theme" aria-label="Bytt til lys modus">
				<svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
				<svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z"/></svg>
			</button>
			<button class="site-nav-toggle" type="button" data-nav-toggle aria-label="Åpne meny" aria-expanded="false" aria-controls="site-nav">
				<svg class="icon-menu" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
				<svg class="icon-close" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
			</button>
		</div>
	</div>
</header>
<script src="header.js"></script>

Hvert felt har synlig label, valgfri hint og feilmelding knyttet med aria-describedby. Feil settes med aria-invalid="true", ikke en egen klasse.

<div class="field">
	<label class="label" for="navn">Navn</label>
	<input class="input" id="navn" name="navn" type="text" aria-invalid="true" aria-describedby="navn-feil">
	<p class="field-error" id="navn-feil">Navn må fylles ut.</p>
</div>

Tall høyrejustert med tabular-nums (klassen num). Sorterbare kolonner er vanlige lenker i th med aria-sort. Tom tilstand bruker table-empty. Rammen table-wrap scroller sidelengs på smal skjerm, så den har tabindex="0", role="region" og aria-label (tastaturtilgang). Navnet må være unikt på siden, ikke det samme som seksjonens overskrift.

<div class="table-wrap" tabindex="0" role="region" aria-label="Prosjekter">
	<table class="table">
		<caption class="sr-only">Prosjekter</caption>
		<thead><tr>
			<th scope="col" aria-sort="ascending"><a href="?sort=navn&dir=desc">Navn</a></th>
			<th scope="col" class="num">Beløp</th>
		</tr></thead>
		<tbody>
			<tr><td>Prosjekt A</td><td class="num">1 234,50 kr</td></tr>
		</tbody>
	</table>
</div>

Kortvarianter

Grunnkortet card er flatt og brukes også i skjema. card-accent gir en amber tone og er det som gir variasjon i en gruppe. card-link (på <a>) løfter seg og får skygge, og bare det kortet beveger seg ved hover. card-stat er et nøkkeltall, card-wave legger en bølge nederst, og card-feature er romsligere med card-icon. Overskrifter i kortene er .h3, så editorial gir dem Fraunces.

<div class="card-grid">
	<div class="card card-accent card-feature" data-reveal data-tilt>
		<div class="card-glow"></div>
		<div class="card-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12h4l3-9 4 18 3-9h6"/></svg></div>
		<h3 class="h3">Fremhevet kort</h3>
		<p class="card-body">Amber tone gir variasjon. Bruk det på ett kort i en gruppe.</p>
	</div>
	<div class="card card-feature" data-reveal data-tilt>
		<div class="card-glow"></div>
		<div class="card-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l2.5 2.5"/></svg></div>
		<h3 class="h3">Vanlig kort</h3>
		<p class="card-body">Flatt og rolig. Samme kort brukes i skjema.</p>
	</div>
	<div class="card card-stat card-lift" data-reveal>
		<p class="card-stat-number"><span data-count="96">96</span><span class="card-stat-unit">%</span></p>
		<p class="h3">av totalen</p>
		<p class="card-body">Et tall med enhet og en kort forklaring.</p>
	</div>
</div>
<div class="card-grid">
	<a class="card card-accent card-link card-wave" href="#kort">
		<span class="card-tag">Kategori</span>
		<h3 class="h3">Lenkekort med bølge</h3>
		<p class="card-body">Hele kortet er en lenke. Det løfter seg ved hover, og pilen glir.</p>
		<span class="card-more">Les mer <span class="card-arrow" aria-hidden="true">→</span></span>
	</a>
	<a class="card card-link card-wave" href="#kort">
		<span class="card-tag">For kunder</span>
		<h3 class="h3">Samme uten tone</h3>
		<p class="card-body">Uten <code>card-accent</code>. Alterneringen mellom to kort ligger i den ene klassen.</p>
		<span class="card-more">Les mer <span class="card-arrow" aria-hidden="true">→</span></span>
	</a>
</div>
<!-- section-alt gir flate bak kortene, som snus til --color-bg automatisk -->
<section class="section-alt"><div class="card-grid">…</div></section>
<!-- redaksjonell modus: Fraunces på .h1–.h3, .display og tall i kort -->
<main class="editorial">…</main>

Sitatblokk for å løfte frem en viktig setning.

— Kilde

Status vises med ikon og tekst, ikke farge alene. Tittel er --color-text, brødtekst --color-text-secondary. Fargen ligger på kant og ikon.

Dialog

Native <dialog> med showModal(): fokusfelle, Escape og bakgrunn uten JS-bibliotek. autofocus på den trygge knappen. Escape lukker, og fokus går tilbake til knappen som åpnet den.

<button class="btn-ghost" type="button" onclick="document.getElementById('slett').showModal()">Slett kunde…</button>

<dialog class="dialog" id="slett" aria-labelledby="slett-tittel" aria-describedby="slett-tekst">
	<h2 class="dialog-title" id="slett-tittel">Slett Prosjekt A?</h2>
	<p class="dialog-body" id="slett-tekst">Dette kan ikke angres.</p>
	<form class="dialog-actions" method="dialog">
		<button class="btn-ghost" value="avbryt" autofocus>Avbryt</button>
		<button class="btn-danger" value="slett">Slett</button>
	</form>
</dialog>

Skjema i dialog

Feltene ligger i et form med stack (jevn avstand), dialog-actions nederst og autofocus på første felt. Avbryt har formnovalidate, så den alltid lukker.

<dialog class="dialog" id="ny-kunde" aria-labelledby="ny-kunde-tittel">
	<h2 class="dialog-title" id="ny-kunde-tittel">Ny kunde</h2>
	<form class="stack" method="dialog">
		<div class="field">
			<label class="label" for="navn">Navn</label>
			<input class="input" id="navn" name="navn" type="text" autofocus>
		</div>
		<div class="dialog-actions">
			<button class="btn-ghost" value="avbryt" formnovalidate>Avbryt</button>
			<button class="btn-primary" value="lagre">Legg til kunde</button>
		</div>
	</form>
</dialog>

Komponentene er ren CSS og fungerer rett i server-rendret HTML. Mønstrene holder innholdet tilgjengelig når det byttes ut.

• Validering: serveren returnerer hele skjemaet på nytt med aria-invalid, feilmelding og autofocus på første ugyldige felt, så fokus ikke går tapt.
• Lasting: .spinner i .htmx-indicator. Skjemaet får htmx-request, og submit-knappen blokkeres (hindrer dobbeltinnsending).
• Beskjeder: fast role="status"-region oppdatert med hx-swap-oob="innerHTML:#status". Med "true" byttes elementet og role forsvinner, så skjermlesere leser ikke opp.
• Sortering: bytt hele tabellen, ellers står aria-sort igjen med gammel verdi. Lenken har id og beholder fokus.
• Sletting: server-rendret <dialog>. Fokus havner ellers på body når raden fjernes, så flytt det til en overskrift med tabindex="-1". hx-on er inline JS og krever at CSP tillater det.

Validering og lasting

<form hx-post="/kunder" hx-target="this" hx-swap="outerHTML">
	<!-- Ved feil returnerer serveren hele skjemaet på nytt: aria-invalid, feilmelding
	     (aria-describedby) og autofocus på første ugyldige felt. -->
	<button class="btn-primary" type="submit">Lagre <span class="spinner htmx-indicator" aria-hidden="true"></span></button>
</form>

Beskjeder

<!-- Layout: regionen finnes alltid, med role og aria-live -->
<div id="status" role="status" aria-live="polite"></div>

<!-- Serversvar: bytt INNHOLDET, ikke elementet (ellers mistes role/aria-live) -->
<div hx-swap-oob="innerHTML:#status">
	<div class="alert success"><span class="alert-icon" aria-hidden="true">✓</span><div><p class="alert-title">Lagret</p></div></div>
</div>

Sletting

<!-- I layouten: overskrift som kan få fokus, og plass til dialogen -->
<h1 class="h2" id="tittel" tabindex="-1">Kunder</h1>
<div id="dialog-plass"></div>

<!-- I raden -->
<button class="btn-danger-link" hx-get="/kunder/7/bekreft" hx-target="#dialog-plass" aria-label="Slett Prosjekt A">Slett</button>

<!-- Svaret fra /kunder/7/bekreft -->
<dialog class="dialog" aria-labelledby="t" hx-on::load="this.showModal()" hx-on:close="this.remove()">
	<h2 class="dialog-title" id="t">Slett Prosjekt A?</h2>
	<form class="dialog-actions" method="dialog">
		<button class="btn-ghost" value="avbryt" autofocus>Avbryt</button>
		<button class="btn-danger" type="button" hx-delete="/kunder/7" hx-target="#rad-7" hx-swap="outerHTML"
		        hx-on::after-request="this.closest('dialog').close(); document.getElementById('tittel').focus()">Slett</button>
	</form>
</dialog>

UI-tekst er bokmål, kort og konkret, og tiltaler brukeren med «du». Bruk alltid Intl med nb-NO, aldri håndformatering. Mellomrom i tall og før enheter er hardt mellomrom (U+00A0).

For forsider og markedsføring: sett editorial på main (Fraunces på .h1–.h3 og tall i kort) og bygg med container (innholdsbredde 1160 px, endres med --site-width), section-pad (luft mellom seksjoner), kicker (etikett over overskriften) og lead (ingress). site-footer er bunnlinjen, og grain er den valgfrie teksturen øverst på denne siden (en ekte div, aldri body::after; se iOS-regelen i DESIGN.md).

<main class="editorial">
	<section class="section-pad">
		<div class="container">
			<p class="kicker">Etikett</p>
			<h2 class="h2">En kort og tydelig overskrift over to&nbsp;linjer</h2>
			<p class="lead">Ingress.</p>
		</div>
	</section>
</main>
<footer class="site-footer"><div class="container site-footer-inner">…</div></footer>