Grafisk profil
Digitale løsninger som vokser med bedriften.
Dette er profilen Ynde bruker på seg selv: logo, farger, typografi og stemme. Den er offentlig fordi den viser hvordan vi tenker om design – som ett system, ikke som pynt.
Idéen
ynde (subst.) – letthet, eleganse og naturlig skjønnhet i form og bevegelse.
Ynde er også det norske navnet på slyngplanten Mandevilla, med rosa, traktformede blomster.
Navnet gir to ting på én gang. Ordet lover kvalitet uten støy: løsninger som føles lette å bruke. Planten gir fortellingen om vekst. Profilen uttrykker begge deler med typografi og én detalj, det rosa punktumet. Det er knoppen på planten, og det er slutten på en setning som er sagt ferdig: rolig, sikker og uten støy.
En slyngplante trives like godt i en vinduskarm som langs en hel husvegg. På samme måte kan en kunde starte med en enkel landingsside og vokse til en nettbutikk, en kundeportal eller en skreddersydd webapp – uten å bytte leverandør for å ta neste steg.
- Lett å bruke
- Hver side skal gjøre én jobb godt. Vi fjerner før vi legger til.
- Bygget for å vare
- Rask, tilgjengelig og enkel å oppdatere, også om to år.
- Tydelige avtaler
- Fastpris etter kartlegging, klart omfang og ingen overraskelser på fakturaen.
Logo
Logoen er navnet satt i Gloock med et rosa punktum. Den finnes i to former som er klippet fra samme tegning: ordmerket «ynde.» og symbolet «y.». Punktumet er det eneste stedet fargen brukes i logoen, og det går igjen som grafisk element i resten av profilen.
Symbol, favicon og profilbilder
Ordmerket er for bredt til små flater. Bruk da «y.», lyst på Skog, til favicon og app-ikon, og mørkt på Ynde til runde profilbilder.
512 px
180 px
32 px
Profil
Regler
- Punktumet i logoen er alltid rosa. På rosa flater blir det Knopp.
- Ordmerke og symbol brukes hver for seg, aldri ved siden av hverandre.
- Luft rundt logoen er minst høyden på bokstaven n.
- Minste bredde for ordmerket er 80 px på skjerm og 20 mm på trykk.
- Ikke strekk, roter, legg effekter på eller sett navnet i en annen skrift. Bruk alltid vektorfilene.
- I løpende tekst skrives firmanavnet «Ynde», med stor forbokstav og uten punktum.
Animasjon
Navnet foldes ut fra punktumet som et trekkspill. Hver bokstav har sin egen forsinkelse og toner inn mens den glir på plass. Ved redusert bevegelse vises logoen ferdig, uten animasjon.
Vokser ut
Punktumet dukker opp, og e, d, n og y glir ut mot venstre. Til intro på forsiden og i video.
Trekkes ut
Starter som «y.», og punktumet trekker ut e, d og n bak y-en. I menyen: hele navnet øverst på siden, «y.» når man scroller.
| Verdi | Innstilling |
|---|---|
| Forsinkelse per bokstav | 120 ms |
| Varighet per bokstav | 800 ms |
| Easing | Ease-out, cubic |
| Punktum inn (vokser ut) | 450 ms med lett overshoot |
| Rekkefølge | Bakfra: e, d, n, y. Ved krymping motsatt vei. |
| Redusert bevegelse | Ingen animasjon, vis ferdig logo |
Farger
Paletten er hentet fra planten: kjølig kalkhvit, dype bladgrønne toner og én blomsterrosa. Grønt gjør profilen rolig og troverdig for bedriftskunder, rosa gjør den gjenkjennelig. Rosa brukes sparsomt, som en blomst på en grønn vegg, og den viktigste rosa detaljen er punktumet.
Omtrentlig fordeling på en side: mest Kalk, deretter Skog, litt Slynge og Stilk, og minst Ynde.
Bruk og kontrast
Primærknapper bruker Ynde dyp med Kalk-tekst. Den lyse rosa gir bare 3,4:1 mot Skog, og det holder ikke for knappetekst i vanlig størrelse. Den brukes derfor til punktum, prikker og fokusring, der kravet er 3:1. På mørk bakgrunn lysner primærfargen, fordi Ynde dyp nesten forsvinner mot det mørke.
| Farge | Navn | Hex | Brukes til |
|---|---|---|---|
| Kalk | #EEF1EC | Standard bakgrunn på nett og i dokumenter | |
| Skog | #1E3329 | All brødtekst, mørke seksjoner, footer | |
| Slynge | #2E5A47 | Sekundærflater, ikoner, hover på mørkt | |
| Stilk | #8DAA97 | Linjer, rammer, dekorative streker | |
| Ynde | #D6517D | Punktum, kulepunkter, fokusring og markeringer. Aldri vanlig tekst. | |
| Ynde dyp | #B03663 | Primærknapper, lenker og rosa tekst på lys bakgrunn | |
| Knopp | #F5D6E0 | Tonede bokser, sitater, tilbudsbokser | |
| Varsel | #A4382E | Feil og destruktive handlinger. Finnes ikke i profilen fra før; lagt til for skjema og admin. |
| Fargepar | Kontrast | Krav | Status |
|---|---|---|---|
| Skog på Kalk – brødtekst | 11,81:1 | 4.5:1 | AA |
| Kalk på Skog – tekst på mørkt | 11,81:1 | 4.5:1 | AA |
| Slynge på Kalk | 6,90:1 | 4.5:1 | AA |
| Stilk på Skog – linjer | 5,34:1 | 3:1 | AA |
| Ynde på Kalk – grafiske elementer | 3,46:1 | 3:1 | AA |
| Ynde på Skog – grafiske elementer | 3,42:1 | 3:1 | AA |
| Kalk på Ynde dyp – primærknapp | 5,19:1 | 4.5:1 | AA |
| Ynde dyp på Kalk – lenker | 5,19:1 | 4.5:1 | AA |
| Skog på Knopp – tonede bokser | 9,98:1 | 4.5:1 | AA |
| Varsel på Kalk – feilmeldinger | 5,79:1 | 4.5:1 | AA |
Kontrast er beregnet etter WCAG 2.1 fra verdiene i tokens.ts. AA krever 4,5:1 for vanlig tekst og 3:1 for stor tekst og grafiske elementer.
Typografi
To familier, begge gratis på Google Fonts og selvhostet via next/font, så nettleseren aldri snakker med Google. Gloock er en myk, kontrastrik antikva som gir overskriftene ynde. Schibsted Grotesk er tegnet for det norske mediekonsernet Schibsted, er svært lesbar på skjerm og har full støtte for æ, ø og å.
Gloock
Overskrifter, ordmerke, store tall og sitater. Én vekt. Aldri under 24 px.
Schibsted Grotesk
Brødtekst, navigasjon, knapper, skjema og tabeller. Regular 400 til tekst, Medium 500 til knapper og tabelloverskrifter, Bold 700 kun ved behov.
Display
72–128 px
H1
48 px
H2
32 px
Ingress
20 / 1,5 px
Brødtekst
17 / 1,65 px
Liten
14 px
Grafiske elementer og bakgrunn
Punktumet er profilens eneste grafiske motiv. Det går igjen i overskrifter, lister, store flater og bevegelse, så alt ser ut til å høre sammen med logoen. I menyen brukes det ikke, der ville en prikk sett ut som et varsel. Hold resten rolig.
Nettsider med ynde
Punktum i overskrifter
Store overskrifter som er påstander avsluttes med rosa punktum. Aldri på spørsmål, etiketter eller knapper, og bare ett per overskrift.
- Fastpris etter kartlegging
- Klart omfang
- Drift etter lansering
Kulepunkter
Lister bruker rosa prikker i stedet for streker eller haker. Prikken er litt mindre enn punktumet i logoen og står midt på første linje.
Meny
Aktiv side settes i Medium-vekt med en tynn understrek i Ynde. Hover får understrek i Stilk, og tastaturfokus beholder den rosa rammen. To stille signaler, så det ikke hviler på farge alene.
Stort punktum
Ett stort punktum, delvis beskåret i kanten av flaten, på Skog eller Kalk. Til baksiden av visittkort, OG-bilder, e-postbanner og presentasjoner. Alltid bare ett, og aldri bak tekst.
Lasteindikator
Punktumet i «y.» pulserer mens noe lastes eller et skjema sendes. Står stille ved redusert bevegelse.
Bakgrunner
Kalk som standard, Skog for hero, footer og viktige overganger, og Knopp for sitater, kundeuttalelser og prisbokser. Ingen gradienter.
Knapper og flater
Knappene er piller. Flatene – kort, bokser, bilder og skjemafelt – har myke hjørner på 14px, og skyggene er grønnlige og lave i stedet for grå. Forskjellen i grad, ikke i form, gjør det tydelig hva som er klikkbart. Primærknappen er Ynde dyp med Kalk-tekst, sekundærknappen har ramme i Stilk.
Bilder
Vis ferdige løsninger i ekte bruk: skjermbilder på mobil og laptop, fotografert i dagslys, gjerne med et naturmateriale i bildet. Unngå stockbilder av folk som peker på skjermer, og unngå frukt som motiv. Portretter tas i rolig, naturlig lys mot en grønn eller lys bakgrunn.
Stemme
Ynde snakker som en dyktig håndverker: rolig, konkret og uten fagprat. Skriv til den som tar beslutningen, enten det er innehaveren av en kafé eller en produktsjef i et større selskap. Ingen av dem skal måtte lære seg webord. Si hva kunden får, hva det koster og hva som skjer videre.
Punktumet i logoen er også en del av stemmen. Skriv korte setninger som er sagt ferdig, uten utropstegn og overdrivelser.
Snakk om firmaet som «Ynde» på nettsiden og i tilbud, og bruk «jeg» på Om-siden og i e-post. Da ser firmaet solid ut for større kunder, samtidig som små kunder vet hvem de faktisk jobber med.
Skriv slik
Ikke slik
Logofiler
Alle logofilene i én pakke. SVG til nett og Figma, PDF til trykk og Illustrator, EPS til trykkerier og eldre programmer, PNG til favicon og profilbilder. Ordmerket er tegnet som konturer, så filene trenger ingen font.
