UPLAN.se logouPlan
Din digitala underhållsplan

Brandbook

Designsystem och grafisk profil för en modern digital underhållsplanstjänst riktad till bostadsrättsföreningar.

01

Varumärkets essens

Vision

Att göra långsiktig underhållsplanering tillgänglig, begriplig och hanterbar för alla bostadsrättsföreningar – oavsett storlek.

Mission

Vi erbjuder en digital plattform som förenklar och professionaliserar underhållsplanering, budgetering och beslut för framtiden.

Kärnvärden

  • • Trovärdighet
  • • Tillgänglighet
  • • Transparens
  • • Långsiktighet
02

Logotyp

UPLAN.se logouPlan
Din digitala underhållsplan

Logotyp på mörk bakgrund

UPLAN.se logouPlan
Din digitala underhållsplan

Logotyp på ljus bakgrund

Användningsregler

Gör:

  • • Använd på mörk (#1e3a5f - #0f172a) eller vit bakgrund
  • • Håll minst 24px clearspace runt logotypen
  • • Behåll proportionerna vid skalning

Gör inte:

  • • Ändra färger eller proportioner
  • • Placera på mönstrad bakgrund
  • • Rotera eller förvräng logotypen
03

Färgpalett

Primärfärger – Trovärdighet & Professionalitet

Slate Blue

#1e3a5f

Navy 900

#0f172a

Slate 700

#334155

Slate 500

#64748b

Accentfärger – Energi & Handling

Orange Primary

#ef7747

Orange Light

#f99f78

Orange Dark

#ce531c

Red Accent

#ce5652

Neutrala färger – Bas & Bakgrund

White

#ffffff

Slate 50

#f8fafc

Slate 100

#f1f5f9

Slate 200

#e2e8f0

Slate 300

#cbd5e1

Semantiska färger – Feedback & Status

Success

#b7cc8b

Warning

#f5d5a5

Error

#e87575

Info

#587baa

04

Typografi

Geist

Moderna, professionella och lättlästa. Används för all text i varumärket.

ExtraLight 200Light 300Regular 400Medium 500SemiBold 600Bold 700

Display / Hero

56px / -1.4px / 1.1

Heading 1

36px / -0.9px / 1.2

Heading 2

28px / -0.7px / 1.3

Heading 3

20px / 0 / 1.4

Heading 4

18px / 0 / 1.4

Body Large – Används för introduktionstexter och viktiga beskrivningar som behöver synas extra tydligt.

16px / 0 / 1.6

Body – Standard brödtext för beskrivningar, formulärfält och allmän information i gränssnittet.

15px / 0 / 1.6

Body Small – Använd för kompletterande information, hjälptexter och mindre viktiga beskrivningar.

14px / 0 / 1.5

Caption – För labels, metadata och mycket små texter som footnotes.

13px / 0 / 1.5

Fine Print – Använd för juridisk text, copyright och minimal information.

12px / 0 / 1.5

05

UI-komponenter

Knappar

Primary

Secondary

Disabled

Textfält

Kort

Korttitel

Beskrivande text som förklarar innehållet i kortet.

Mörkt kort

Används för highlight-sektioner och speciella områden.

Subtilt kort

Används för sekundärt innehåll och bakgrundsinformation.

Badges & Status

GodkändVäntandeFörfallenPlaneradPrioritetArkiverad

Notifikationer & Alerts

Ändringar sparade

Din underhållsplan har uppdaterats.

Obs! Kommande underhåll

3 åtgärder planerade inom 6 månader.

Tips

Exportera din plan för att dela med styrelsen.

06

Ikonografi

Lucide Icons

Vi använder Lucide Icons för alla ikoner i gränssnittet. Konsekvent stil med 2px stroke-width.

Calendar
Trending
Users
Shield
Clock
Mail
Arrow
Check

Färganvändning:

Orange (#ff7b47) – Primär handling
Neutral (#64748b) – Standard
Light (#94a3b8) – Sekundär
07

Spacing & Layout

8px Grid System

All spacing baseras på 8px-multiplar för konsekvent och harmonisk layout.

4pxMinimal gap mellan relaterade element
8pxStandard gap i komponenter
16pxPadding i mindre komponenter
24pxStandard padding och margins
32pxStörre gaps mellan sektioner
48pxStörre padding i containers
64pxExtra stort spacing mellan sektioner

Border Radius

Small – 8px

Medium – 12px

Large – 16px

Full – Pills/Badges

08

Bildspråk

Gör

  • Använd bilder av svenska bostadsområden och lägenheter
  • Visa moderna, välskötta fastigheter
  • Använd naturligt ljus och nordisk estetik
  • Behåll professionell och trovärdig ton

Undvik

  • Stockbilder med artificiell känsla
  • Överexponerade eller för mörka bilder
  • Bilder från andra länder än Norden
  • Förfallna eller ovanligt exklusiva fastigheter

Bildkällor: Unsplash med söktermer som "scandinavian apartment building", "modern swedish housing", "nordic architecture"

09

Ton & Röst

Vi är

  • • Professionella och trovärdiga
  • • Tydliga och pedagogiska
  • • Hjälpsamma och tillgängliga
  • • Långsiktiga och ansvarsfulla

Vi är inte

  • • Överdrivet informella eller flummiga
  • • Tekniskt komplexa utan förklaring
  • • Säljande eller aggressiva
  • • Oseriösa eller lättviktiga

Textexempel

✓ Bra

"Skapa din underhållsplan på minuter"

"Planera smart, undvik oväntade kostnader och spara pengar åt föreningen."

✗ Undvik

"Revolutionera din BRF nu! 🚀"

"Superkul och mega-enkelt verktyg för alla!"

✓ Bra

"30-årig prognos med kostnadsöversikt"

"Se långsiktig ekonomi och planera åtgärder i god tid."

✗ Undvik

"AI-driven quantum forecasting engine"

"Levererar prediktiv analytics med machine learning."

10

Användningsexempel

Hero-sektion

Din digitala underhållsplan

Planera smart, undvik oväntade kostnader och spara pengar åt föreningen. Allt samlat på ett ställe – enkelt, tryggt och uppdaterat.

Feature-kort

Skapa din plan på minuter

Importera befintlig plan eller börja från mall

Full kontroll på ekonomin

30-årig prognos med kostnadsöversikt och budgetplanering

Samarbeta smidigt

Dela åtkomst med styrelse och förvaltare

Call-to-action

Redo att komma igång?

Bli en av de första att testa plattformen. Gratis att testa, ingen bindningstid.

UPLAN.se logouPlan
Din digitala underhållsplan

© 2025 BRF Underhållsplan. Brandbook version 1.0