Main content

Stijlhandleiding voor inloggen met DigiD, Machtigen, European login, eHerkenning, ouderlijk gezag en wettelijke vertegenwoordiging.

Deze checklist geeft u als aangesloten organisatie richtlijnen voor het weergeven van inlogmiddelknoppen. Door op alle overheidswebsites uniforme inlogstappen te tonen en dezelfde opmaak toe te passen voor inlogmiddelknoppen, logo’s en teksten maken we het inlogproces voor gebruikers makkelijker én betrouwbaarder.

In deze checklist staan richtlijnen voor:

  1. Inloggen met DigiD
  2. Inloggen met een combinatie van inlogmiddelen (DigiD, eHerkenning en European login) 
  3. Inloggen voor jezelf en als gemachtigde met DigiD
  4. Inloggen als gemachtigde met verschillende inlogmiddelen 
  5. Inloggen namens kind en als wettelijk vertegenwoordiger
  6. Opmaakrichtlijnen voor inlogmiddelknoppen
  7. Tekstrichtlijnen voor inlogknoppen
  8. Richtlijn voor faq-vlak bij inlogscherm

Versiegegevens

Publicatiedatum: november 2023
Versie: 1.1

  1. Contrast code is aangepast (7)
  2. Weergave op desktop is toegevoegd (6)
  3. Richtlijnen voor faq-vlak bij inlogscherm (8)

1. Inloggen met DigiD

Kun je alleen inloggen voor jezelf met DigiD? 

Plaats op de webpagina van de dienst die wordt afgenomen de inlogmiddelknop voor DigiD.

Log je in via een portaal of een aparte inlogpagina?

Plaats dan op de website een knop naar ‘Mijn [portaal]’ of ‘Inloggen’. Toon daarna op een nieuwe pagina een overzicht met de inlogmiddelknop voor DigiD.

 

2. Inloggen met een combinatie van inlogmiddelen

Kun je voor jezelf inloggen met DigiD en European login óf kun je voor jezelf inloggen met DigiD en namens een organisatie met eHerkenning?

Plaats op de webpagina van de dienst die wordt afgenomen de twee inlogmiddelknoppen direct onder elkaar.

Kun je voor jezelf inloggen met DigiD en European login, én namens een organisatie met eHerkenning?

Dan heb je met meer dan twee inlogmiddelknoppen te maken. Plaats in dat geval op de webpagina van de dienst die wordt afgenomen een algemene knop met ‘Inloggen’. Toon vervolgens op een nieuwe pagina het overzicht van inlogmiddelknoppen.

Heb je een portaal of een aparte pagina inlogpagina?

Plaats dan op de website een knop naar ‘Mijn [portaal]’ of ‘Inloggen’. Toon daarna op een nieuwe pagina een overzicht met de inlogmiddelknoppen.

 

3. Inloggen voor jezelf en als gemachtigde met DigiD 

Kun je inloggen met DigiD voor jezelf en als gemachtigde? 

Plaats op de webpagina van de dienst die wordt afgenomen de twee inlogmiddelknoppen direct onder elkaar.

Kun je inloggen met DigiD voor jezelf en als gemachtigde, en European login voor jezelf en met eHerkenning namens een organisatie? 

Dan heb je met meer dan twee inlogmiddelknoppen te maken. Plaats in dat geval op de webpagina van de dienst die wordt afgenomen een algemene knop met ‘Inloggen’. Toon vervolgens op een nieuwe pagina het overzicht van inlogmiddelknoppen.

Heb je een portaal of een aparte pagina inloggen?

Plaats dan op de website een knop naar ‘Mijn [portaal]’ of ‘Inloggen’. Toon daarna op een nieuwe pagina het overzicht van inlogmiddelknoppen.

 

4. Inloggen als gemachtigde met verschillende inlogmiddelen 

Kun je met verschillende inlogmiddelen inloggen voor jezelf én als gemachtigde?    

Plaats dan op de webpagina van de dienst die wordt afgenomen, de knoppen: ‘Inloggen’ en ‘Inloggen als gemachtigde’ (toon de knop ‘Inloggen’ als default in een kleur naar keuze). Toon vervolgens op een nieuwe pagina het overzicht van inlogmiddelknoppen.

