Tre fonter med klare roller: Instrument Serif for overskrifter og personlighet, Inter for brødtekst og UI, JetBrains Mono for tekniske elementer.
Instrument Serif — Overskrifter & Display
Display clamp(48px, 8vw, 120px)
Resultater
H1 clamp(40px, 5vw, 68px)
Vi skaper digital vekst
H2 clamp(32px, 3.5vw, 48px)
Tjenester som gir vekst
H3 clamp(24px, 2vw, 32px)
Teknisk SEO & optimalisering
Pull Quote clamp(28px, 3vw, 40px) italic
«M51 har revolusjonert vår digitale tilstedeværelse.»
Caption italic
Foto: Martin Losvik / M51 Marketing
Inter — Brødtekst & UI
Lead / 18px / 1.7
Byrået som hjelper deg å lykkes med vekst gjennom kreativ innholdsproduksjon, annonsering og teknologidrevne løsninger for digital markedsføring.
Body / 16px / 1.7
Vi kombinerer strategi, kreativitet og teknologi for å skape målbare resultater. Vårt team består av spesialister innen SEO, annonsering, innholdsproduksjon og HubSpot-implementering.
Small / 14px
Søkemotoroptimalisering som gir deg organisk vekst og mer trafikk fra Google.
Caption / 12px
Publisert 15. mars 2026 · 5 min lesetid
Label / 14px semi
Book et møte med oss
JetBrains Mono — Kode & Tekniske elementer
Code / 14px
--color-primary: #E85D4A;
Label / 11px upper
// Tjenester
Number Display / 48px
+347%
Metadata / 12px
2026-03-31 · v2.0.0 · 128 komponenter
// 04
Spacing Scale
Konsekvent avstandssystem basert på rem-enheter. Brukes for padding, margin og gap.
--space-xs
0.5rem / 8px
--space-sm
1rem / 16px
--space-md
1.5rem / 24px
--space-lg
2.5rem / 40px
--space-xl
4rem / 64px
--space-2xl
6rem / 96px
--space-3xl
8rem / 128px
// 05
Grid & Layout
Container: 1200px max-width med 24px padding. Fleksible grid-layouts for ulike innholdsbehov.
Container (1200px)
max-width: 1200px · padding: 0 1.5rem
2 kolonner (1fr 1fr)
1fr
1fr
3 kolonner
1fr
1fr
1fr
4 kolonner
1fr
1fr
1fr
1fr
Asymmetrisk (1fr 2fr)
1fr
2fr
Asymmetrisk (2fr 1fr)
2fr
1fr
// 06
Knapper
Interaktive knappekomponenter. Hold musepekeren over for å se hover-effekter live.
Størrelser
Varianter (hover for effekt)
Nye varianter (v2.1)
Spesielle
AlleAnnonseringHubSpotVideo
Disabled
// 07
Kort-komponenter
Alle korttyper brukt på m51.no. Oppdatert til å matche produksjonskomponentene med interaktive gradient-effekter.
Vi hjelper deg å klatre til toppen av Googles søkeresultater med datadrevet SEO-strategi og gjennomføring.
🔎
// 08b
Tjeneste-illustrasjoner
Alle 63 unike hero-illustrasjoner brukt på tjenestesider. Hver illustrasjon er en selvstendig komponent med SVG-grafikk og animasjoner.
Hovedtjenester (13)
mediekjop
google.com
osloskotrend.no
Oslo Skotrender — Vårens beste sko 2026
Utforsk årets største skotrender for vår og sommer. Ekspertanbefalinger og styling-tips.
skotrender.no
Skotrender.no — Alt om sko
Din komplette guide til sko. Nyheter, anmeldelser og trender samlet ett sted.
sportsko.no
Sportsko 2026 — Ny kolleksjon
Se den nye sportsko-kolleksjonen for 2026. Gratis frakt over 499 kr.
seo
konverteringsoptimalisering
hubspot
foto-og-video
strategi
Workflow · Ukentlig optimalisering
Kjører
Datainnsamling
Analyst
Henter ytelsesdata
SEO Audit
SEO
Analyserer synlighet
Annonseoptimalisering
PPC
Justerer bud og målgrupper
Innholdsproduksjon
Creative
Genererer nye annonser
Kvalitetssjekk
Guardian
Verifiserer & godkjenner
Fremdrift3 / 5
ai
nettside
0
kr 1.299Kjøp
kr 899Kjøp
kr 2.499Kjøp
kr 1.799Kjøp
nettbutikk
Hero
Heading
Image
Button
webflow
B
I
Ny artikkel
wordpress
klaviyo
|
Blokkredigering
/blogg/
sanity
Strategi (10)
konkurrentanalyse
markedsanalyse
digital-analyse
kampanje-strategi
inbound-marketing
employer-branding
kanaloptimalisering
helsesjekk
lei-en-markedsforer
konverteringsanalyse
Annonsering / Mediekjøp (12)
google.com
Beste sneakers 2026
AlleBilderShopping
Sponsetsneakershop.no
SneakerShop — Norges største utvalg
Fri frakt over 499 kr. 30 dagers returrett. Ny kolleksjon inne nå.
Sponsetskobutikken.no
Sneakers på tilbud — Opptil 40% rabatt
Merker som Nike, Adidas og New Balance. Kjøp i dag.
skotrender.no
Beste sneakers 2026 — Vår store test
Vi har testet 25 av årets mest populære sneakers og kåret vinnerne.
google-ads
12:34
NordicStyle
Sponset ·
Oppdag vår nye vårkolleksjon. Norsk design, bærekraftige materialer.
nordicstyle.noSe mer
0
0 kommentarer0 delinger
meta-ads
M51 Digital
12 432 følgere · Sponset
Styrk din B2B-markedsføring med datadrevne kampanjer som leverer resultater. La oss vise deg hvordan.
M51 Digital
Mediekjøp som gir vekst
Les mer
0
0 kommentarer
Lik
Kommenter
Del
0
Visninger
0
Klikk
0%
CTR
linkedin-ads
Sponset
@nordicstyleFølg
Ny kolleksjon ute nå! Skandinavisk design møter bærekraft. #nordicstyle #mote
originallyd — NordicStyle
0
0
0
tiktok-ads
youtube.com
Annonse0:05
NordicStyle
Ny vårkolleksjon 2026
Handle nå
Hopp over annonse
0:03 / 0:15
Slik bygger du en digital strategi i 2026
0 visninger· 2 dager siden
youtube-ads
0
Promotertr/norge· u/NordicStyle_NO · 3t
Vi lanserer vårkolleksjonen — skandinavisk design laget for å vare
nordicstyle.no
0 kommentarer
Del
Lagre
reddit-ads
NordicStyle
@nordicstyle_no
Promotert
Klar for våren? Vår nye kolleksjon kombinerer tidløst skandinavisk design med bærekraftige materialer. Oppdag favorittene dine.
nordicstyle.no
Vårkolleksjon 2026 — NordicStyle
0
0
0
0
Annonseanalyse
0
Visninger
0
Klikk
0%
CTR
0 kr
CPC
x-ads
twitch.tv
LIVE
0 seere
NordicGamer
Sponsored stream: NordicStyle merch unboxing
NordicStyle — Vårkolleksjon ute nå
Bruk kode NORDIC20 for 20% rabatt
Besøk
NordicGamer
Just Chatting
Følg
viewer42:den ser bra ut!
nordicfan:link i chatten?
streamlover:NORDIC20 koden funker
twitch-ads
0%
retargeting
Sanntids budgivning
00:00:00
DSP AlphaAktiv
0,00 kr
DSP BetaAktiv
0,00 kr
DSP GammaAktiv
0,00 kr
Vinnende bud: —
0
Auksjoner
0
Vunnet
0 kr
Snitt CPM
0%
Spart
programmatisk-annonsering
utendorsreklame
lokalaviser
SEO (5)
index.html
1<head>
2<title>Beste sko 2026</title>✓
3<metaname="description"/>✓
4<metaproperty="og:title"/>✓
5<linkrel="canonical"/>✓
6<script type="ld+json">✓
7</head>
Validering OK — 5/5 elementer
teknisk-seo
1
mittfirma.no
92
2
konkurrent-a.no
78
3
konkurrent-b.no
61
4
konkurrent-c.no
45
Synlighet+24%
Nøkkelord187
Topp 1034
seo-analyse
April 2026
DA 4238 nkw
Ma
Ti
On
To
Fr
1Blogg
2
3
4SEO
7Video
8
9Blogg
10
11Audit
14
15Guide
16
17Reel
18
12Publiseringer
+18%Organisk trafikk
innholdsstrategi-seo
geo
?
SporsmalHva er de beste skoene for 2026?
AI-svar
De beste skoene i 2026 kombinerer komfort med stil. Eksperter anbefaler merkene Oslo Step og Nordic Run for daglig bruk.
osloskotrend.no
Talesvar aktivt
aeo
Foto & Video (7)
PRODM51 Studios
SCENE01
TAKE03
reklamefilm
REC
00:01:24:08
V1
A1
A2
videoproduksjon
f/2.8|1/250s|ISO 400
foto
LIVE
1 247
Live chat
AnnaFlott kvalitet!
ErikImponerende demo
MiaKan dere vise mer?
JonasSuper stream!
SofieVeldig bra tips
Skriv en melding...
livestream
Webinar Live
Slide 3 / 12
Deltakere48
Kristine M.
Lars T.
Ingrid S.
Olav N.
Hanne K.
Q&A
Flott presentasjon!
Kan du utdype punkt 3?
webinar-produksjon
fotostudio-oslo
byra-pa-tur
AI (4)
Automatiserer...
ai-automasjon
Modul 2 av 3 fullført
ai-kurs
AI-optimaliserer kampanjer...
ai-markedsforing
Strategisk analyse pågår...
ai-strategi
HubSpot & CRM (3)
Pipeline-verdi: 230 000 kr
crm-implementasjon
6 integrasjoner aktive
integrasjoner
Automatisering aktiv
marketing-automation
Innhold & Sosiale Medier (4)
innholdsproduksjon
innholdsmarkedsforing
Organisk rekkevidde +34%
sosiale-medier-organisk
influencer-marketing
Nettside (2)
Bygger design...
webdesign
landingpages
CRO (2)
Variant B vinner med 95% konfidens
ab-testing
sporing-og-maling
Merkevarebygging (1)
Visuell profil
visuell-identitet
// 09
Seksjonsmønstre
Gjentakende layout-mønstre for seksjonsoverskrifter og innholdsblokker.
Section Header (venstrejustert)
// Tjenester
Hva vi kan hjelpe deg med
Vi tilbyr et bredt spekter av digitale tjenester for å drive vekst og synlighet.
Section Header (sentrert)
// Kundehistorier
Resultater som taler for seg
Se hvordan vi har hjulpet norske bedrifter med å vokse digitalt.
Section Header Row (med CTA)
// Innsikt
Siste artikler
About Preview (2-kolonne bilde + tekst)
// Om oss
Teamet bak resultatene
M51 Marketing er et full-service digitalt byrå med hovedkontor i Oslo. Vi er 25 spesialister som brenner for å skape målbare resultater for våre kunder.
// 10
Navigasjon
Glassmorphism-navigasjon, breadcrumbs og filterbar.
Standard input-felter, validering, floating labels og et komplett kontaktskjema.
Standard inputs
Floating Label
Validering
Vennligst oppgi en gyldig e-postadresse.
Checkbox & Radio
Success
✓
Takk for din henvendelse!
Vi tar kontakt innen 24 timer.
Kontaktskjema (komplett)
Asgeir Behrentz
Daglig leder, M51
La oss ta en prat
// 12
Badges & Tags
Statusmerker, kategoribadger og navigasjonspills.
Hero Badge
Norges mest datadrevne byrå Nytt webinar tilgjengelig
Kategori Badge
AnnonseringSEOHubSpotInnholdsproduksjon
Status Badges
Kommende LiveAvsluttet
AI OS Badge
AI OS
Filter Pills (aktiv / inaktiv)
AlleAnnonseringHubSpotVideoSEO
// 13
Footer
Dark footer med gradient accent, fire kolonner, sosiale lenker og copyright.
// 14
Artikkel-typografi
Styling for rikt innhold i artikler og bloggposter.
Hvorfor AI-agenter er fremtiden for digital markedsføring
I en verden der datamengdene øker eksponensielt, er det ikke lenger nok å stole på manuelle prosesser. AI-agenter representerer neste steg i evolusjonen av digital markedsføring — autonome systemer som kan analysere, beslutte og handle på vegne av markedsføreren.
Hva er en AI-agent?
En AI-agent er et programvaresystem som kan utføre oppgaver autonomt basert på definerte mål og tilgjengelig data. Til forskjell fra tradisjonelle verktøy som krever manuell input, kan en agent selvstendig:
Analysere kampanjedata i sanntid og foreslå optimaliseringer
Automatisk justere budsjetter basert på ytelse
Generere og A/B-teste annonsetekster
Identifisere nye målgrupper basert på konverteringsdata
AI-agenter handler ikke om å erstatte markedsførere — de handler om å forsterke menneskelig kreativitet med maskinell presisjon.
Tre steg for å komme i gang
Kartlegg prosessene dine — identifiser repetitive oppgaver som egner seg for automatisering
Start smått — velg en prosess og bygg en agent som mestrer den
Mål og iterer — bruk data til å kontinuerlig forbedre agentens ytelse
Eksempel på et AI-agent dashboard for kampanjeoptimalisering
Ved å implementere AI-agenter kan bedrifter se en betydelig forbedring i både effektivitet og resultater. Våre kunder rapporterer i snitt 40% reduksjon i manuelt arbeid og 25% økt avkastning på annonsekronene sine.
// 15
Animasjoner (Live Demoer)
Interaktive eksempler på scroll-reveal, hover-effekter, clip-reveal og klientslider.
Scroll Reveal
Kortene nedenfor animeres inn når de blir synlige i viewport (IntersectionObserver).
Strategi
Datadrevet strategi som gir retning og resultater.
Kreativitet
Innhold som fanger oppmerksomhet og bygger merkevare.
Teknologi
AI-drevne løsninger som skalerer innsatsen din.
Gradient Orbs (flytende)
Gradient Pulse
Button Hovers
Hold musepekeren over knappene for å se hover-effektene.
Card Hover
// Demo
Hold musepekeren over meg
Se hvordan kortet løfter seg, får en gradient-linje på toppen, skygge øker og border forsvinner.
Clip Reveal
Teksten nedenfor «avdukes» når den scrolles inn i viewport.
Roterende grid-mønster som kan gjenbrukes for partnere, tjenester, kompetanser eller andre lister. Konfigurerbar pool, intervall og batch-størrelse. Her vist med kundenavn.
En gradient-dot som beveger seg langs kanten av et kort via offset-path. Dotten skifter farge gjennom designsystemets fire gradientfarger (Peach, Coral, Lavender, Blue) og har en glow-hale via box-shadow. Synkronisert med en conic-gradient border (12s).
12s orbit / fargeskift / glow-hale
0% Peach
25% Coral
50% Lavender
75% Blue
// 18
Dark Section
Mørk full-bleed seksjon som bryter det lyse designet. Brukes for webinar-highlight og lignende fremhevede innhold.
// Kommende
Webinar
Hvordan bli synlig i GEO
Generative Engine Optimization er den nye fronten for digital synlighet.
9. apr 2026kl. 08:30
// 19
Designregler
Regler etablert gjennom designprosessen. Disse skal følges konsekvent.
Regel 01
Ingen emojis
Bruk SVG-linjeikoner eller tekst i stedet for emoji-tegn. Emojis gir feil tonalitet for merkevarens premiumuttrykk.
Regel 02
Ingen gradient top-borders
Kort skal ikke ha gradient-striper på toppen. Bruk subtile border-color-endringer på hover i stedet. Unntaket er den animerte conic-gradient rundt kontakt- og CTA-kort.
