En svit, tolv verktyg, ett sätt att se ut.

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.

Version 1.12026-11-03Westhill Companies LLCKälla: wWork Design System

01 · Familjen

Elva appar och en reserverad

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.

VeritasBokföring, fakturering, bokslutveritas.wwork.app
NumerisKoncernrapportering, budget mot utfallnumeris.wwork.app
AgendaUppgifter och projektagenda.wwork.app
PactumAvtalsregisterpactum.wwork.app
NotariusAI-mötesanteckningarnotarius.wwork.app
ConsiliumStyrelseportalconsilium.wwork.app
MercatorCRM och pipelinemercator.wwork.app
SignumDigital signeringsignum.wwork.app
HumanisHR och personalhumanis.wwork.app
AnnuraÅrsredovisning och deklarationannura.wwork.app
CapitalÄgarbok och cap tablecapital.wwork.app
FiscusReserverad, ej lanserad—

02 · Arkitektur

Westhill äger, wWork samlar, apparna gör jobbet

NivåNamnSyns som
KoncernWesthill Companies LLCÄgare och högsta Westhill-instans. Sidfot "© Westhill Companies LLC", juridisk text, e-postsignatur
SvitwWork · wwork.appPortal, inloggning, app-växlare
AppVeritas, Numeris … · <app>.wwork.appAppens märke och namn i sidomenyn och i fliken
TjänstwWork Data · data.wwork.appInget eget märke. Visas som wWork + funktion
  • Namnet skrivs wWork: gement w, versalt W, inget mellanslag. Domänen skrivs wwork.app.
  • Fliktitel: <App> — <funktion>, till exempel "Notarius — Mötesanteckningar".
  • Nya appar får ett latinskt substantiv på 5–9 bokstäver.
  • Inga prefix som "W Veritas" och inga versaler som "VERITAS".
  • Sätt aldrig W-märket bredvid ett appmärke. Skriv i stället "en del av wWork".

03 · Konstruktion

78 enheter, raka snitt, en öppning

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.

W Work
Veritas
Numeris
Agenda
Pactum
Notarius
Consilium
Mercator
Signum
Humanis
Annura
Capital
Fiscus

Frizon och minsta storlek

  • Frizonen är halva märkets höjd på alla sidor.
  • Lockupen får vara minst 20 px hög på skärm och 6 mm i tryck.
  • Märket ensamt får vara minst 16 px. Under 24 px används favicon-compact.

Gör aldrig

  • Rita om, sträck, luta eller rotera ett märke.
  • Sätt appnamnet i text bredvid märket för att få en logotyp.
  • Ta bort punkten efter ordmärket.
  • Använd den orange märkesvarianten i ett gränssnitt eller som favicon.
  • Lägg till gradient, skugga eller kontur.
  • Sätt två märken ihop som "wWork × Veritas".

04 · Varianter

Samma filer för varje app

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, omslag
lockup-onDark · vitt med punkten i #68768C
stacked-onDark · på brand-ink eller sidomeny

Den 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

Vitt märke på bläck

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.

W Work
Veritas
Numeris
Agenda
Pactum
Notarius
Consilium
Mercator
Signum
Humanis
Annura
Capital
favicon · 20 px

06 · Färg

Ett bläck för logotypen, ett för texten, och orange på ett enda ställe

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.

Varumärke

brand-ink#1D2635

Logotypens bläck.

brand-orange#F16422

Westhill-orange.

brand-slate#4B586C

Sekundärt varumärkesbläck: undertexter i tryck och e-post, aldrig i logotypen.

brand-period#9AA6B8 · #68768C

