Rolig, presis, havgrønn — slik ser Nettsmed ut.
Denne guiden er laget for å brukes mens du jobber, ikke leses fra perm til perm.
Siden du har oppe mens du jobber.
Alt du trenger for en rask leveranse, samlet på én skjermhøyde. Trenger du begrunnelsen bak — scroll videre.
Farger
#2F5D62 primary#1F2829 ink-darkest#434E4F ink#8FA1A3 ink-muted#E4E7E7 line#F2F7F7 surfaceFont
DM Sans
Regular 400 · Medium 500 · Bold 700
Office-fallback: Arial, Helvetica, sans-serif
Negativ letter-spacing kun på overskrifter (h1–h4).
Logo-minivarianter
- Min. bredde digital: 90px
- Min. bredde print: 25mm
Tone
Aldri buzzword. Konkrete tall og tidsrammer slår adjektiver.
Samme oppskrift, alle formater.
Ett bilde med komposisjonsmal + logo + tekstflate — satt sammen om igjen for hver kanal, fra sosiale medier til trykte dokumenter. Under ser du grunnoppskriften brukt i praksis.
SoMe-post (1:1)
Mørk teal-gradient som bakgrunn, hvit logo øverst venstre, kort overskrift i bunn venstre — samme oppskrift som hero-seksjonen på nettsmed.no.
SoMe-post, variant 2 (1:1)
Ekte foto + flytende feature-kort — komposisjonsmalen fra kapittel 06 satt om til kvadratformat. Mørk scrim nederst holder logoen lesbar over fotoet.
Skreddersydd nettside
A4-plakat
Foto med den stiplede rammen forskjøvet bak (komposisjonsmalen fra kapittel 06), logo + tittel i bunnfeltet. Avrunding følger asymmetri-regelen.
+47 000 00 000 · nettsmed.no
E-postsignatur
Primær-logo (havgrønn på hvit), en 2px teal-strek som divider, kontaktinfo i ink. Ingen bilde her — signaturen bærer identiteten alene.
Story (9:16)
Ekte foto (ikke tom gradient) + mørk scrim nederst for tekstkontrast + logo. Samme komposisjonslogikk som hero/profil, satt om til stående format.
Ny artikkel er live →
Presentasjonsforside (16:9)
Mørk teal-gradient med polygon-mønster i bakgrunnen (opacity 0.16) + sirkeldekor, samme oppskrift som hero-en. Eyebrow + tittel + subheading gir tydelig typografisk hierarki.
Vekst i Q3
Dokumentforside (A4)
Rapport eller tilbud: logo øverst, polygon-mønster-flate (opacity 0.45, hvit scrim over for lesbarhet), tittel + metadata i typografi-skalaen, teal aksentstrek.
Nettside for Nordre Handverk AS
Innholdsside (A4)
Overskrift-hierarki + brødtekst-spalte — samme skala som §05 Typografi, samme teal for underoverskrifter som resten av systemet.
Ett merke, tre varianter.
Logoen er todelt — symbol og "nett" i havgrønn, "smed" i sort. Bruk riktig variant for bakgrunnen, aldri egne fargekombinasjoner.
«nett» + symbol er alltid havgrønn (#2F5D62). «smed» er alltid sort (#1F2829 i digital kontekst). Rekkefølgen byttes aldri, og delene skilles aldri fra hverandre.
Clearspace = symbolhøyden som enhet på alle fire sider. Ingen tekst, ikoner eller kantlinjer innenfor denne sonen.
Feilbruk
Ekte feil vi ser gå igjen hos kunder — ikke oppdiktede eksempler.
Hver farge, testet mot tekst.
Aa i sort og hvit oppå hver farge — se med det blotte øyet hva som funker, og hex-tabellen under for eksakte forhold.
Full kontrasttabell
| Forgrunn | Bakgrunn | Eksempel | Ratio | Normal tekst | Stor tekst / UI |
|---|---|---|---|---|---|
| Ink-darkest #1F2829 | Hvit #FFFFFF | Aa | 15.07:1 | AAA | AAA |
| Ink #434E4F | Hvit #FFFFFF | Aa | 8.60:1 | AAA | AAA |
| Ink #434E4F | Surface #F2F7F7 | Aa | 7.96:1 | AAA | AAA |
| Ink-darkest #1F2829 | Surface #F2F7F7 | Aa | 13.94:1 | AAA | AAA |
| Hvit #FFFFFF | Primary #2F5D62 | Aa | 7.34:1 | AAA | AAA |
| Primary #2F5D62 | Hvit #FFFFFF | Aa | 7.34:1 | AAA | AAA |
| Primary #2F5D62 | Surface #F2F7F7 | Aa | 6.78:1 | AA | AAA |
| Hvit #FFFFFF | Ink-darkest #1F2829 | Aa | 15.07:1 | AAA | AAA |
| Danger #DC2626 | Hvit #FFFFFF | Aa | 4.83:1 | AA | AAA |
| Success #15803D | Hvit #FFFFFF | Aa | 5.02:1 | AA | AAA |
| Warning #B45309 | Hvit #FFFFFF | Aa | 5.02:1 | AA | AAA |
| Info #2563EB | Hvit #FFFFFF | Aa | 5.17:1 | AA | AAA |
| Ink-muted #8FA1A3 | Hvit #FFFFFF | Aa | 2.69:1 | Under AA | Under AA |
Metode: relativ luminans per WCAG 2.1 (koeffisienter 0.2126R + 0.7152G + 0.0722B på lineærkonvertert sRGB), kontrastforhold (L1 + 0,05) / (L2 + 0,05). Grenseverdier: normal tekst AA ≥ 4,5:1 / AAA ≥ 7:1. Stor tekst (≥ 18pt/24px, eller ≥ 14pt/18.66px fet) og UI-komponenter: AA ≥ 3:1. Ink-muted er, som DESIGN.md selv sier, aldri godkjent som tekstfarge — kun dekorativt.
DM Sans, én stige.
Størrelse, vekt og linjehøyde er faste per nivå — ingen frihåndsvalg. Metadata i margen viser eksakt verdi.
Aa Bb Cc — H1
Aa Bb Cc — H2
Aa Bb Cc — H3
Aa Bb Cc — H4
Body-large — for ingress og viktige callouts. Generøs linjehøyde for lesbarhet i lengre avsnitt.
Body — standard brødtekst. Dette er hvordan Nettsmed skriver når vi forklarer noe til en kunde.
Body italic — for sitater og understreket presisering, aldri hele avsnitt.
Body-small — bildetekster, footer, metadata.
Én fast komposisjonsmal, kildesatt.
Nettsmed sin visuelle "feel" kommer ikke fra CSS-overlay, men fra en gjenbrukt bildekomposisjon — dokumentert direkte fra nettsmed.no sine egne hero- og profilbilder.
Hero-bilde, forsiden — vist som det faktisk publiseres (komposisjonen er bakt inn i selve bildet, ingen ekstra CSS-ramme oppå). Asymmetrisk avrunding, stiplet ramme forskjøvet bak, to flytende feature-kort med drop shadow.
Profilbilde — vist som det faktisk publiseres. Badge-form (kun topp-hjørner avrundet), samme stiplede ramme, teal lokasjonstag med hvit tekst nederst venstre — alt bakt inn i bildet, ingen CSS-dobling.
Slik bygger du et Nettsmed-bilde
Velg foto
Ekte situasjon — person ved skjerm, håndverk, møte. Aldri stock-smil mot hvit bakgrunn.
Klipp inn i avrundet form
Asymmetrisk avrunding — kun to motstående hjørner (hero) eller kun topp-hjørner (profil/badge-form). Radius ca. 3–4 % av bildebredden.
Legg stiplet ramme bak
Forskjøvet 15–25px fra fotokanten, farge #8FA1A3, samme avrunding med større kurvatur.
Legg til feature-kort (kun hero) eller lokasjonstag (kun profil)
Hero: 2–4 hvite kort med thumbnail + tittel + brødtekst + «⋮»-ikon, lett rotert for collage-følelse. Profil: én teal-pille med pin-ikon + bynavn.
Eksporter flatt
Hele kompositten flates til én JPEG — teksten i kortene er en del av bildet, ikke separat markup.
Global 8px-regel: alle vanlige <img>-elementer på nettsmed.no får border-radius: 8px som standard, uavhengig av kompositt-designet beskrevet over.
Seks byggeklosser, kopier og bruk.
Dette er de gjenbrukbare CSS-modulene bak alle mockupene du nettopp så. Hver kan brukes alene eller stables — men aldri i «halv styrke»: bruk den som spesifisert, eller la vaere.
1. Polygon-mønsteret
Brukes til: subtil bakgrunn i hero, quick-ref, presentasjonsforside og dokumentforside. Legacy-motiv fra nettsmed.no (2023) — videreført, ikke nyskapt. Aldri bak brødtekst uten kontrastsjekk; hold opacity ≤0.16 på mørk bunn, ≤0.5 på lys bunn.
.pattern-bg::before {
background-image: var(--pattern-forside);
background-size: cover;
}
.pattern-bg.pattern-on-dark::before { opacity: .14; mix-blend-mode: soft-light; }
.pattern-bg.pattern-on-light::before { opacity: .5; }
2. Korn + mesh-tekstur
Brukes til: alternativ til polygon-mønsteret på flater som skal føles rolige/premium uten et gjenkjennelig motiv — nordic-textures-oppskriften. Rolig (vist her) er standarden for innhold/footer; Levende (animert) til hero/featured-blokker. Se full firevariants-referanse i engineering-notatene.
.has-texture { position:relative; isolation:isolate; }
.texture-rolig::before { /* mesh-blooms, teal rgba 0.08-0.11 */ }
.texture-rolig::after { /* feTurbulence korn, opacity .5, soft-light */ }
3. Stiplet ramme
Brukes til: forskjøvet dekor-ramme bak hero-/profilbilder — men KUN når malen selv komponerer bildet. Er komposisjonen allerede bakt inn i en ferdig JPEG (se §Bildestil), skal denne rammen IKKE legges til på nytt — det ga v2 sin dobbel-ramme-bug. Riktig spec: 2.5–3px strek, ~50% opacity, -1.5° til 2° rotasjon, asymmetrisk avrunding.
.dashed-frame-demo {
border: 2.75px dashed rgba(143,161,163,0.5);
border-radius: 6px 32px 6px 32px;
transform: rotate(-1.5deg);
}
4. Flytende feature-kort
Brukes til: hvite kort med thumbnail + kort tekst, lett rotert, lagt oppå hero-/SoMe-bilder for å vise konkrete fordeler. Alltid drop shadow (aldri border), alltid hvit bunn uansett hva som ligger under.
.feature-card-demo {
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(31,40,41,.16);
padding: 10px 14px;
}
5. Sirkeldekor
Brukes til: tynne konsentriske ringer (1px, lav opacity) i hjørner av mørke flater — hero, deck-forside, mørke SoMe-poster. Rent dekorativt, aldri med innhold inni. Ekte eksempel til høyre: logoen satt i sirkelramme, samme prinsipp brukt som avatar-/appikon-format.
.circle-decor {
position: absolute;
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
}
6. Teal lokasjonstag
Brukes til: profilbilde-regelen — én pille nederst venstre med pin-emoji + bynavn, teal bunn på 82% opacity, hvit tekst. Kun på profilbilder, aldri på hero-/produktfoto. Se kontrastverdi i tabellen under §04 Farger (hvit på #2F5D62 består AA).
.loctag-demo {
background: rgba(47,93,98,.82);
color: #FFFFFF;
border-radius: var(--radius-full);
padding: 4px 10px 4px 8px;
}
Jordnær. Presis. Aldri buzzword.
Nettsmed snakker som en kompetent rådgiver, ikke som en startup som prøver å imponere. Vi forklarer, vi lover ikke for mye, og vi bruker ord folk faktisk forstår.
Gjør
- «Vi bygger digitale løsninger for små og mellomstore norske bedrifter.»
- «Vi tegner ikke logoer, kjører ikke kampanjer og lager ikke virale videoer.»
- «Det er gratis, og det er der vi finner ut om kjemien stemmer.»
- Konkrete tidsrammer og priser («1–4 uker», «30–45 000 kr»)
- Kort, aktive setninger. Si hva vi faktisk gjør.
Ikke gjør
- «Vi disrupter bransjen med banebrytende synergier.»
- «State-of-the-art, next-gen, best-in-class-løsninger.»
- Utrykk som lover «eksplosiv vekst» eller «garantert viral suksess»
- Unødvendig fagsjargong uten forklaring («headless», «omnikanal»)
- Utropstegn og hype-adjektiver stablet på hverandre
Denne guiden kan ikke sprike fra det vi bygger.
Alt du har sett — farger, størrelser, kontrastforhold — kommer fra én fil: DESIGN.md, versjonert og sjekket automatisk mot tilgjengelighetskrav. Oppdaterer vi paletten, oppdateres den ett sted.
Trenger du en ny mal om et halvt år, genereres den fra samme fil — ikke fra en designers minne. Endrer vi ett sted, følger alt bygget etter systemet automatisk med.