# EK Designguide til små undervisningswebsites

Denne fil samler de vigtigste retningslinjer fra `ek_designguide_2026_light.pdf` og omsætter dem til praktiske valg for små, enkle og responsive websites til undervisningsbrug.

## Sådan skal guiden anvendes

Når du skaber en HTML-side på baggrund af denne guide:

1. Følg alle krav under responsivitet og tilgængelighed.
2. Brug Business blue, Daylight og Pencil grey som grundfarver.
3. Vælg højst to yderligere accentfarver.
4. Brug semantisk HTML.
5. Saml HTML og CSS i én fil, medmindre andet er angivet.
6. Opfind ikke tekst, links, datoer eller oplysninger.
7. Afslut med at kontrollere resultatet efter tjeklisten.
8. Fortæl kort, hvis et krav ikke kunne opfyldes.

## Grundprincipper

- Design enkelt, tydeligt og responsivt.
- Brug EK's visuelle identitet konsekvent: logo, farver, typografi, luft og direkte dansk tekst.
- Prioriter læsbarhed og hurtig orientering frem for dekorative effekter.
- Tænk mobile first: siden skal fungere godt på telefon, tablet og desktop.
- Brug korte tekster, klare overskrifter og tydelige links eller knapper.
- Undgå komplekse layouts, tunge animationer og elementer, der stjæler fokus fra undervisningsindholdet.

## Logo

Brug som udgangspunkt det primære EK-logo:

```html
<img src="RGB_EK_logo_Business blue.png" alt="Erhvervsakademi København" class="site-logo">
```

Retningslinjer:

- Primær logofarve er **Business blue**.
- På farvet baggrund anvendes logoet bedst på **Daylight** eller en anden lys flade med høj kontrast.
- Logoet skal altid have tydelig luft omkring sig.
- Respektafstanden bør svare til cirka højden på EK-logoets bogstaver.
- Logoet må ikke beskæres så hårdt, at formen ikke længere kan genkendes.
- Brug det horisontale primære logo, når der er plads.
- Brug en mere kompakt/vertikal variant kun, hvis layoutet kræver det.

Praktisk CSS:

```css
.site-logo {
  display: block;
  width: min(260px, 70vw);
  height: auto;
}

.site-header {
  padding: 24px;
}
```

## Primær Farvepalet

Brug den primære palet som fundament. Til små undervisningssites er det ofte nok med Business blue, Daylight, Pencil grey og 1-2 accentfarver.

| Navn | HEX | RGB | Anbefalet brug på websites |
| --- | --- | --- | --- |
| Business blue | `#0038A8` | `0, 56, 168` | Primær brandfarve, logo, links, knapper, overskriftsdetaljer |
| Business blue light | `#0C53ED` | `12, 83, 237` | Hover/focus, sekundære links, små highlights |
| Campus green | `#ACB504` | `172, 181, 4` | Accent, labels, små visuelle markører |
| Sunlit energy | `#E8D285` | `232, 210, 133` | Varme infobokse, rolige fremhævninger |
| Daylight | `#F8EDCA` | `248, 237, 202` | Lys baggrund, logo-baggrund, rolige sektioner |
| Academic fire | `#FE4C61` | `254, 76, 97` | Vigtig accent, advarsler, deadline-markeringer |
| Students blush | `#FCA28A` | `252, 162, 138` | Bløde highlights, sekundære sektioner |
| Poolside study | `#33ABB5` | `51, 171, 181` | Accent til faglige bokse, ikoner, visuelle skel |
| Pencil grey | `#333333` | `51, 51, 51` | Brødtekst og neutral tekst |

CSS-variabler:

```css
:root {
  --ek-business-blue: #0038A8;
  --ek-business-blue-light: #0C53ED;
  --ek-campus-green: #ACB504;
  --ek-sunlit-energy: #E8D285;
  --ek-daylight: #F8EDCA;
  --ek-academic-fire: #FE4C61;
  --ek-students-blush: #FCA28A;
  --ek-poolside-study: #33ABB5;
  --ek-pencil-grey: #333333;

  --ek-bg: #F8EDCA;
  --ek-text: #333333;
  --ek-primary: #0038A8;
  --ek-focus: #0C53ED;
}
```

