Designsystem

Prinsipper

Stripe-inspirert system under, redaksjonelt sportsuttrykk over. Klubben eier fargene; plattformen eier resten.

  1. 1Gridet er synligTynne guidelinjer gir struktur også i luften mellom innholdet. Innhold starter og slutter på linjene.
  2. 2Lag, ikke bokserFlater skilles med toner, hårlinjer og forsiktige skygger. Kort brukes bare for objekter.
  3. 3Fotografi førstEtt stort, godt bilde fremfor mange små. Mennesker i bevegelse, steder og vær.
  4. 4Informasjon er innholdetTider, steder, resultater og navn. Ingen pyntetekst, ingen oppdiktede tall.
  5. 5Identitet med disiplinSkråformen markerer klubb og fremdrift. Grid, arbeidskontroller og sekundærvalg er rette, så signalet ikke blir dekor.
  6. 6Bevegelse med meningKort og rask: 140–360 ms. Pilen som vokser, menyer som faller på plass. Respekterer redusert bevegelse.
  7. 7Personvern er en del av designetMaskering i bilder er et synlig, gjenkjennelig systemelement.

Grid

12 kolonner på desktop, 8 på nettbrett, 4 på mobil. Maks innholdsbredde 1280 px, marger 40/32/20 px og gap 32/24/16 px. Guidelinjene ligger midt i gapene, så innhold aldri berører en linje. Offentlige seksjoner får dem gjennom <Section>, og linjene fortsetter fra seksjon til seksjon.

Kolonner og guidelinjer på alle kolonnegrenser (variant «all»)

1
2
3
4

Seksjonsgrid (variant «columns»): linje hver tredje kolonne, horisontal regel ved seksjonsskifte

BOC-ryttere i gul klubbdrakt sykler samlet på en fjellvei under Styrkeprøven

Hero-komposisjon

Bilde på kolonne 4–12. Tekstflate på 1–6, lagt over bildet.

Celle 1 · kol. 1–3

Celle 2 · kol. 4–6

Celle 3 · kol. 7–9

Celle 4 · kol. 10–12

Presise delelinjer inne i flater: utforskeren deler seg på linje 4

<Section guides="columns" tone="sunken" rule="top">
  <div className="page grid-page">…</div>
</Section>

/* kolonneskille i en flate som spenner 12 kolonner, lagt nøyaktig på guidelinje 4 */
grid-template-columns: calc((100% - 11 * gap) * 0.25 + 2.5 * gap) 1fr;

Typografi

SF Pro i medium vekt og tett sporing for store overskrifter, den samme skriften i lavere vekter for alt annet. Overskrifter kan fortsette i en roligere tone.

Display

SF Pro Display 500 · 60/60 · mobil 34/35 · −3,2 %

Idrett for hele Oslo.

H1

SF Pro Display 500 · 48/50 · mobil 32/34 · −3 %

Alt som skjer i klubben

H2

SF Pro Display 500 · 36/39 · mobil 26/29 · −2,4 %

Fra lag og grupper

H3

SF Pro Text 600 · 20/26 · mobil 18/23

Trenere og lagledere

Body large

SF Pro Text 400 · 19/30 · mobil 17/27

J16-2 trener tirsdag og torsdag på Voldsløkka.

Body

SF Pro Text 400 · 16/26

Oppmøte ved klubbhuset kl. 11.15 for felles transport.

Small

SF Pro Text 400 · 14/21

Bane 2 er stengt for vedlikehold av kunstgresset.

Label

SF Pro Text 500 · 13/18

Faste treninger

Metadata

SF Pro Text 500 · 12/17 · tabulære tall

13. sep · 18.00–19.30

Eyebrow

SF Pro Text 600 · 14/18 · klubbfarge

Finn din aktivitet

Overline

SF Pro Text 600 · 11/14 · versaler · +8 %

Idretter

Totonet overskrift

Finn din aktivitet

26 lag og grupper. Velg idrett og alder, så ser du hvilke grupper som passer.

Farger

Kjølige, presise nøytraler fra plattformen. Klubbens fem farger skrives inn som CSS-variabler fra klubbens tema.

Plattform: nøytrale

Background

--background

Sunken

--surface-sunken

