Vecka 43
Mina uppgifter
Exempelvy. Den riktiga komponentkoden finns i designsystemet.
Det här är wWorks brand book. Den beskriver hur sviten och dess appar ser ut och låter, och den är sanningen. Om en app avviker är det appen som ska ändras.
01 · Familjen
Ingen app har en egen färg. Det enda som skiljer apparna åt är märket och namnet, och det är därför familjen håller ihop. Alla logotyper nedan kommer direkt från logobiblioteket.
veritas.wwork.appnumeris.wwork.appagenda.wwork.apppactum.wwork.appnotarius.wwork.appconsilium.wwork.appmercator.wwork.appsignum.wwork.apphumanis.wwork.appannura.wwork.appcapital.wwork.app—02 · Arkitektur
| Nivå | Namn | Syns som |
|---|---|---|
| Koncern | Westhill Companies LLC | Ägare och högsta Westhill-instans. Sidfot "© Westhill Companies LLC", juridisk text, e-postsignatur |
| Svit | wWork · wwork.app | Portal, inloggning, app-växlare |
| App | Veritas, Numeris … · <app>.wwork.app | Appens märke och namn i sidomenyn och i fliken |
| Tjänst | wWork Data · data.wwork.app | Inget eget märke. Visas som wWork + funktion |
wwork.app.<App> — <funktion>, till exempel "Notarius — Mötesanteckningar".03 · Konstruktion
Varje märke är 78 enheter högt och har 11–15 enheters streck och raka snitt utan kurvor. Varje märke har dessutom en avsiktlig öppning eller förskjutning, och det är den som gör bokstaven till appens egen. wWork är Veritas V gånger två, med en gemensam topp.
Frizon och minsta storlek
Gör aldrig
04 · Varianter
Alla appar har samma uppsättning filer i logobiblioteket (Corporate Assets/01_Logos/wWork/NN_App/). Här visas de med Veritas som exempel.
stacked · inloggning, laddning, omslaglockup-onDark · vitt med punkten i #68768Cstacked-onDark · på brand-ink eller sidomenyDen horisontella lockup är standardvarianten (se Familjen). mark-white används på foto, och mark-accent (orange) används bara på omslag och i kampanjer. PNG-filer finns i 1x, 2x, 3x och 2400 px, och web/ innehåller exakt de filer som används live i Lovable.
05 · Appikoner
Plattan är #1D2635 med radien 22,37 %. Märket centreras och får högst 46 % av höjden och 66 % av bredden. Faviconen har radien 16 % och finns i en compact-variant med kraftigare streck för 16–24 px. Theme-color är #1D2635 i alla appar.
06 · Färg
Varumärkesfärgerna kommer från logotyperna. Gränssnittets färger är de suite-tokens som apparna redan använder, med samma namn som shadcn-variablerna. Swatcharna följer sidans tema.
Orange är en markör. I gränssnittet används den bara som den aktiva radens stapel i sidomenyn och som app-växlarens understrykning. Den används aldrig som knappfyllnad, text eller fokusring, eftersom den bara når 3,0:1 mot ljus botten.
07 · Typografi
Apparna använder SF Pro på Apple-enheter och Inter som reserv. Siffror och koder sätts i JetBrains Mono. Ordmärkena i logotyperna är konturer och påverkas inte av typsnittet. Använd högst tre vikter: 400, 500 och 600.
08 · Gränssnitt
Sidomenyn är 256 px bred och mörk i båda temana, med märke och appnamn överst och app-växlaren längst ned. Innehållskolumnen ligger på background, med kort i 8 px radie, knappar och fält i 6 px och tabeller med 1 px linjer.
Vecka 43
Mina uppgifter
Exempelvy. Den riktiga komponentkoden finns i designsystemet.
primary). En primärknapp per vy.Alla appar loggar in på samma sätt. Standard är engångskod via e-post, och lösenord och Google finns som alternativ. Capital är referensen.
09 · Språk
wWork skrivs som en erfaren ekonomichef pratar: du-tilltal, verb på knappar och inga emojis eller utropstecken. Felmeddelanden säger vad som gick fel och hur det rättas.
BokförKnapp: ett verb i infinitiv utan punkt
Debet och kredit skiljer sig med 240,00 kr. Justera beloppet på rad 3.Fel: orsak och åtgärd, utan ursäkt
Inga avtal ännu. Ladda upp ett PDF-avtal eller importera från Signum.Tomt tillstånd: vad som kommer och hur man börjar
2026-10-22 · 1 482 900,00 kr · 8,4 % · −2,1 %Format: ISO-datum, svenska tal och riktigt minustecken
10 · Efterlevnad
De flesta appar följer redan boken. Det här är vad som återstår. Hela åtgärdslistan finns i designsystemets avsnitt Efterlevnad.
| App | Tokens | Mörkt | Sidomeny | Orange | Att göra |
|---|---|---|---|---|---|
| wWork | egna | saknas | — | — | Hanken Grotesk → systemfont, radie 12 → 8 px, mörkt tema |
| Veritas | ok | ok | ok | #FA6000 | Orange → #F16422, ta bort Noto Serif |
| Numeris | ok | ok | accent | #FA6000 | Orange → #F16422 |
| Agenda | ok | ok | accent | accent/ring | Neutral accent, bläck-ring |
| Pactum | ok | ok | ok | accent/ring | Neutral accent, ta bort Space Grotesk |
| Notarius | ok | saknas | vit | ring | Mörk sidomeny, mörkt tema |
| Consilium | ok | ok | ok | accent/ring | Neutral accent, bläck-ring |
| Mercator | HSL v3 | ok | ok | #FA6000 | Migrera till Tailwind v4/OKLCH, ta bort gradient |
| Signum | ok | ok | accent | accent/ring | Neutral accent, ta bort svarta hover-ytor |
| Humanis | ok | ok | accent | #FA6000 | Orange → #F16422, radie via token |
| Annura | ok | egna | ok | ok | Mörka värden enligt Färg, tankstreck i titel |
| Capital | ok | ok | ok | ok | Åtgärdad 2026-10-24. Kvar: chart-6–10 (appundantag), publicering |
| wWork Data | egna | saknas | vit | — | Suite-tokens, mörk sidomeny, SVG-favicon |