MNmedia · Styleguide
Alt det visuelle, ét sted
Mærket, farverne, skrifterne og de byggesten sitet er sat sammen af — med reglerne, der hører til. Alt herinde er sitets egne komponenter, ikke kopier af dem: ændrer en knap sig i koden, ændrer den sig også på denne side.
01Mærket
MN findes ikke i nogen skrift. Det er tre streger sat op efter faste mål, og derfor kan det skaleres fra et broderi til en gavl uden at falde fra hinanden.
Ét stregmål
Stregen er 17 mod en versalhøjde på 100 — 17 %. Én værdi styrer hele mærkets vægt.
Delt streg
M og N mødes om den lodrette streg. Det gør de to bogstaver til ét mærke frem for to ved siden af hinanden.
Flade snit
Spidserne er skåret af for- og foroven. Uden snittet ville geringen løbe ud i en spids, der aldrig kan sættes af rent.
Ordet er smallere
MEDIA er sat smallere end sitets overskrifter — det skal stå ved siden af monogrammet, ikke konkurrere med det.
Mål
| Mål | Værdi | Hvorfor det står her |
|---|---|---|
| Mærkets tegning | 191 × 100 | Bredde mod versalhøjde. Alle andre mål er afledt af de to tal. |
| Stregmål | 17 | 17 % af versalhøjden. Samme streg hele vejen rundt. |
| Delt streg | x = 106 | Hvor M slutter og N begynder. |
| Mærket i låsen | 0,72 em | Højden, målt fra ordets grundlinje. |
| Afstand til ordet | 0,50 em | Skalerer med skriftgraden, så låsen holder sit forhold. |
| Hele låsen | 5,1652 em | Bredden som helhed. Brug den, hvis du skal regne plads ud. |
| Ordet MEDIA | Archivo · wdth 80 · 500 | Spærring 0,15 em. I filerne er ordet lagt ud i konturer. |
Luft og mindstemål
Luft
Mindst en halv mærkehøjde frit hele vejen rundt. Står mærket 40 px højt, skal der være 20 px til nærmeste tekst, kant eller motiv.
Mindste størrelse
Låsen: 90 px eller 24 mm bred. Mærket alene: 16 px eller 6 mm. Under det lukker stregerne sig om hinanden.
Farve
Sort eller hvid. Den lilla hører til knapper — aldrig til mærket.
Bund
Den hvide udgave skal have ro bag sig. På et lyst eller uroligt billede skal billedet dæmpes først.
Filer
Låsen, hvid
Gennemsigtig bund. Til mørke flader.
Låsen, sort
Gennemsigtig bund. Til lyse flader.
Låsen på sort
Firkant og luft følger med i filen.
Mærket, hvid
Monogrammet alene, mørke flader.
Mærket, sort
Monogrammet alene, lyse flader.
Mærket på sort
Kvadratisk. Profilbillede og faneikon.
SVG er originalen og skalerer i det uendelige — den er den, en foliemand eller en broderiskærer beder om. PDF er samme vektor pakket til tryk. PNG er 2400 px bred med gennemsigtig bund, til alt hvor der ikke kan lægges en vektor ind: sociale medier, PowerPoint, Word.
02Farver
Sort og hvid med tre gråtoner imellem. Den lilla er forbeholdt dét, folk skal trykke på — bruges den til pynt, holder den op med at betyde “tryk her”.
Fundamentet
Ink
#0A0A0A
Bunden. Alt står på den.
Ink soft
#16161A
Løftede felter og prøveflader.
Hårstreg
#232328
Skillelinjer og kanter. Aldrig tekst.
Dyb grå
#4A4A52
Labels, tællere og mono-tekst.
Grå
#8A8A92
Brødtekst og alt sekundært.
Paper
#FFFFFF
Overskrifter og mærket.
Accenten
#6E3BFF
Den bruges ét sted: på dét, folk skal trykke på. På sitet er det den primære knap — og den tynde linje i toppen, der viser, hvor langt man er nået ned ad siden. Den er sidens eneste undtagelse, og den er funktionel. Sætter du accenten på overskrifter, streger eller flader, holder den op med at betyde “tryk her”, og så er der ikke noget tilbage til at sige det.
Hover: #5A2EE0 · var(--color-accent-hover)
03Skrifter
Tre roller, tre snit. Archivo har en bredde-akse, og det er hele pointen: den brede variant giver den plakat-agtige vægt, en almindelig grotesk ikke har.
Vi bygger brands
Overskrifter · Archivo · wdth 112 · vægt 600 · versaler · sporing −0,015 em · utility .headline
Branding, sociale medier og annoncering — samlet ét sted. Vi står for hele processen, fra idé til færdigt resultat.
Brødtekst · Geist · vægt 350 · linjeafstand 1,65 · omkring 65 tegn pr. linje
Ydelser · Cases · 02 / 03
Labels og tal · Geist Mono · vægt 400 · sporing 0,22 em · altid versaler · utility .label-mono
media
Ordet i mærket · Archivo · wdth 80 · vægt 500 · sporing 0,15 em — smallere end overskrifterne, med vilje
Skalaen
Display
text-displayclamp(2,25rem → 3,5rem), med loft bundet til spaltebredden
Overskrift 1
text-h1clamp(1,5rem → 3rem)
Overskrift 2
text-h2clamp(1,375rem → 2rem)
Overskrift 3
text-h3clamp(1,25rem → 1,5rem)
Manchet og indledninger
text-leadclamp(1,0625rem → 1,25rem)
Display har et loft, der er bundet til spaltebredden. Forsidens overskrift er brudt i linjer i hånden og kan derfor ikke ombryde sig ud af en for smal spalte — uden loftet bliver den klippet af på hver eneste telefon.
04Søgeren
Fire vinkler, der markerer et felt uden at lukke en kasse om det. Betydningen er hentet fra kameraets søger: sådan afgrænser den dét, der er i billedet. Derfor er der én regel — de markerer noget, man ser på.
Noget man ser på
Ja
Om materiale
Optagne klip, stillbilleder og billedplader. Det er dér, søgeren betyder noget.
Ja
Om mødet
Det ene sted per side, hvor vi beder om mødet — den afsluttende CTA.
Nej
Om mærket
Lå de også om afsenderen, holdt de op med at betyde noget. De sad i det midlertidige logo og er taget ud.
Nej
Om hvert felt
Sættes de på alle kort og bokse, bliver de til mønstertapet.
Placering
På billeder skal vinklerne ligge uden for motivet, med negativ afstand. Hvide hårstreger oven på et foto forsvinder mod himmel og lyst træ, og så er rammen kun halvt synlig. Uden for står de på sitets sorte bund og kan ses hele vejen rundt.
05Knapper
Tre varianter. Rundingen er forbeholdt knapper — alt andet på sitet er skarpt med hårstreger, og det er dét, der får knappen til at læses som noget, man kan trykke på.
primary · den eneste lilla flade · én per skærmbillede
secondary · hårstregskant, lyser op ved hover
ghost · til det tredje valg, uden flade
Primary bærer sidens ene handling. To lilla knapper ved siden af hinanden ophæver hinanden — skal der være et alternativ, er det secondary.
06Komponenter
Byggestenene siderne er sat sammen af — vist som de rigtige komponenter, ikke som billeder af dem.
Sektionsmarkør
Ydelser
Hvad hjælper vi med?
Eyebrow · mono-label og en hårstreg ud til kolonnens kant — samme markering som et klip på en tidslinje
Ikoner
Håndtegnede og bevidst uden ikonbibliotek — vi bruger syv stykker, og en pakke på 300 kB for det ville koste mere end det smager. Alle deler stregvægt 1,4 og runde hjørner, så de læses som ét sæt.
Kort
SoMe-administration
Vi håndterer jeres Instagram, Facebook, LinkedIn og TikTok med indhold der passer til jeres virksomhed.
Video og content
Vi hjælper med at lave professionelle billeder og video til jeres kanaler. Det gælder lige fra idégenerering, eksekvering og redigering.
Annoncering
Vi opsætter annoncer der rammer jeres målgruppe og skaber henvendelser til jeres virksomhed.
Branding
Vi personliggør jeres digitale univers, så I fremstår unikke, professionelle og troværdige online.
Kortene ligger på et gitter af hårstreger: gap-px på grå bund, så stregen mellem dem er selve mellemrummet — ikke en kant, der skal flugte med naboens. Kortene er lige høje, fordi de er flex-kolonner i et grid, ikke fordi teksterne er lige lange.
Tal og tags
- visninger
- 300.000+visninger
- kr. i opgaver
- 10 mio.+kr. i opgaver
- leads
- 100+leads
StatBlock · tal i Archivo, label i mono under — bruges på case-kort og case-sider
- Branding
- Sociale medier
- Video og foto
ServiceTags · hårstregskant, mono, ingen flade
Udtalelse
„De forstod hurtigt, hvad vi laver, og fik det til at se ud som noget, folk gider se på.“
Billeder
4:5 · stillbillede · hjørnerne uden for motivet
Tre formater, og de er ikke tilfældige. 9:16 til heroens klip, fordi det er formatet, der optages i. 4:5 til stillbilleder af samme grund. 16:9 til toppen af en case.
Hjørnerne slås fra, hvor billedet støder op til andet indhold — kort med kant, gallerier med fire op. Dér ville vinklerne lægge sig oven i naboen eller blive til støj i mængde.
Billeder ligger altid på ink-soft, mens de indlæses, så der aldrig blinker en hvid flade frem på en sort side.
07Rytme og luft
Luften mellem sektionerne er det vigtigste enkeltelement i det minimalistiske look. Den styres ét sted, så rytmen aldrig driver fra hinanden på tværs af siderne.
Sektionens indhold
--spacing-section · clamp(5rem → 10rem) · utility py-section
Alle sektioner bruger samme primitiv, Section, og alle sider har samme yderramme: max-w-320 med px-6, der bliver til px-10 fra md.
Sektioner adskilles af en enkelt hårstreg i grey-800 — ikke af en baggrundsfarve. Det er dét, der holder sitet fladt og lader luften gøre arbejdet.
Brødtekst holdes omkring 65 tegn bred. Længere linjer bliver trættende at læse, uanset hvor meget luft der er omkring dem.
08Bevægelse
Ét bevægelsesniveau på hele sitet. Animation spredt ud over hver enkelt komponent bliver til uro; ét orkestreret moment ved sideindlæsning og en rolig indtoning ved scroll er nok.
FadeIn · fade og 16 px op, når elementet kommer i syne · 700 ms
animate-rise · overskrifter kører op bag en maske · 1,1 s · kun ved sideindlæsning
Kurven
cubic-bezier(0.16, 1, 0.3, 1) — hurtigt ud, blødt i mål. Samme kurve overalt, så bevægelsen føles som ét system.
Sideindlæsning
Overskrifter kører op bag en maske, brødtekst og knapper løfter sig frem. Ét moment, ikke en kæde af effekter.
Ved scroll
Kun FadeIn. Bygget på IntersectionObserver frem for et bibliotek — 15 linjer i stedet for 50 kB på hver side.
Reduceret bevægelse
prefers-reduced-motion slår alt fra. Indholdet skal stå — ikke animere hurtigt forbi.
Originalen
Mærkets tegning findes ét sted: src/components/layout/Logo.tsx. Filerne herover er genereret ud fra den med python3 brand/byg.py — ændrer geometrien sig, køres scriptet, og ikoner, delebillede og trykfiler følger med.
MNmedia · Aarhus
09Sociale profiler
Profilbillede, bannere og highlight-omslag, skåret til hver platforms egne mål. Alt er bygget af de samme filer som resten — det er det samme mærke, ikke en variant til lejligheden.
Profilbillede
Sort
Standard
Hvid
Kun hvor lys bund kræves
Ét billede på 1080 × 1080 rækker til Instagram, Facebook, LinkedIn, TikTok og YouTube. Platformene skalerer selv ned.
Alle beskærer til en cirkel, og mærket overlever det: dets hjørner ligger 0,418 gange sidelængden fra midten, cirklen 0,5. Derfor er der ingen særskilt rund udgave — den firkantede er den runde.
Den sorte er standarden. Den hvide er til de få steder, hvor en lys bund er påkrævet — brandet står på sort.
Bannere
Facebook-cover
1640 × 664 · sikker zone 1090 × 500
Telefonen beskærer til et smallere udsnit end computeren. Zonen er fællesmængden.
LinkedIn, firmaside
1128 × 376 · sikker zone 720 × 300
Firmalogoet dækker cirka 160 px inde fra venstre kant — zonen er sat smallere, så den går fri.
LinkedIn, personlig
1584 × 396 · sikker zone 1100 × 320
Profilbilledet lægger sig oven i venstre hjørne.
YouTube-kanalbanner
2560 × 1440 · sikker zone 1546 × 423
Fjernsyn viser hele fladen, telefonen kun midterfeltet.
Låsen står midt i dem alle. Det er ikke en æstetisk beslutning: midten er det eneste sted, der overlever både telefonens beskæring og det profilbillede, platformene lægger oven i venstre hjørne. Vinklerne markerer den sikre zone og sidder 28 px inde i den — lå de på kanten, ville beskæringen skære lige igennem dem.
Instagram-highlights
Ord frem for ikoner: et omslag vises som en cirkel på 161 px, og dér lander en stregvægt på 1,4 px under én pixel — under mærkets egen mindstestørrelse. Derfor er søgeren heller ikke med her. Alle seks er sat i samme skriftgrad, ikke i samme bredde: fælles versalhøjde er dét, der får dem til at læses som ét sæt.