## Sekundær Farvepalet

Den sekundære palet kan bruges til variation, temaer, fagområder eller kampagnesektioner. Brug den sparsomt, så sitet stadig føles som EK.

| Navn | HEX |
| --- | --- |
| Notebook | `#5FAA83` |
| Library mint | `#B0DEB7` |
| Study buddy | `#6284BC` |
| Cram session | `#50027A` |
| Mindful break | `#CBA3FF` |
| Midterm matcha | `#97AF72` |
| Sticky Note | `#EBD93B` |
| Pitch perfect | `#FFBF74` |
| Graduation day | `#FC5002` |
| Brainstorm bubblegum | `#FFD9DF` |
| Campus wi-fi | `#6E6EE2` |
| In the zone | `#00256B` |
| Pink wednesday | `#FF8D9D` |
| Team spirit | `#6D003E` |

Webregel:

- Vælg 1 primær brandfarve og højst 1-2 accentfarver pr. side.
- Brug ikke alle farver på samme lille site.
- Sørg altid for god kontrast mellem tekst og baggrund.
- Brug `Pencil grey` eller `Business blue` til tekst, ikke lyse accentfarver på lyse baggrunde.

## Typografi

EK's primære typografi er **Oso**, som findes både som sans og serif.

I den officielle identitet:

- **Oso Sans** bruges til brødtekst, UI, knapper og klare informationer.
- **Oso Serif Italic** bruges som del af overskrifter for at skabe et mere karakterfuldt EK-udtryk.
- Overskrifter starter typisk i serif italic og slutter i sans/regular for fokus og dynamik.
- Brødtekst skal være letlæselig og have passende linjeafstand.

Hvis Oso ikke er tilgængelig på et lille undervisningssite, så brug systemnære fallback-fonts:

```css
:root {
  --ek-font-sans: "Oso Sans", Aptos, Calibri, Arial, sans-serif;
  --ek-font-serif: "Oso Serif", "Aptos Serif", Georgia, serif;
}
```

Anbefalet webtypografi:

```css
body {
  margin: 0;
  font-family: var(--ek-font-sans);
  color: var(--ek-text);
  background: var(--ek-bg);
  font-size: 16px;
  line-height: 1.4;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  color: var(--ek-primary);
  line-height: 1.1;
}

h1 {
  font-size: 2.5rem;
}

h1 em {
  font-family: var(--ek-font-serif);
  font-style: italic;
  font-weight: 400;
}

p {
  max-width: 68ch;
}

@media (min-width: 720px) {
  h1 {
    font-size: 4rem;
  }
}
```

Brug `em` i overskrifter, hvis du vil efterligne EK's serif italic-kontrast:

```html
<h1><em>Find din vej</em> på EK</h1>
```

## Layout og Grid

Retningslinjer:

- Brug tydelige marginer omkring logo og tekst.
- Lad logoets højde inspirere afstande i header og hero-sektioner.
- Brug luft aktivt: det skal være let at skanne siden.
- Hold layoutet stabilt og enkelt.
- Brug fuldbredde sektioner med en begrænset indre bredde.
- Undgå at pakke alt ind i kort; brug kort kun til gentagne elementer som links, ressourcer eller opgaver.

Praktisk layout:

```css
.page {
  min-height: 100vh;
}

.section {
  padding: clamp(32px, 7vw, 88px) 24px;
}

.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.stack {
  display: grid;
  gap: 16px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
```

## Links, Knapper og Fokus

Knapper og links skal være tydelige, korte og handlingsorienterede.

Gode CTA-tekster:

- `Find din uddannelse`
- `Se dine muligheder`
- `Søg ind nu`
- `Læs mere`
- `Åbn opgaven`
- `Gå til materialet`

Undgå:

- `Klik her`
- Lange knaptekster
- Institutionstung tekst som ikke siger, hvad brugeren får ud af handlingen