Punkten efter ordmärket (Work.

brand-icon-light#EFF3F8

Ljus platta för appikon-light-varianten (mörkt märke på ljus platta).

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.

Gränssnitt

background#F7F9FA · #070C11

Sidans botten (live: #F7F9FA / #070C11).

card#FFFFFF · #0E141C

Kort, paneler, tabeller, dialoger och popovers på background.

foreground#0D1721 · #E7ECF0

All primär text, på background, card och muted.

muted#EDF1F3 · #161E26

Tysta ytor: tabellhuvud, inaktiva fält, sekundärknapp.

muted-foreground#5B646F · #77818C

Sekundär text, hjälptext, etiketter.

accent#E7ECF0 · #161E26

Hover- och markeringsyta i menyer och listor.

primary#14202D · #E7ECF0

Primärknapp, länkar i UI, fokusring.

border#DBDFE2 · #222A32

Linjer mellan rader, kortkanter, fältkanter (input).

sidebar#0F1923 · #091017

Sidomenyns botten i alla appar (mörk som standard).

sidebar-accentoklch(0.28 0.025 250) · oklch(0.25 0.02 250)

Hover och aktiv rad i sidomenyn.

Status

successoklch(0.55 0.14 152) · oklch(0.70 0.13 152)

Klar, betald, signerad, avstämd.

warningoklch(0.93 0.12 98) · oklch(0.82 0.17 97)

Kräver uppmärksamhet, förfaller snart.

infooklch(0.44 0.18 255) · oklch(0.60 0.16 255)

Information, utkast, pågående.

destructiveoklch(0.577 0.245 27.325) · oklch(0.704 0.191 22.216)

Fel, förfallen, radera/makulera.

Diagram, i ordning

07 · Typografi

Systemfonten, 14 px i gränssnittet

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.

display36/40 · 600
Välkommen till wWork
page-title24/32 · 600
Huvudbok
section-title18/28 · 600
Öppna kundfordringar
stat30/36 · 600
1 482 900
body16/24 · 400
Perioden är avstämd och låst.
ui14/20 · 400
Bokför verifikation
ui-strong14/20 · 500
Ny faktura
caption12/16 · 400
Senast uppdaterad 22 okt 2026
overline11/16 · 500
REDOVISNING
code12/16 · 400
VER-2026-0412 · 1930

08 · Gränssnitt

Samma skal i alla appar

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

Öppna123 förfaller i dag
Klara denna vecka27+6 mot förra veckan
Från Notarius5nya åtgärdspunkter
Ny uppgiftFiltreraKlar

Exempelvy. Den riktiga komponentkoden finns i designsystemet.

  • Primärknappen fylls med bläck (primary). En primärknapp per vy.
  • En status visas alltid med ett ord. Färgen förstärker ordet.
  • Mörkt tema är obligatoriskt och följer systemets inställning.
  • Inga orange knappar och ingen orange hover.
  • Inga gradienter, ingen glöd och inga kort i kort.
  • Inga andra typsnitt och inga hårdkodade hex-värden.

Inloggning

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.

  • Ett centrerat kort, högst 448 px brett. Appens staplade lockup står till vänster och valet Engångskod | Lösenord till höger.
  • Steg 1 är e-post och Skicka kod. Steg 2 är Engångskod (6–8 siffror) och Logga in, med knapparna Skicka ny kod (efter 60 s) och Byt e-post.
  • Under avdelaren "eller" kommer Fortsätt med Google med Googles färgade G.
  • wWork-lockupen står under kortet till vänster. "Glömt lösenord?" står till höger och visas bara i lösenordsläget.
  • Ingen bakgrundsgrafik, inga gradienter och ingen orange.
  • Ingen tom yta när läget byts. Hjälptexten står där lösenordsfältet annars står.
  • Bara inbjudna e-postadresser får åtkomst.

09 · Språk

Saklig, kort, på svenska först

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

Läget i apparna 2026-10-22

De flesta appar följer redan boken. Det här är vad som återstår. Hela åtgärdslistan finns i designsystemets avsnitt Efterlevnad.

AppTokensMörktSidomenyOrangeAtt göra
wWorkegnasaknas——Hanken Grotesk → systemfont, radie 12 → 8 px, mörkt tema
Veritasokokok#FA6000Orange → #F16422, ta bort Noto Serif
Numerisokokaccent#FA6000Orange → #F16422
Agendaokokaccentaccent/ringNeutral accent, bläck-ring
Pactumokokokaccent/ringNeutral accent, ta bort Space Grotesk
NotariusoksaknasvitringMörk sidomeny, mörkt tema
Consiliumokokokaccent/ringNeutral accent, bläck-ring
MercatorHSL v3okok#FA6000Migrera till Tailwind v4/OKLCH, ta bort gradient
Signumokokaccentaccent/ringNeutral accent, ta bort svarta hover-ytor
Humanisokokaccent#FA6000Orange → #F16422, radie via token
AnnuraokegnaokokMörka värden enligt Färg, tankstreck i titel
CapitalokokokokÅtgärdad 2026-10-24. Kvar: chart-6–10 (appundantag), publicering
wWork Dataegnasaknasvit—Suite-tokens, mörk sidomeny, SVG-favicon
wWork Brand Book v1.1Källa: wWork Design SystemLogotyper: Corporate Assets/01_Logos/wWork