Designretning
Her er det grundlæggende design som Lea har lavet. I kan se det helt foldet ud i figma. Det er ikke 100% 1:1, men så vidt muligt en 99%-tolning, så vi kan matche designet så vidt muligt, så det også kan fungerer på web.
Primære farver
Asfalt sort
#3C3C3B
Farven #3C3C3B udstråler en klar og rolig energi af tillid, stabilitet og intelligens. Den symboliserer klarhed, overblik og professionalisme, samtidig med at den rummer en følelse af frihed, vision og fremtidstro.
Landshold Rød
#C53A43
Farven #C53A43 udstråler en stærk og levende energi af passion, mod og livsglæde. Den symboliserer styrke, handlekraft og selvtillid, samtidig med at den rummer en varm følelse af kærlighed, intensitet og emotionel dybde.
Fremadskuet Turkisgrøn
#9BE2C1
En farve, der ånder lethed og mulighed.
Den repræsenterer nye begyndelser, personlig udvikling og troen på, at forandring er mulig.
#9BE2C1 er følelsen af at tage det første skridt – og blive mødt med åbenhed.
Sekundære farver
BG farve #1
#C9C4BF
BG farve #2
#EDEAE3
BG farve #3
#C9C4BF
Farven #C9C4BF udstråler en blød og afdæmpet elegance af ro, balance og tidløshed. Den symboliserer neutralitet, harmoni og raffinement, samtidig med at den rummer en følelse af jordforbindelse, tryghed og stille sofistikation.
Highlight stroke
Overkskrift med rød highlight
Overkskrift med fremadskuet tyrkisgrøn
Overkskrift med fremadskuet tyrkisgrøn
88%
Highlighted kan enten stå alene, og være bredt eller smalt, og stå alene i en blok.
Det kan også bruges til ved at vælge Highlight til sin overskrift, og så markerer ord som får en fremhævet baggrund i Overskrift 2, som skalerer
Men er det meget lange highlights vil de “bryde” på mobiler, så man kan fx vælge kun at highlighte et ord i stedet for to.
Knapper (standard)
“Overblik” – Primære Sort – #3C3C3B
Primære Sort – #3C3C3B / Sekundær BG #3 FAF9F6
Primære Turkisgrøn – #9BE2C1 / Primære Sort – #3C3C3B
Primære Rød – #C53A43 / Sekundær BG #3 FAF9F6
Knapper (mindre)
Bruges til mindre bokse, som nyheder og artikler
Alle knapper bliver sat i versaler, så man skal være obs på at skrive korrekt i dem. Så her skal det være “Læs nyhed” og ikke “læs Nyhed” fx. Det hele kommer dog til at se ud som “LÆS NYHED”.
Knapper med sportsikoner og vandmærke
Vandmærke 10% opacity #FAF9F6
Knapper med sportsikoner
Primære Sort – #3C3C3B / Sekundær BG #3 FAF9F6
Knapper med sportsikoner
Primære Sort – #3C3C3B / Sekundær BG #3 FAF9F6
Vandmærke 10% opacity #FAF9F6
Standard placering.
Sektion med dobbelt vandmærke
Vandmærke 10% opacity #3B3E39
Alternativ placering
Hvilken træning søger du?
Find en træning nær dig – se alle OMBOLDs tilbud inden for fodbold, floorball, gang/løb og badminton i hele Danmark.
Sektion med centreret vandmærke
Vandmærke 50% opacity #EDEAE3
Centreret
Sabrinas historie
Som teenager følte Sabrina sig udenfor. I dag spiller hun ombold – og har fundet fællesskab, styrke og troen på sig selv.

Eksempler på farvekombinationer
Vores årbog for 2025 er netop udkommet.
Vores årbog for 2025 er netop udkommet.
Vores årbog for 2025 er netop udkommet.
Vores årbog for 2025 er netop udkommet.
Vores årbog for 2025 er netop udkommet.
Vores årbog for 2025 er netop udkommet.
Hvordan fungerer det
grundlæggende layout?
Her har vi en <section> som er sat til fuld bredde (100%) af den får en padding på 5vh top og bund og 5vw i siderne.
I den kan I sætte andre grupper som bliver “styret af layoutet” som default. Se her:
En sektion (h3)
Denne her gruppe i fuld bredde får netop den padding som margin. Denne gruppe er ikke sat til at indvendige blokke bruger indholdsbredderne defineret at temaet.
En gruppe i sektionen (h3)
Denne gruppe er fuld bredde men er sat til at indvendige blokke bruger indholdsbredderne defineret at temaet. Så teksten her defaulter til 900px i bredden. Og skalerer på mindre skærme.
Bred bredde (h3)
Bliver 1256px bred… hvis der er plads ellers minimerer den indtil 100% – 5vw i bredden.
Ingen bredde (h3)
Bliver 1200px bred… hvis der er plads ellers minimerer den indtil 100% – 5vw i bredden.
Kolonner
I kan også bruge kolonner som I har lyst de følger samme principper som grupperne mht. bredde.
Men fordi de er kolonner kan man også styre luften mellem de enkelte kolonner.
I kan også bruge kolonner som I har lyst de følger samme principper som grupperne mht. bredde. Dem her er bredde.
Men fordi de er kolonner kan man også styre luften mellem de enkelte kolonner. De får 24px som default.
