Ett system.
Inte en samling skärmar.
WTHRS Design DNA är den enda källan till hur produkten ser ut, låter, rör sig och pratar. Om något inte står här, är det inte en del av systemet. Kopiera aldrig ett lokalt undantag. Läs, absorbera, återanvänd.
Filosofi
Redaktionell teknik.
Ett lugnt, redaktionellt gränssnitt runt ett känslomässigt ämne. Vädret pratar högt. WTHRS talar mjukt.
"Vädret pratar högt. WTHRS talar mjukt."
Palettar av papper och bläck. Sora som rubrikstämma, Manrope som läsröst. Rörelse som betyder något. Ingen accent färg för accentens skull. Ett kort per idé.
Aldrig i WTHRS
- Skarpa neonaccenter
- Rundade emoji-appfärger
- Reklam-liknande CTA-blaffor
- Blocklike shadows eller glow-effekter i primärkomponenter
- Uppercase-rop utom mikroeyebrows
Palett
Nordic Dawn.
Fyra grundtoner. Elfenben, sand, lera, valnöt. Aldrig fler. Confidence får sina egna varma nyanser. Allt annat lever inom paletten.
Ivory
Bakgrund#faf8f5
Sand
Ytor#f0ebe3
Clay
Kanter#c9b99a
Walnut
Bläck#8b7355
Typografi
Sora + Manrope.
Sora sätter tonen. Geometrisk, förtroendeingivande, med rätt vikt av mänsklighet. Manrope läses. Jämn färg, öppna former, aldrig trött.
Skala
Display 64/60
Sora · Medium · -0.03em
Rubrik 32/34
Sora · Semibold · -0.02em
Brödtext 15/24. Manrope bär hela läsningen. Rader mellan 55 och 72 tecken. Radhöjd 1.6 för brytpunkter, 1.5 för korta kort.
Manrope · Regular · 0em
Eyebrow 10.5/12 · Semibold · 0.18em
Regler
- Aldrig italic. Vi betonar med vikt eller storlek.
- Aldrig underline utom länkar och story-hover.
- Tabulära siffror på temperaturer och tider.
- Nummer med minusstreck. Aldrig bindestreck.
Rörelsespråk
Betydelse, aldrig dekoration.
Allt som rör sig i WTHRS berättar något: 'nu laddar det', 'nu kom svaret', 'nu är det säkert'. Aldrig 'titta vad fint jag kan animera'.
micro
160ms
Hover, press, focus
ui
260ms
Kort, drawers, dialoger
scene
420ms
Sidbyten, hero entrance
breath
6.2s
Mascotandning, aurora
standard
cubic-bezier(0.22, 0.61, 0.36, 1)
entrance
cubic-bezier(0.16, 1, 0.3, 1)
exit
cubic-bezier(0.7, 0, 0.84, 0)
Fyra motion-lagar
- 01Rörelse betyder alltid något. Aldrig dekoration
- 02Objekt kommer in genom att växa fram (blur → sharp), aldrig genom hopp
- 0360fps eller inget. Transform + opacity, aldrig top/left
- 04Reduce motion respekteras. Vi ersätter med statiska tillstånd, inte försämrade
Mascot
En sfär. En andning.
En mjuk, elfenbensvit sfär. Ansiktslös, tidlös, tyst.
Tillstånd
- idleAndas långsamt (6.2s cykel), ögonlock blinkar var 8:e sek
- searchingLutar sig lätt mot sökfältet, orbital ring accelererar
- resultRätar upp sig, en ljuspuls skickas från mascot → sökfält
- thinkingRingen pulserar i mörkare intervall (confidence räknas)
- nightSfären dämpas, ringen försvinner, andningen halveras
Aldrig
- Aldrig ögon eller mun
- Aldrig hoppa, dansa, vinka
- Aldrig färgad. Bara ivory med subtil skuggning
Illustration
Väderikoner med kroppsspråk.
Mjukt geometriska väderikoner. Inte flat, inte 3D, någonstans mellan.
Sol
Moln
Regn
Snö
Åska
Ikonregler
- Sol = varmt gult (oklch 0.85 0.15 85), aldrig orange
- Moln = ivory med clay-skugga, aldrig blå
- Regn = tunna blåa streck (oklch 0.7 0.12 245), aldrig droppar med ansikte
- Snö = vita flingor mot mörk sky-blur, aldrig kristaller
- Åska = enda accenten som får bryta paletten (electric violet)
Confidence
Säkerhet är en form.
Confidence visas alltid som en ring, aldrig som en siffra ensam. Siffran är stödtext.
Mycket hög
Alla källor eniga inom 1°
Hög
Små avvikelser mellan källor
Medel
Väntad osäkerhet
Låg
Källor drar åt olika håll
Mycket låg
Vi säger till dig. Kolla igen närmare händelsen
Cards
Ett kort per idé.
Alla kort ärver samma DNA: rundade hörn (2rem), 1px clay-border, ivory/glass med backdrop-blur. Ingen tung skugga. Bara en whisper i botten.
Forecast card
14°
Halvklart i eftermiddag
Recommendation card
Filmkväll
Stanna inneRegnet håller i sig. Perfekt ursäkt att bänka sig med något bra.
Samlar HBO, Netflix och Viaplay i en enda app.
CTA
En hierarki, aldrig ett tävlingsläge.
Aldrig två primära CTAs bredvid varandra. Aldrig en CTA som skriker. Handling ska kännas självklar. Inte krävd.
Enda meningsfulla nästa steg på skärmen
Solid walnut, ivory text, subtil skugga, sheen-hover
Alternativ handling, ofta bredvid primary
Ivory bakgrund, clay-border, walnut text
In-content länkar, drawers, mer info
Text-länk med underline-in-hover + slidande pil
Kurerad partner, aldrig ad-liknande
Editorial etikett ('Passar idag'), inbäddad i sitt sammanhang
Tillstånd
Tomt, laddar, lyckat, fel.
Fyra tillstånd som ofta glöms. Här får de samma omsorg som lyckoscenariot.
Loading
Aldrig spinners. Alltid form. Så användaren vet vad som kommer.
Empty
Inga favoriter än. Spara en stad så hittar du hit snabbare.
Aldrig 'inga resultat'. Alltid en väg framåt.
Success
Sparad · Dyker upp under Favoriter
Diskret. En liten pulse eller en confidence-ring som fylls.
Error
Vi når inte SMHI just nu. Prognosen bygger på tre källor istället för fyra.
Ärlig, konkret, aldrig teknisk.
Mikrointeraktioner
Små svar. Stor tydlighet.
Varje handling får en fysisk kvittens. Aldrig via popup. Via själva ytan.
Hover-lift
Y −1px, subtil skugga stiger
Press
Scale 0.98, 90ms in, 200ms ut
Röst & ton
Skriv som en meteorolog.
Väderjournalist på svensk public service. Varm, kunnig, aldrig hypad.
Så här
- Säg 'runt lunch', inte '12:00 till 13:30'
- Säg 'blött ute', inte 'nederbörd 4,2 mm/h'
- Använd konkreta ord: skidor, glass, jacka, paraply
- En mening = en tanke. Aldrig två.
Aldrig
- Aldrig 'AI', 'smart', 'nästa generation' som marknadsföring
- Aldrig utropstecken
- Aldrig versaler utom eyebrows
- Aldrig 'vi tycker', 'vi tror'. Säg vad som är
Så här säger vi
"Blött ute i eftermiddag. Ta paraplyet om du ska ut."
Aldrig så här
"Nederbörd 4,2 mm/h mellan 15:00-18:30. AI-modell rekommenderar paraply."
Ljud (framtid)
När WTHRS får en röst.
När WTHRS får ljud ska det låta som att vika ett tidningsblad.
Ett mjukt papper-vik + andetag från mascoten
Halvt inandat 'tick', som en klocka som startar
En låg vindstöt + subtil bell (D minor 7)
Tre snabba anslag som stiger i tonhöjd = säkerhet
En dämpad basnot. Aldrig chime. Aldrig alert.