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
Aksent
Gråskala
Semantisk
Overflater
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
Regular Medium Semibold Bold 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
Størrelser
Med ikon
Filterknapper
Knappgrupper
Kort
Ulike kortkomponenter brukt på nettsiden.
Tjenestekort
Kundehistorie-kort
Anbefaling-kort
M51 har vært en fantastisk partner for oss. Profesjonelle, kreative og alltid tilgjengelige. Resultater utover forventning.
Webinar-kort
AI og digital markedsføring i 2026
Lær hvordan AI endrer spillereglene for norske bedrifter.
Innholdsstrategi som konverterer
Slik bygger du en innholdsstrategi som driver konverteringer.
Glass-effekt
Glass-effekt
Glassmorfisme med backdrop-filter blur og halvgjennomsiktig bakgrunn.
Skjemaelementer
Alle skjemakomponenter med tilstander.
Seksjonskomponenter
Gjenbrukbare seksjonshoder og layout-mønstre.
Sentrert seksjonshode
Hva vi tilbyr
Vi kombinerer strategi, kreativitet og teknologi for å skape målbare resultater.
Seksjonshode med lime-aksent
Siste artikler
Hold deg oppdatert med våre nyeste innlegg om digital markedsføring.
Seksjonshode med knapp
Resultater som teller
Merkelapper og badges
Etiketter, kategoribadges og tilstandsindikatorer.
Hero badge
Kategoribadges
Webinar-badges
Section eyebrow
Skygger og hjørner
Skyggenivåer og border-radius verdier.
Skygger
Border-radius
4px
8px
12px
16px
24px
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
150ms 250ms 400ms 500ms cubic-bezier