Muted

--surface-muted

Inverse

--surface-inverse

Border

--border

Guide

--guide-strong

Text primary

--text-primary

Text secondary

--text-secondary

Text muted

--text-muted

Success

--success

Danger

--danger

Focus

--focus

Klubb: Bærum og Omegn Cykleklubb

Primary

--club-primary

Primary hover

--club-primary-hover

On primary

--club-on-primary

Secondary

--club-secondary

Accent

--club-accent

Tint

--club-tint

Samme komponenter, andre klubber

Vinrød

Fotball · J16-2

Seier i siste runde

Prøv gratis
Skoggrønn

Fotball · J16-2

Seier i siste runde

Prøv gratis
Marineblå

Fotball · J16-2

Seier i siste runde

Prøv gratis
BOC-gul

Fotball · J16-2

Seier i siste runde

Prøv gratis
Signaloransje

Fotball · J16-2

Seier i siste runde

Prøv gratis

Radius

Form følger rolle: handlinger og informasjonsgrid er rette, mens badges og løftede innholdsflater kan være mykere. Store redaksjonelle bilder som går kant i kant har rette hjørner.

2 px

Miniatyrer, tagger

3 px

Status

5 px

Kontroller, chips, hover

0 px

Knapper og arbeidskontroller

8 px

Flater, historiebilder

12 px

Hero, utforsker, feature

Flater og lag

Dybde bygges med tonale bånd, hårlinjer og tre nivåer av skygge, aldri glass eller gradienter.

Flate

Hårlinje, ingen skygge. Lister og tabeller.

Kort

shadow-card. Aktivitetsflater, artikkelbokser.

Løftet

shadow-raised. Utforskeren.

Flytende

shadow-float. Hero-tekst, «I dag»-brikken.

Innfelt

Sunken med innvendig linje. Tomme tilstander, segmentkontroll.

Mørk

Klubbens sekundærfarge. Bunntekst.

Knapper og lenker

Skråformen betyr klubbidentitet og fremdrift, og reserveres for én viktig offentlig CTA per flate. Sekundærvalg, filtre, arbeidsflyt og farehandlinger er rette. Alle knapper har 0 px radius; badges og chips beholder sin egen mykere form.

Finn din aktivitetSe hva som skjer denne uken
Admin · rette arbeidskontroller og blekkfarge

Skjema og filtre

Vi sender en engangskode.

FotballSykkelLangrennAlle aldreBarnUngdom

Status

NøytralAktivTil godkjenningAvvistPå forsidenPersonvernredigert
PublisertUtkastAvvistSynligIkke publiserAnonymisert

Bilder og media

Rammen bestemmer formatet, fokuspunktet bestemmer utsnittet. Maskering ligger i bildets egne koordinater og følger med ved enhver beskjæring.

Lag over bilde: tekstflate og informasjonsbrikke

BOC-ryttere i gul klubbdrakt sykler samlet på en fjellvei under Styrkeprøven

Oslo Sportsklubb

Idrett for hele Oslo. Fotball, sykkel og langrenn.

Aktiviteter

Finn din aktivitet: idrett, gren og alder, gruppe

ActivityRow: trening, kamp med resultat, avlyst (klikk for detaljer)

ActivityLine og ActivityDate

    TrainingSchedule

    Ingen faste treninger.

    Redaksjonelt

    standard: liggende og stående utsnitt

    wide

    row

    compact og uten bilde

    Samarbeidspartnere

    Samarbeidspartnere

    Støtter barne- og ungdomsidretten i klubben.

    Personer

    Kristin Bråten

    Hovedtrener

    917 34 562kristin.braten@oslosportsklubb.no

    Marte Solberg

    Lagleder

    995 20 418

    Bevegelse

    --dur-fast · 140 ms
    Hover, farge, pil, knappetrykk
    --dur-base · 200 ms
    Detaljer som åpnes, dialoger
    Meny · 180 ms
    Faller 6 px ned og skaleres fra 98 %
    --dur-slow · 360 ms
    Filterresultater og innhold som kommer inn
    --ease-out
    cubic-bezier(0.22, 0.8, 0.24, 1)
    Redusert bevegelse
    Alle animasjoner og overganger slås av