Kiest een gebruiker voor ‘Inloggen als gemachtigde’, toon dan vervolgens in de knop voor inloggen met DigiD alleen de tekst ‘Inloggen’. De tekst ‘als gemachtigde’, is hier overbodig.

Heb je een portaal of een aparte pagina inloggen?

Plaats dan op de website een knop naar ‘Mijn [portaal]’ of ‘Inloggen’. Toon vervolgens op een nieuwe pagina de keuzes: ‘Inloggen’ en ‘Inloggen als gemachtigde’ (toon de knop ‘Inloggen’ als default in een kleur naar keuze). Toon daarna op een nieuwe pagina het overzicht van inlogmiddelknoppen.

Kiest een gebruiker voor ‘Inloggen als gemachtigde’, toon dan vervolgens in de knop voor inloggen met DigiD alleen de tekst ‘Inloggen’. De tekst ‘als gemachtigde’, is overbodig.

Toon in het overzicht van inlogmiddelknoppen de relevante knoppen voor uw pagina.

 

5. Inloggen namens kind en als wettelijk vertegenwoordiger

Kun je inloggen namens kind of als wettelijk vertegenwoordiger? 

Plaats dan op de webpagina van de dienst die wordt afgenomen, de knoppen: ‘Inloggen’, ‘Inloggen als gemachtigde’, ‘Inloggen namens kind tot 12 jaar’, en een toelichting voor wettelijk vertegenwoordigers (toon de knop ‘Inloggen’ als default in een kleur naar keuze). Toon vervolgens op een nieuwe pagina het overzicht van inlogmiddelknoppen. Kiest een gebruiker voor ‘Inloggen als gemachtigde’, toon dan vervolgens in de knop voor inloggen met DigiD alleen de tekst ‘Inloggen’. De tekst ‘als gemachtigde’, is hier overbodig.

Toelichting voor wettelijk vertegenwoordigers: Bent u bewindvoerder of wettelijk vertegenwoordiger? Kies dan: Inloggen als gemachtigde.

Heb je een portaal of een aparte pagina inloggen?

Plaats dan op de website een knop naar ‘Mijn [portaal]’ of ‘Inloggen’. Toon vervolgens op een nieuwe pagina de keuzes: ‘Inloggen’, ‘Inloggen als gemachtigde’, ‘Inloggen namens kind’ en een toelichting voor wettelijk vertegenwoordigers (toon de knop ‘Inloggen’ als default in een kleur naar keuze). Toon daarna een pagina met een overzicht van inlogmiddelknoppen. Kiest een gebruiker voor ‘Inloggen als gemachtigde’, toon dan vervolgens in de knop voor inloggen met DigiD alleen de tekst ‘Inloggen’. De tekst ‘als gemachtigde’, is hier overbodig.

Toelichting voor wettelijk vertegenwoordigers: Bent u bewindvoerder of wettelijk vertegenwoordiger? Kies dan: Inloggen als gemachtigde.

6. Opmaakrichtlijnen voor inlogmiddelknoppen

Algemeen

  • Knoppen: het formaat van knoppen is vrij te bepalen. Ons advies: X: 20px, Y: 202px, height: 47px, Radius: 8px, Border: 1px, #949494.
  • Lettertypes in knoppen: Titel: RijksoverheidSansWebText-Regular 18px, #000000. Tekst: RijksoverheidSansWebText-Regular 15px, #000000. Tekst over inlogmiddel links, logo rechts.
  • Zoveel knoppen als er inlogmiddelen zijn.
  • Volgorde van knoppen inlogmiddelen advies: onder elkaar, niet naast elkaar, met oog op mobile first: 20px afstand van links en rechts. 15px afstand vanaf de boven en onderkant. Titel groot: RijksoverheidSansWebText-Regular 18px, #000000. Tekst: RijksoverheidSansWebText-Regular 15px, #000000. Tekst over inlogmiddel links, logo rechts.
  • De knoppen voor DigiD inloggen en DigiD inloggen als gemachtigde altijd als bovenste middelen tonen. Gevolgd door eHerkenning, en als onderste European login.
  • Advies voor kleur van knoppen: Background: FFFFFF, Color text: 000000.

