Färgpalett

Komplett exempel med varma, blå och gröna toner

Palett

Primary

#6f3d2e

Accent

#e0ebcc

Background

#f8f5f2

Background Alt

#e9e4df

Text

#2b1c16

Border

#d9d9d6

Hover

#b5a38e

Secondary

#4a6274

Secondary Light

#a8c0c6

Secondary Dark

#2f3e4a

Green Light

#b6c49a

Green Medium

#8fa87b

Green Dark

#5f7250

Green Deep

#3d4f36

Exempel på användning

Så här kan färgerna tillämpas i en layout:

Knappar

Kort

Accent Card

Använder accentfärgen #e0ebcc för kontrast.

Secondary Card

Visar hur den blå tonen #4a6274 fungerar.

Green Card

Exempel på naturlig kontrast med #8fa87b.

Kort med transparens

Subtila färgtoner med olika opacitetsnivåer för mjukare utseende.

10% Opacity

Mycket subtil färgton, bg-accent/10

20% Opacity

Lätt färgton, bg-accent/20

30% Opacity

Medium färgton, bg-secondary-light/30

20% Green

Grön färgton, bg-green-medium/20

Knappar med transparens

Info-rutor

Info: Detta är en informationsruta med accentbakgrund.

Meddelande: Secondary-färg för sekundär information.

Framgång: Grön ton för positiva meddelanden.

Info-rutor med transparens

Info: Subtil accentbakgrund med 20% opacitet.

Meddelande: Mjuk secondary-färg med 25% opacitet.

Framgång: Lätt grön ton med 20% opacitet.

Varning: Mycket subtil primary-färg med 10% opacitet.

Textstilar

Standard text i primary färg.

Text i secondary färg.

Text i green-dark färg.

Länk med hover-effekt

Bakgrunder

Background: #f8f5f2

Background Alt: #e9e4df

Overlay med transparens

Exempel på hur transparenta färger kan användas som overlay på bilder eller sektioner.

Gradient Overlay

Kombination av primary och accent med transparens för mjuk gradient-effekt.

from-primary/20 to-accent/20

Secondary Overlay

Lätt secondary-färg som overlay för sekundär information.

bg-secondary/15

Badges/Taggar med transparens

Primary Tag Secondary Tag Green Tag Accent Tag Hover Tag

Typsnitt för trycksaker

Följande typsnitt rekommenderas för trycksaker och matchar webbplatsens stil:

Systemtypsnitt (nuvarande på webben)

Webbplatsen använder systemets standardtypsnitt, vilket innebär att olika plattformar visar olika typsnitt automatiskt:

macOS/iOS: San Francisco (SF Pro Text/Display)

Windows: Segoe UI

Android: Roboto

Linux: Systemets standard sans-serif (oftast Ubuntu, DejaVu Sans, eller Liberation Sans)

Fallback: sans-serif (systemets generiska sans-serif-typsnitt)

Fördelar: Snabb laddning (inga typsnittsfilerna behöver laddas ner), ser naturligt ut på varje plattform, respekterar användarens systeminställningar för typsnitt.