CSS:

```css
a {
  color: var(--ek-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--ek-primary);
  border-radius: 4px;
  background: var(--ek-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.button:hover,
.button:focus-visible {
  background: var(--ek-focus);
  border-color: var(--ek-focus);
}

:focus-visible {
  outline: 3px solid var(--ek-academic-fire);
  outline-offset: 3px;
}
```

## Tone of Voice

EK's tone er seriøs, opløftende, direkte og modtagerorienteret.

Skriv sådan:

- Tal til den studerende, kursisten eller underviseren.
- Sæt modtagerens udbytte først.
- Skriv konkret og nede på jorden.
- Brug korte sætninger.
- Brug gerne bydeform, når der er en klar handling.
- Peg på muligheder frem for begrænsninger.

Eksempler:

- Skriv `Se dine muligheder` frem for `Se vores udvalg`.
- Skriv `Find din uddannelse` frem for `Se vores uddannelser`.
- Skriv `Søg ind nu` frem for `Klik her, hvis du ønsker at søge ind`.
- Skriv `Kurset gør dig i stand til...` frem for abstrakte formuleringer om værktøjer og redskaber.

## Billeder og Grafik

Retningslinjer:

- Brug autentiske billeder fra EK, studieliv, undervisning, lokaler og faglige situationer.
- Billeder må gerne vise studerende og undervisere i naturligt samspil.
- Brug naturligt lys og troværdige situationer.
- Hvis AI-genererede billeder bruges, skal det markeres tydeligt på eller under billedet.
- Undgå generiske stockfotos, hvis autentisk EK-materiale findes.

Grafiske elementer:

- EK-logoet kan bruges som mønster eller grafisk element, men kun hvis formen stadig kan genkendes.
- Fugleikonet kan bruges som let, sekundært grafisk element.
- Grafiske elementer må ikke gøre undervisningsindholdet sværere at læse.

## Responsivitet

Alle små EK-websites bør være responsive som standard.

Minimumskrav:

- Ingen vandret scroll på mobil.
- Logo, navigation og overskrifter skal skalere pænt.
- Tekst skal have god linjelængde, helst maks. ca. 65-75 tegn pr. linje.
- Interaktive elementer skal være lette at trykke på, mindst ca. 44px høje.
- Brug fleksible grids med `auto-fit`, `minmax()` og `clamp()`.
- Test ved ca. 375px, 768px og desktop-bredde.

## Tilgængelighed

- Brug semantisk HTML: `header`, `main`, `section`, `nav`, `footer`.
- Brug kun én `h1` pr. side.
- Sørg for synlige focus states.
- Skriv meningsfulde linktekster.
- Brug `alt`-tekst på informative billeder.
- Brug tom `alt=""` på rent dekorative billeder.
- Vælg farvekombinationer med god kontrast.

## Praktisk Startskabelon

```html
<header class="site-header">
  <a href="/">
    <img src="RGB_EK_logo_Business blue.png" alt="Erhvervsakademi København" class="site-logo">
  </a>
</header>

<main>
  <section class="section">
    <div class="section-inner stack">
      <h1><em>Se dine muligheder</em> på EK</h1>
      <p>Kort, konkret introduktion til undervisningsforløbet, materialet eller aktiviteten.</p>
      <a class="button" href="#materialer">Gå til materialet</a>
    </div>
  </section>
</main>
```

## Hurtig Checklist Før Udgivelse

- Logoet vises korrekt og har luft omkring sig.
- Business blue, Daylight og Pencil grey bruges konsekvent.
- Der er høj kontrast på al tekst.
- Sitet fungerer på mobil.
- CTA'er er korte og handlingsorienterede.
- Teksten handler om modtagerens udbytte.
- Billeder er autentiske eller tydeligt markeret som AI-genererede.
- Ingen persondata, direkte mails eller fulde navne er offentliggjort uden grundlag.
- Links virker.
- Siden er enkel nok til at en underviser hurtigt kan rette den.