Zo ziet de opmaak van de inlogmiddelknoppen eruit op desktop.

 


Logo’s:

De juiste logo’s zijn te vinden op:

  • DigiD: X: 20px, Y: 202px, Width: 336px, Height: 47px, Radius: 8px, Border: 1px, Color border: EDEDED, Fill: FFFFFF. Typeface: RijksoverheidSansWebText-Regular 19px, Color: #000000, X: 40px, Y: 216px, Width: auto, Height: 22px
  • European login / eIDAS: X: 20px, Y: 337px, Width: 336px, Height: 47px, Radius: 8px, Border: 1px, Color border: EDEDED, Fill: FFFFFF. Typeface: RijksoverheidSansWebText-Regular 19px, Color: #000000, X: 40px, Y: 351px, Width: auto, Height: 22px 
  • eHerkenning: X: 20px, Y: 399px, Width: 336px, Height: 47px, Radius: 8px, Border: 1px, Color border: EDEDED, Fill: FFFFFF. Typeface: RijksoverheidSansWebText-Regular 19px, Color: #000000, X: 40px, Y: 413px, Width: auto, Height: 22px

 

Darkmode

  • Voor darkmode blijft de opmaak gelijk aan het eerder gemaakte ontwerp. Alleen de kleur wordt aangepast.
  • Achtergrond pagina: Color:#282828, Text:#FFFFFF
  • Knoppen: Fill: #282828, Border: #EDEDED, Text: #FFFFFF
  • Footer: Fill: #1D1D1D, Text:#FFFFFF
  • Voor de logo’s in de inlogmiddelknoppen gebruiken we darkmode-vriendelijke versies. Je kunt dus dezelfde logo’s gebruiken in darkmode, als die je in de normale modus gebruikt. Deze zijn te vinden op DigiD, European login / eIDAS en eHerkenning. Wanneer een logo toch niet goed zichtbaar is, kan er een outline omheen worden gezet: Outline 1px #EDEDED.


 

7. Tekstrichtlijnen voor inlogknoppen

Algemeen

  • Wijk niet af van de tekst in de inlogknoppen en de inlogmiddelknoppen. 

Inloggen als gemachtigde

  • Gebruik in knoppen en in toelichtingsteksten over machtigingen op de website de tekst ‘Inloggen als gemachtigde’. 
  • Gebruik niet: ‘DigiD Machtigen’, ‘Zaken regelen voor een ander’, ‘Inloggen voor een ander’ etc.
  • Kiest een gebruiker voor ‘Inloggen als gemachtigde’? Toon dat in het overzicht van inlogmiddelknoppen dat vervolgens verschijnt in de knop voor inloggen met DigiD alleen de tekst ‘Inloggen’. De tekst ‘als gemachtigde’, is overbodig.
  • Toon na de keuze voor ‘Inloggen als gemachtigde’, of ‘Inloggen namens kind’ bovenaan het overzicht van inlogmiddelknoppen in plaats van de tekst: ‘Inloggen bij [naam dienstverlener]’, de tekst: ‘Inloggen als gemachtigde bij [naam dienstverlener]’ of ‘Inloggen namens kind bij: [naam dienstverlener]’.
  • Wettelijk vertegenwoordigers loggen ook in via de knop inloggen als gemachtigde. Voeg daarom indien zij ook gebruik kunnen maken van de dienstverlening een toelichting bij de inlogknoppen.  Bent u bewindvoerder of wettelijk vertegenwoordiger? Kies dan: Inloggen als gemachtigde. Zie voorbeeld bij inloggen als vertegenwoordiger.

Engelse tekst

  • Staat er Engelse content op de pagina, vertaal de tekst in de knoppen dan naar het Engels (‘Log in’, ‘Log in as representative’, ‘Log in as a company or organisation’, ‘Log in on behalf of a child’).

8. Richtlijnen voor faq-vlak bij inlogscherm

Algemeen

  • Vragen: 30px van bovenkant. 20px van links / rechts 18px uit elkaar (van bovenaf gerekend). Maximaal 4 vragen. Font: RijksoverheidSansWeb Text-Regular 19px, #000000. 5px ruimte tussen pijl en tekst. Achtergrondkleur: #F3F3F3.