✨ Prøv vårt nye system for AI Agenter og markedsføring Les mer →

AI OS Book møte Gratis analyse
Internverktøy

Designsystem

M51s levende stilguide. Alle farger, typografi-stiler, mellomrom, knapper, kort og komponenter samlet på ett sted.

Fargepalett

Alle farger i M51-profilen med CSS-variabelnavn.

Primær

Primary
#FF3B3D
--color-primary
Primary Hover
#E62E30
--color-primary-hover
Primary Light
rgba(255,59,61,0.1)
--color-primary-light

Aksent

Lime
#70AE6E
--color-lime
Lime Lys
#8FC98C
--color-lime-light
Lime Lysere
#B0E4AC
--color-lime-lighter
Teal
#3C6E71
--color-teal
Teal Lys
#5A9EA0
--color-teal-light
Teal Lysere
#7DCFD0
--color-teal-lighter

Gråskala

Gray 900
#0a0a0a
--color-gray-900
Gray 800
#1a1a1a
--color-gray-800
Gray 700
#2d2d2d
--color-gray-700
Gray 600
#4a4a4a
--color-gray-600
Gray 500
#71717a
--color-gray-500
Gray 400
#a1a1aa
--color-gray-400
Gray 300
#d4d4d8
--color-gray-300
Gray 200
#e4e4e7
--color-gray-200
Gray 100
#f4f4f5
--color-gray-100
White
#ffffff
--color-white

Semantisk

Suksess
#70AE6E
--color-success
Advarsel
#F59E0B
--color-warning
Feil
#FF3B3D
--color-error
Info
#3C6E71
--color-info

Overflater

Bakgrunn
#FAFAFA
--color-dark
Bakgrunn sekundær
#F0F0F2
--color-dark-lighter
Kort
#FFFFFF
--color-dark-card
Kantlinje
#E5E5E7
--color-dark-border

Typografi

Urbanist for overskrifter, Nunito Sans for brødtekst.

Overskrifter — Urbanist

Overskrift 1

h1 — clamp(2.5rem, 5vw, 4.5rem) / 700

Overskrift 2

h2 — clamp(2rem, 4vw, 3.5rem) / 700

Overskrift 3

h3 — clamp(1.5rem, 3vw, 2.25rem) / 700

Overskrift 4

h4 — clamp(1.25rem, 2.5vw, 1.75rem) / 700
Overskrift 5
h5 — 1.25rem / 700
Overskrift 6
h6 — 1rem / 700

Brødtekst — Nunito Sans

Lead-tekst brukes for ingresser og fremhevede avsnitt. Den er litt større enn vanlig brødtekst.

.lead — 1.25rem / 300

Vanlig brødtekst brukes for hoveddelen av innholdet. Den har en behagelig linjehøyde for god lesbarhet på alle enheter.

p — 1rem / 400 / linjehøyde 1.7

Liten tekst brukes for sekundær informasjon og fotnoter.

.small — 0.875rem

Bildetekst eller etikett

.caption — 0.75rem / versaler / 0.1em mellomrom

Fontvekter

Urbanist 400 Regular
Urbanist 500 Medium
Urbanist 600 Semibold
Urbanist 700 Bold
Urbanist 800 Extrabold

Mellomromskala

Konsistente mellomrom-tokens brukt gjennom hele designet.

--space-xs
0.25rem (4px)
--space-sm
0.5rem (8px)
--space-md
1rem (16px)
--space-lg
1.5rem (24px)
--space-xl
2rem (32px)
--space-2xl
3rem (48px)
--space-3xl
4rem (64px)
--space-4xl
6rem (96px)
--space-5xl
8rem (128px)

Knapper

Alle knapp-varianter og størrelser.

Varianter

Primary Secondary Lime Ghost Lenke Gradient

Størrelser

Liten Normal Stor Ekstra stor

Med ikon

Kontakt oss Les mer Se alle

Filterknapper

Knappgrupper

Hovedhandling Sekundær

Kort

Ulike kortkomponenter brukt på nettsiden.

Tjenestekort

Kundehistorie-kort

Strategi

Eksempel kundehistorie

Kunde AS
Performance

Nok en kundehistorie

Bedrift AS

Anbefaling-kort

M51 har vært en fantastisk partner for oss. Profesjonelle, kreative og alltid tilgjengelige. Resultater utover forventning.

Ola Nordmann
Daglig leder, Eksempel AS

Webinar-kort

Kommende

AI og digital markedsføring i 2026

Lær hvordan AI endrer spillereglene for norske bedrifter.

15. mars 2026 45 min
Tidligere

Innholdsstrategi som konverterer

Slik bygger du en innholdsstrategi som driver konverteringer.

10. januar 2026

Glass-effekt

Glass-effekt

Glassmorfisme med backdrop-filter blur og halvgjennomsiktig bakgrunn.

Skjemaelementer

Alle skjemakomponenter med tilstander.

Valideringstilstander

Ser bra ut!
Dette feltet er påkrevd

Avkrysning og radioknapper

Hjelpetekst som veileder brukeren med utfylling av skjemaet.

Seksjonskomponenter

Gjenbrukbare seksjonshoder og layout-mønstre.

Sentrert seksjonshode

Tjenester

Hva vi tilbyr

Vi kombinerer strategi, kreativitet og teknologi for å skape målbare resultater.

Seksjonshode med lime-aksent

Innsikt

Siste artikler

Hold deg oppdatert med våre nyeste innlegg om digital markedsføring.

Seksjonshode med knapp

Kundehistorier

Resultater som teller

Se alle

Merkelapper og badges

Etiketter, kategoribadges og tilstandsindikatorer.

Hero badge

Ledig kapasitet

Kategoribadges

Strategi Performance Kreativt Teknologi

Webinar-badges

Kommende Tidligere

Section eyebrow

Standard (rød) Lime-aksent

Skygger og hjørner

Skyggenivåer og border-radius verdier.

Skygger

shadow-sm
0 1px 2px
shadow-md
0 4px 6px
shadow-lg
0 10px 15px
shadow-xl
0 20px 25px
shadow-glow
rød glow

Border-radius

sm
4px
md
8px
lg
12px
xl
16px
2xl
24px
full

Animasjoner

Scroll-animasjoner og overgangseffekter.

Scroll-animasjoner

Scroll ned for å se animasjonene utløses.

Fade Up

data-animate="fade-up"

Fade In

data-animate="fade-in"

Scale In

data-animate="scale-in"

Overgangshastigheter

Fast
150ms
Base
250ms
Slow
400ms
Bounce
500ms cubic-bezier