Klubben
Alle som vil spille volleyball, skal få muligheten, enten de vil satse mot toppen eller være aktive og ha det gøy.
Visjon og verdier
Visjon
Vi skaper fremtidens lagspillere
Verdier
- InkluderingVi tar imot alle som vil spille, uansett nivå og bakgrunn, og sørger for at nye blir kjent med laget.
- MestringAlle får oppgaver de kan klare, og noe å strekke seg etter.
- GledeDet skal være gøy å komme på trening, også etter et tap.
Riktig
- Vi skaper fremtidens lagspillere
Feil
- Fremtidens lagspillere
- Vi skaper morgendagens lagspillere
- Holstad skaper fremtidens lagspillere
- Ordlyden er fast. Visjonen endres ikke, forkortes ikke og skrives ikke om.
- Plakater, flyere og brev avsluttes med visjonen og holstadvolley.com.
- Visjonen står også på forsiden av holstadvolley.com, i sponsormateriell og i årsmeldingen.
- Én gang per flate. Visjonen er ikke en overskrift og ikke et slagord i løpende tekst.
- Verdiene står i denne rekkefølgen: inkludering, mestring, glede.
Visjonen som ferdig fil
Satt i Bebas Neue. Bruk fila der du ikke har skriften, for eksempel i Word, Spond og sosiale medier. Regler for flate, frisone og størrelse er de samme som for logoen.
Slik skriver vi
Vi skriver slik at en forelder som aldri har sett en volleyballkamp, forstår det første gang. Det gjelder nettsiden, Spond, e-post, sosiale medier og oppslag i hallen.
Hvem vi skriver til
Fire lesere. Vet du ikke hvem som leser, skriv til forelderen.
| Leser | Trenger |
|---|---|
| Forelder som ikke kan volleyball | Hva som skjer, når, hvor og hva det koster. Uten fagord |
| Spiller | Tid, sted og hva du skal ha med |
| Frivillig | Hva oppgaven er, hvor lang tid den tar, og hvem du spør |
| Sponsor | Hva klubben gjør, og hva støtten går til |
Grunnregler
- Skriv duLeseren er «du», klubben er «vi». «Du melder deg på i Spond», ikke «Medlemmer melder seg på i Spond».
- Korte setningerEtt poeng i hver setning. Blir setningen lang, del den i to.
- Det viktigste førstHva som skjer, når og hvor. Bakgrunnen kommer etterpå, hvis den trengs.
- Ingen forkortelser leseren må kunne fra førSkriv «Norges Volleyballforbund», ikke «NVBF». Forklar fagord første gang: «libero, forsvarsspilleren i annen draktfarge».
Faste ord
Ett ord for én ting, likt overalt. Bytter vi ord, tror leseren at det er to ulike ting.
| Vi skriver | Betyr | Ikke |
|---|---|---|
| Medlemskontingent | Det du betaler for å være medlem i klubben | Medlemsavgift, kontingent |
| Treningsavgift | Det du betaler for å trene og spille på et lag | Aktivitetsavgift, lagsavgift |
| Lisens | Forsikringen og spilleretten du betaler til forbundet | Spillerlisens, forsikring |
| Lagleder | Den voksne som har det praktiske ansvaret for laget | Oppmann, lagkontakt |
| Turnering | Flere kamper samlet på én dag eller én helg | Cup, stevne |
| Serie | Kamper mot de samme lagene gjennom sesongen | Liga, divisjonsspill |
Egennavn er unntaket: en turnering som heter noe med «cup», heter det. Klubbnavnet står under Slik skriver vi navnet.
Rett og galt, side om side
Samme melding, skrevet to ganger.
Velkomst
Slik
Velkommen til U13. Første trening er tirsdag 14. oktober kl. 17.00 i Holstadhallen. Ta med innesko og vannflaske. Du trenger ikke å kunne volleyball fra før.
Ikke slik
VELKOMMEN TIL NY SESONG!!! Vi i HIL gleder oss masse til å komme i gang igjen etter sommeren. Info om oppstart, lisens og NVBF-registrering kommer fortløpende.
Avlysning
Slik
Treningen i dag er avlyst. Hallen er stengt på grunn av vannlekkasje. Neste trening er torsdag kl. 18.00, som vanlig.
Ikke slik
Hei alle sammen! Vi har dessverre fått beskjed fra kommunen om at det har oppstått en situasjon i hallen, og vi må derfor se oss nødt til å avlyse.
Dugnad
Slik
Vi trenger seks voksne til kiosken lørdag 8. november. Hver vakt varer to timer. Velg vakt i Spond innen søndag. Spørsmål? Ring laglederen.
Ikke slik
Det forventes at alle foresatte stiller på dugnad. Manglende oppmøte vil bli fulgt opp. Vaktliste sendes ut senere.
Dato, klokkeslett og sted i eksemplene er oppdiktet.
Vanskelige meldinger
Si det som det er, i første setning. Si så hva som skjer videre, og hvem leseren kan spørre.
Avlyst trening
- «Avlyst» står i overskriften og i første setning.
- Én setning om hvorfor.
- Når neste trening er.
- Send så tidlig du kan, i kanalen laget bruker til vanlig.
Treningen i dag er avlyst. Treneren er syk. Neste trening er torsdag kl. 18.00.
Venteliste
- Si at laget er fullt, og at barnet står på venteliste.
- Si når leseren får svar. Lov ikke plass.
- Si hva som finnes i mellomtiden, hvis noe finnes.
U13 er fullt, og Ada står på venteliste. Vi gir deg beskjed innen 1. november om hun får plass. Har du spørsmål, svar på denne e-posten.
Purring på betaling
- Si hva det gjelder, hvor mye og ny frist.
- Ingen skyld og ingen trusler. De fleste har bare glemt det.
- Si at leseren kan ta kontakt hvis det er vanskelig å betale.
- Send til den det gjelder, aldri i en gruppe.
Vi kan ikke se at treningsavgiften for høsten er betalt. Den er på 1200 kroner, og ny frist er 15. november. Er det vanskelig å betale nå? Si fra til laglederen, så finner vi en løsning.
Navn, beløp og frister i eksemplene er oppdiktet.
Emoji, utropstegn og store bokstaver
Regelen er den samme for alle tre: ordene skal bære meldingen. Høyst én emoji og ett utropstegn i en tekst, og aldri hele ord i store bokstaver.
Gjør
- Emoji bare i Spond og sosiale medier, én, til slutt i teksten.
- Utropstegn når noe er verdt å rope om: «Vi vant!»
- Stor forbokstav i første ord og i egennavn.
- Uthev med Bold.
- Skriv titler i Bebas Neue med vanlige bokstaver. Skriften gjør dem store.
Ikke gjør
- Emoji på nettsiden, i e-post, brev og på trykk.
- Emoji i stedet for et ord, eller i en vanskelig melding.
- Utropstegn i avlysninger, purringer og frister.
- Flere utropstegn etter hverandre.
- Hele ord i store bokstaver: «VIKTIG», «HUSK».
Overskrifter
Overskrifter skrives som en vanlig setning: stor forbokstav i første ord og i egennavn, ellers små. Ikke punktum til slutt.
Riktig
- Slik melder du deg på
- Treningstider for høsten
- Holstad Volley søker trenere
Feil
- Slik Melder Du Deg På
- TRENINGSTIDER FOR HØSTEN
- Holstad Volley søker trenere.
Farger
Rødt og blått, på hvitt. Holstad rød er klubbfargen og brukes der noe skal ses. Det blå er én familie: Arveblå er den klare midten, Marine den mørke enden og Svart bunnen. Lyse flater, kanter og dempet tekst er toner av det samme blå, så ingenting er grått.
Primærfarger
- HEX
- #DA3731
- RGB
- 218, 55, 49
- Pantone
- 485 C
- CMYK
- 0, 75, 78, 15
- Skala
- Rød 500
- HEX
- #1F2A44
- RGB
- 31, 42, 68
- Pantone
- 533 C
- CMYK
- 54, 38, 0, 73
- Skala
- Blå 900
- HEX
- #2A6BA8
- RGB
- 42, 107, 168
- Pantone
- 7684 C
- CMYK
- 75, 36, 0, 34
- Skala
- Blå 600
- HEX
- #101820
- RGB
- 16, 24, 32
- Pantone
- Black 6 C
- CMYK
- 50, 25, 0, 87
- Skala
- Blå 950
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
- Pantone
- —
- CMYK
- 0, 0, 0, 0
Pantone er nærmeste match — bekreft med trykkeri før produksjon.
Arveblå er støttefargen
Marine er rolig og nesten svart. Arveblå er samme blå med lyset på, og gjør tre jobber:
- Gir de lyse flatene farge. Kort, tabeller og bakgrunner er lyse toner av Arveblå, ikke grå.
- Er den tredje flaten. Når en side eller et innlegg trenger mer enn rødt og marine: grafikk, store tall, tagger og faktaflater.
- Er fargen for «nyttig å vite». Varsler og meldinger som informerer uten å haste.
Arveblå er aldri hovedhandlingen. Knapper er marine eller røde.
Skalaene (kun skjerm)
Samme tall betyr samme lyshet i alle skalaene: 100 er en lys flate, 500–600 er fargen selv, 900 er tekst. Tonene finnes som --holstad-rod-500, --holstad-bla-600 og --holstad-blagra-600.
Rød
Blå
Blågrå
Tallet i flaten er kontrasten mot tekstfargen. Blågrå er det grå i systemet: kanter, dempet tekst og nøytrale knapper.
Kontrast
Hvilke kombinasjoner av tekst og flate som holder WCAG AA. AA holder for all tekst (4,5:1). Stor holder bare for tekst fra 24 px, eller 19 px fet, og for ikoner og kanter (3:1). Nei skal ikke brukes til tekst.
| Tekst | Hvit | Blå 50 | Blå 100 | Blå 200 | Rød 100 | Holstad rød | Arveblå | Marine | Svart |
|---|---|---|---|---|---|---|---|---|---|
| Marine | 14,3 AA | 13,3 AA | 12,3 AA | 10,9 AA | 11,9 AA | 3,1 Stor | 2,6 Nei | – | 1,3 Nei |
| Blå 700 | 7,9 AA | 7,4 AA | 6,9 AA | 6,1 AA | 6,6 AA | 1,7 Nei | 1,4 Nei | 1,8 Nei | 2,3 Nei |
| Blågrå 600 | 6,6 AA | 6,1 AA | 5,7 AA | 5,1 AA | 5,5 AA | 1,4 Nei | 1,2 Nei | 2,2 Nei | 2,7 Nei |
| Rød 700 | 7,8 AA | 7,2 AA | 6,7 AA | 6,0 AA | 6,5 AA | 1,7 Nei | 1,4 Nei | 1,8 Nei | 2,3 Nei |
| Holstad rød | 4,6 AA | 4,3 Stor | 4,0 Stor | 3,5 Stor | 3,8 Stor | – | 1,2 Nei | 3,1 Stor | 3,9 Stor |
| Arveblå | 5,6 AA | 5,2 AA | 4,8 AA | 4,3 Stor | 4,7 AA | 1,2 Nei | – | 2,6 Nei | 3,2 Stor |
| Hvit | – | 1,1 Nei | 1,2 Nei | 1,3 Nei | 1,2 Nei | 4,6 AA | 5,6 AA | 14,3 AA | 17,9 AA |
Holstad rød på hvit holder så vidt (4,6:1). Bruk Rød 700 til rød brødtekst. Rødt og marine oppå hverandre holder aldri til liten tekst.
Lagfarger
Farge som betyr «hvilket lag», i timeplaner, kalendere og lister. Åtte toner med lik lyshet og metning, så ingen lag roper høyere enn et annet. Rødt og blått er holdt utenfor, de er klubbens.
Sett data-lag="1" til "8" og bruk --holstad-lag-flate, -kant og -tekst. Tallet er kontrasten mellom tekst og flate.
Gjør
- Skriv alltid lagnavnet. Fargen hjelper, den forklarer ikke.
- Gi et lag samme farge overalt.
- Bruk flate, kant og tekst fra samme lagfarge.
Ikke gjør
- Lagfarge på knapper, logo eller store flater.
- Lagfarge i innlegg, plakater og trykk. Der er klubben rød og blå.
- Egne toner utenfor de åtte.
Mørk modus
Samme blå familie, snudd: Svart er bakgrunnen, Marine og tonene rundt er flatene, og teksten er Blå 50. Primærknappen blir lys blå med svart tekst. Rødt er fortsatt rødt.
Lagfarger
Slik ser det ut
- Tallet i flaten er kontrasten mot fargen den møter: flater mot tekst, tekst og kanter mot bakgrunnen.
- Skillelinjer er dempet med vilje og holder ikke 3:1. De skiller flater, de bærer ikke innhold. Kant på skjemafelt holder kravet.
- Skalaene og merkevarefargene er de samme. Det er bare rollene som bytter.
- Logo på mørk flate: frilagt hvit eller hovedlogo. Se Bakgrunner.
- Trykk, plakater og innlegg har ikke mørk modus. Der velger du marine eller svart flate selv.
I en app: sett data-color-scheme="dark" på <html>, eller "auto" for å følge enheten. Rød, arveblå, info og varselrød i mørk modus kommer fra Designsystemet og er ikke justert for hånd ennå.
Tildeling i komponenter
| Rolle | Farge |
|---|---|
| Brødtekst og titler | Marine |
| Dempet tekst | Blågrå 600 |
| Primær knapp | Marine. Hover Blå 800, trykket Blå 700 |
| Rød hovedhandling | Holstad rød. Hover Rød 600, trykket Rød 700 |
| Destruktiv | Varselrød, mørkere enn Holstad rød |
| Lys flate / hover / trykket | Blå 100 / Blå 200 / Blå 300 |
| Tonet sidebakgrunn | Blå 50 |
| Skillelinjer og kant på kort | Blågrå 300 |
| Kant på skjemafelt | Blågrå 500 |
| Informasjon | Arveblå |
| Lenker i brødtekst | Marine |
| Fokusring | Marine, 3 px, med hvit innerring |
| Mørk modus | Bakgrunn Svart, flater Marine, tekst Blå 50, primær knapp Blå 300. Se Mørk modus |
Typografi
Tre skrifter, alle gratis.
Skrifter
Bebas Neue
Titler, tall og korte budskap. Maks 8 ord, stort og tett.
- Snitt
- Regular 400 (eneste)
- Reserve
- Impact, Arial Narrow Bold
Inter Tight
Brødtekst, ingress, navigasjon og knapper. Regular for brødtekst, Medium for ingress, knapper og navigasjon, Bold for mellomtitler og uthevinger. Kursiv sparsomt.
- Snitt
- 400, 500, 700 + kursiv
- Reserve
- Helvetica Neue, Arial
Spectral
Sitater. Kursiv, maks ett per side eller innlegg.
- Snitt
- 400 + kursiv
- Reserve
- Georgia
Skala
Brytpunkter
Bare heading 3xl endrer størrelse med skjermen. Alle andre størrelser i skalaen er like på mobil og stor skjerm.
| Skjermbredde | heading 3xl |
|---|---|
| Til 400 px | 56 px |
| 400–1067 px | Vokser jevnt med bredden: 32 px + 6 % av bredden. 70 px ved 640 px, 86 px ved 900 px |
| Fra 1067 px | 96 px |
- Med «mobil» mener merkevaren en skjerm smalere enn 640 px. Der står knapper i full bredde og innhold i én kolonne.
- Trenger en annen tittel å krympe på mobil, gå ett trinn ned i skalaen. Ikke lag egne størrelser.
Regler
Gjør
- Seksjonstitler alltid i Bebas Neue. Mellomtitler (
heading smog mindre) og titler over 8 ord i Inter Tight Bold. - Bebas-titler sporing 0. Bebas-etiketter under 24 px +0,06 em. Inter Tight alltid 0.
- Store Bebas-titler i trykk og SoMe settes tett: 0,9.
- Linjelengde 45–75 tegn i brødtekst, 30–50 i korte tekster.
- Tekst i marine, svart eller hvit — også lenker.
- Uthev med Bold.
Ikke gjør
- Midtstille lengre tekst. Midtstill bare korte titler i sosiale medier.
- Blokkjustere.
- Rød brødtekst. Rød er flater og store titler.
- Understreke, skrive versaler i brødtekst eller bruke flere farger for å utheve.
Knapper
Marine er standard. Holstad rød er for den ene handlingen siden finnes for, som «Meld deg på». Varselrød er for det som ikke kan angres. Bruk knapp når noe skal skje, og lenke når du går til en annen side.
Varianter
| Variant | Bruk | Flate | Tekst | Kant / hover |
|---|---|---|---|---|
| Rød hovedhandling | Den ene handlingen siden finnes for. Maks én per side | Holstad rød | Hvit | — |
| Primær | Hovedhandlingen i en visning, maks én | Marine | Hvit | — |
| Sekundær | Alternativ ved siden av primær | Ingen | Marine | 1 px kant, tonet flate ved hover |
| Tertiær | Lavmælte handlinger i lister og kort | Ingen | Marine | Tonet flate ved hover |
| Destruktiv | Handlinger som ikke kan angres. Teksten sier hva som skjer | Varselrød | Hvit | — |
Størrelser og tilstander
data-size | Bruk | Høyde | Padding | Tekst |
|---|---|---|---|---|
sm | Tette flater: tabeller, filtre, kort | 42 px | 14 px | 16 px |
md | Standard for nett og skjema | 48 px | 16 px | 18 px |
lg | Forsider, kampanjer, mobil | 55 px | 18 px | 21 px |
- Inter Tight Medium, radius 4 px. Bredden følger teksten; full bredde på mobil.
- Hover og trykket endrer flaten i to trinn. Fargene står under Tildeling.
- Avstand mellom knapper: 12 px (
--ds-size-3), både side om side og under hverandre. - Fokus: 3 px marine ring med hvit innerring. Fjernes aldri.
- Laster: spinner i ikonets plass, knappen låses, teksten står.
- Deaktivert sparsomt.
- Ikoner: enkle strekikoner, 2 px strek, runde ender. Ikon bak teksten bare som pil videre.
- På marine og rød flate blir primær hvit med marine tekst; sekundær og tertiær blir hvite.
Regler
Gjør
- Én primærknapp per visning, og høyst én rød knapp per side.
- Verb først, konkret: «Meld deg på», «Last ned terminliste». Helst 1–3 ord, maks 5.
- I skjema: primærknappen først, venstrejustert. På mobil full bredde, primær øverst.
- Flere knapper i en rad: 12 px mellom dem. Brekker raden, er det 12 px mellom linjene også.
Ikke gjør
- «Klikk her» eller «OK». Versaler.
- Rød knapp på rød flate, eller rød knapp i skjema, tabeller og innstillinger.
- Varselrød for noe som kan angres.
- Egne varianter: arveblå, skygger, gradienter eller andre former.
Logo
Fem deler som kan brukes sammen eller hver for seg: navnet («Holstad IL»), ballen, nettet, datoen (12.12.1948) og rammen (rød flate med hvit kantlinje).
Familien
Bruk de ferdige filene. Mangler en variant, spør styret.
- Velg variantHovedlogoen der det er plass, ordmerke eller symbol der det er trangt.
- Velg fargeFlaten logoen skal stå på, bestemmer. Det står under hver fil.
- Last ned eller kopierLast ned til dokumenter, Spond og sosiale medier. Kopier HTML til nettsider: koden lenker rett hit, så logoen alltid er riktig.
Hovedlogo
Merket i ramme: rød flate med hvit kantlinje. Nettside, dokumenter, foto, plakater, drakter. Førstevalget når du er i tvil.
hovedlogo.svgFrilagt logo
Hovedlogoen uten ramme, i én farge. Røde og marine flater, drakter, video, SoMe.
Ensfarget logo
Hele logoen i én farge, med rammen som strek. Trykk i én farge, gravering, stempel, vannmerke.
Ordmerke
«Holstad Volley» på to linjer, uten ball og nett. Nettsidetopp, e-postsignatur, erme, bunntekst. Minst 80 px bredt.
Symbol
Ballen i sirkel. Profilbilder, favicon, app-ikoner, alt under 100 px.
Frisone og minstestørrelse
Frisonen rundt hele logoen er høyden på «I» i «IL», ca. 1/12 av bredden. For symbolet: 1/4 av bredden.
| Variant | Minste bredde på skjerm | Under dette |
|---|---|---|
| Hovedlogo med dato | 160 px | Ta ut datoen |
| Hovedlogo uten dato | 100 px | Bytt til ordmerke eller symbol |
| Ordmerke | 80 px | — |
| Symbol | 24 px | Favicon kan gå ned til 16 px |
Frisonen i piksler
| Variant | Bredde | Frisone på hver side |
|---|---|---|
| Hovedlogo, frilagt og ensfarget | 100 px | 8 px |
| Hovedlogo, frilagt og ensfarget | 160 px | 13 px |
| Hovedlogo, frilagt og ensfarget | 200 px | 17 px |
| Hovedlogo, frilagt og ensfarget | 280 px | 23 px |
| Hovedlogo, frilagt og ensfarget | 400 px | 33 px |
| Symbol | 24 px | 6 px |
| Symbol | 32 px | 8 px |
| Symbol | 48 px | 12 px |
| Symbol | 64 px | 16 px |
Regnet ut fra regelen over og rundet til nærmeste piksel. Andre bredder: del på 12, eller på 4 for symbolet.
Trykk og tekstil: hovedlogo minst 30 mm bred, broderi minst 60 mm med dato.
Bakgrunner
- Rød og svart: frilagt hvit.
- Når bare én farge er mulig: ensfarget marine på lys flate, ensfarget hvit på mørk.
- Rødt tekstil: hovedlogo med hvit kantlinje, som på drakta.
- Foto: hovedlogo på et rolig parti.
- Arveblå og Blågrå brukes ikke som bakgrunn for logoen.
SoMe, nett og ikke gjør
SoMe og nett
- Flaten blir rammen: på rød eller marine flate står logoen frilagt.
- Nettet kan brukes alene, stort og beskåret, i 15–25 % hvit.
- Én logo per flate.
- Med sponsorer: samme høyde, tynn marine skillelinje og frisone mellom.
- Lag og arrangementer bruker den vanlige logoen; lagnavnet står som tekst ved siden av.
Ikke gjør
- Strekk, klem eller roter.
- Bytt farger eller legg på skygge og effekter.
- Skriv ordmerket i en annen skrift.
- Bruk skjermbilder eller små bildefiler.
- Plasser på urolig bakgrunn eller med lav kontrast.
- Lag egne oppsett av delene.
Grafiske elementer
Foto, store tall og ord i Bebas Neue, og fargeblokker i rød eller marine. Bruk ett av hver på en flate.
Fotografi
Bruk bilder fra egne kamper og treninger, ikke stockfoto.
Lov
- Beskjær tett. Tomrom bare der tekst eller tall skal stå.
- Rette horisont, lett justering av lys, kontrast og hvitbalanse.
- Fjerne små forstyrrelser i kanten.
Ikke
- Fargefiltre, duotone, svart-hvitt som stil.
- Kraftig metning eller HDR.
- Sammensatte bilder, utklipp av personer.
Gode motiver
Foto: Bonsak Hammeraas
Samtykke fra alle som er med på bildet. For barn under 15 år fra foresatte.
Store tall og faste fargepar
Ekte tall: draktnummer, resultater, årstall, lagnavn. Minst 60 % av flatens høyde og ut over minst én kant. 1–4 tegn, maks tre linjer. Tallet i tonen over flaten, budskapet i hvitt.
Holstad
Finstad
gratis
1948
i høst
smash
Kombinere
| Oppsett | Foto | Blokk | Logo |
|---|---|---|---|
| Side om side | 1/2 eller 2/3 av bredden | Resten, minst 1/3 | Øverst i blokken |
| Foto over blokk | Øverste 2/3 | Nederste 1/3, tallet stikker opp i fotoet | I blokken |
| Bildet i tallet | Inni tallet, minst 60 % av flaten | Hele flaten rundt tallet | I et hjørne, med frisone |
Gjør
- Budskap og logo på blokken, ikke rett på fotoet.
- Store tall kan krysse fra blokken inn i fotoet — aldri over ansikter.
- Minst en tredjedel av flaten skal være rolig.
- SoMe-titler: maks fem ord, minst 1/8 av bildehøyden.
Ikke gjør
- Tekst rett på urolig foto.
- Flere tall i én flate.
Slik lages et innlegg
- BildetVelg et bilde med tydelig motiv.
- BlokkenVelg rød eller marine blokk.
- TalletFinn ett ekte tall og sett det stort, i tone.
- BudskapetSkriv budskapet i hvitt på blokken og legg til logoen.
Klubbtøy
Rød hjemme, marine borte. Shortsen er alltid marine.
Drakter
- Klubblogoen står på venstre bryst. Leverandørens logo står på høyre.
- Liberoen har motsatt farge: marine når laget spiller i rødt, rød når laget spiller i marine.
Plassering av logo
Venstre og høyre er spillerens, ikke din når du ser på drakta.
- Klubblogoen er hovedlogoen med hvit kantlinje, som på bildene over.
- Klubblogoen og leverandørens logo står i samme høyde.
For utviklere
Merkevaren er bygget inn i et tema for Designsystemet. Alle komponentene med temaet står på komponentsida.
Designsystemet-tema
data-color | Holstad | Bruk |
|---|---|---|
(ingen) / accent | Marine | Standard for alle komponenter og handlinger, også hovedhandlingen |
rod | Holstad rød | Utheving: «Ny»-tagg, merker, røde flater. Den ene røde hovedhandlingen |
arvebla | Arveblå | Støttefargen: tagger, merker, faktaflater og grafikk. Aldri en knapp |
danger | Varselrød | Handlinger som ikke kan angres: slett, meld av |
info | Arveblå | Informasjon: alert, valideringsmelding, «nyttig å vite» |
neutral | Blågrå | Avbryt, tilbake, sekundær informasjon |
Ta i bruk
Lenk rett hit fra appen: én CSS-fil og én JS-fil. Steg for steg står på Kom i gang.
<link rel="stylesheet" href="https://design.holstadvolley.com/v1/holstad-designsystem.css">
<script src="https://design.holstadvolley.com/v1/holstad-designsystem.js" defer></script>Markup og attributter står i Designsystemets dokumentasjon. JS-en gir oppførsel til faner, felt, paginering, forslag, tooltip og dialog.
To tillegg som ikke finnes i Designsystemet: <h1 class="ds-heading" data-size="3xl"> for kampanjetitler, og <blockquote class="holstad-sitat"> for sitater.