Merkenboom

De Standaard voor Publieke Code heeft twee kanten: de menselijke kant en de beschrijvende kant. Het design system erft van een merk per kant. Daartussen staat Code for NL, de community waar de Nederlandse vertaling thuis is. Elk token en elk component op deze pagina laat zien waar het vandaan komt.

Bronmerk 1 · --osw-*

Opensourcewerken.nl

Open samenwerken

De menselijke kant: samen organiseren, meetups, community of practice.

Kleur: paars en roze
Lettergroottes, hoeken en schaduwen (niet het lettertype)
Componenten om mee te doen: header, banner, kaarten, knoppen, widgets

Bronmerk 2 · --cfnl-*

Code for NL

Thuisbasis

De community waar de Nederlandse vertaling thuis is: samenwerken aan een open, eerlijke en inclusieve digitale overheid.

Manieren van meedoen: meedoen, meeleren, meekijken
Kerncijfers van de community
Afzender-vermelding met het oranje woordmerk
Niet: Anton en Roboto, die botsen met de leesbaarheidsregels

Bronmerk 3 · --sfpc-*

Standard for Public Code

Opensource werken

De beschrijvende kant: hergebruik, leesbaarheid, kwaliteit.

Zwarte tekst op wit, grijze achtergrond buiten de pagina
Links altijd onderstreept, de kleur van de streep geeft de status
Lettertypen: Mulish voor koppen, systeemlettertype voor tekst
Maximale regellengte
Componenten om te beschrijven: eisen-lijsten, printbaar op A4

Eigen merk · --color-*, --font-*, --space-* …

Standaard voor Publieke Code

Componenten gebruiken alleen deze merktokens, nooit direct de tokens van een bronmerk.

Wie wint bij een conflict?

Onderwerp	Opensourcewerken.nl	Code for NL	Standard for Public Code	Keuze
Lopende tekst	Paars en zwart	Grijs	Altijd zwart	sfpc Zwart, want leesbaarheid gaat voor
Koppen	Paars	Rood, Anton, hoofdletters	Zwart	osw Paars, zodat de pagina herkenbaar en warm blijft
Links	Paars	Groen	Zwart met een gekleurde onderstreping	sfpc Zwart, met een blauwe streep voor onbezocht en een paarse (osw) streep voor bezocht
Lettertype	Rijksoverheid Sans	Anton en Roboto (Google Fonts)	Mulish voor koppen, systeemlettertype voor tekst	sfpc Mulish en systeemlettertype. Rijksoverheid Sans is alleen voor de Rijksoverheid, en wij zijn geen overheid
Regellengte	Niet vastgelegd	Niet vastgelegd	Maximaal ongeveer 35em	sfpc `--measure`
Accentkleur	Roze	Oranje, rood, groen	Geen	osw Roze. Oranje cfnl alleen in de afzender
Meedoen-kleuren	Geen	Groen, blauw, paars	Geen	cfnl Alleen als stip of rand, want groen en blauw hebben te weinig contrast voor tekst

Bestanden

Laag	Bestand
Bronmerk 1	`_sass/tokens/_opensourcewerken.scss`
Bronmerk 2	`_sass/tokens/_codefornl.scss`
Bronmerk 3	`_sass/tokens/_standardforpubliccode.scss`
Eigen merk	`_sass/tokens/_spc.scss`
Atomen, moleculen, organismen	`_sass/atoms/`, `_sass/molecules/`, `_sass/organisms/`
Templates	`_layouts/` en `_sass/templates/`
Alles samen	`assets/css/design-system.scss`

Tokens

Kleur

Paars is de primaire kleur en roze het accent. Zet op roze altijd paarse tekst. Witte tekst op roze heeft te weinig contrast.

Primair--color-primary#42145fosw

Accent / header--color-accent#f092cdosw

Primair hover--color-primary-hover#2e0d43eigen

Primair subtiel--color-primary-subtle#f3edf7eigen

Accent subtiel--color-accent-subtle#fce9f5eigen

Tekst--color-text#000000sfpc

Tekst gedempt--color-text-muted#5c5c5ceigen

Pagina--color-surface#ffffffsfpc

Buiten de pagina--color-background#f5f5f5sfpc

Meedoen--color-meedoen#97bd2ecfnl

Meeleren--color-meeleren#348faacfnl

Meekijken--color-meekijken#56165ccfnl

Afzender--color-endorsement-highlight#eb8c3acfnl

Linkstreep--color-link-underline#0000ffsfpc

Linkstreep bezocht--color-link-visited-underline#42145fosw sfpc

Linkstreep binnen pagina--color-link-internal-underline#a9a9a9sfpc

Typografie

Koppen gebruiken Mulish en lopende tekst het systeemlettertype van het apparaat sfpc. Opensourcewerken.nl gebruikt Rijksoverheid Sans, maar dat lettertype is alleen voor de Rijksoverheid. Wij zijn geen overheid, dus we nemen het niet over. De lettergroottes komen van opensourcewerken.nl osw. De maximale regellengte (--measure) komt van de Standard for Public Code sfpc.

Enorm 50/62

Heel groot 42/54

Groot 30/38

Normaal 24/30

Klein 20/28

Tekst groot 18/26: publieke organisaties ontwikkelen en onderhouden samen software en beleid.

Tekst normaal 16/24: de Standaard voor Publieke Code is een set criteria die publieke organisaties ondersteunt.

Tekst klein 14/20, gedempt: metadata, bijschriften en voetnoten.

Vorm en schaduw

Hoeken en schaduwen komen van opensourcewerken.nl osw.

--corner-sm 4px

--corner-md 6px

--corner-lg 8px

--corner-xl 20px

--shadow-soft-bottom

--shadow-soft-center

Ruimte

Een raster van 4px eigen.

Token	Waarde	Voorbeeld
`--space-1`	4px
`--space-2`	8px
`--space-3`	12px
`--space-4`	16px
`--space-5`	24px
`--space-6`	32px
`--space-7`	48px
`--space-8`	64px

Atomen

De kleinste bouwstenen. Je kunt ze niet verder opdelen zonder dat ze hun betekenis verliezen.

Link sfpc

Een link is zwart en altijd onderstreept. De kleur van de streep laat zien waar een link naartoe gaat: blauw als je de pagina nog niet hebt bezocht, paars als je er al was, grijs voor een plek op dezelfde pagina. Voorbeeld: de Nederlandse vertaling.

Knop osw

Primair Secundair Accent

Op donker Accent op donker

Label osw

Criterium Community call

Meedoen-label cfnl

De drie manieren om mee te doen, zoals op codefor.nl. De kleur zit in de stip, de tekst blijft zwart.

Meedoen Meeleren Meekijken

Eis-woord sfpc

Moet · Zou moeten · Optioneel

Label en invoerveld eigen

Label

Woordmerk osw

Standaard voor Publieke Code

Moleculen

Een molecuul is een kleine groep atomen die samen één taak doen.

Formulierveld eigen

Label + invoerveld.

E-mailadres

Knoppengroep osw

Knop + knop.

Meld je aan Lees meer

Melding eigen

Een gekleurd blok met tekst en links.

Elke maand is er een community call. Meld je aan voor de nieuwsbrief, dan krijg je de uitnodiging.

De presentatie van de criteria is online te bekijken.

Linklijst osw

Een lijst van links, elk met een pijl.

Afzender cfnl

Tekst + Code for NL-woordmerk, in de stijl van het logo op codefor.nl. Te gebruiken als een pagina een afzender nodig heeft.

Thuisbasis: Code for NL

Organismen

Een organisme is een herkenbaar deel van een pagina, opgebouwd uit moleculen en atomen.

Bovenaan elke pagina: een paarse balk met een kop, inleiding en een knoppengroep. Op de site staat er een foto achter, met een paarse overloop van links naar rechts zodat de tekst leesbaar blijft. De standaardfoto staat in _config.yml (hero_image) en is per pagina te overschrijven in de front matter.

Samen publieke code maken

Doe mee met de community rond de Standaard voor Publieke Code.

Meld je aan Lees de standaard

Kaart osw

Afbeelding + titel + tekst + actie. Gebruik de uitgelichte variant voor het belangrijkste item.

Uitgelicht

Uitgelichte kaart

Voor het belangrijkste item op een pagina. Krijgt een roze rand.

Standaardkaart

Witte kaart met zachte schaduw, hoeken van 8px en een paarse titel.

Met een manier van meedoen cfnl krijgt de kaart een gekleurde bovenrand:

Meedoen

Pas de standaard toe

Toets je eigen codebase aan de criteria.

Meeleren

Community call

Elke maand ervaringen delen met andere organisaties.

Meekijken

Nieuwsbrief

Blijf op de hoogte zonder dat je meteen hoeft mee te doen.

Kerncijfers cfnl

Grote getallen die laten zien hoe groot de community is. De getallen hieronder zijn voorbeelden.

16criteria in de standaard
12community calls per jaar
3manieren van meedoen

Community-blok cfnl osw

De community “Werken aan Publieke Code” met de twee manieren om mee te doen, onder elkaar in een opvallend roze blok: de meetup en de nieuwsbrief. Op de homepage staat het in de rechterkolom, op mobiel boven de documenten. Gebruik {% include community.html %}. De teksten staan in _data/community.yaml.

Werken aan Publieke Code

MeetupKom naar de volgende meetupBekijk de events
Blijf op de hoogteMeld je aan voor de nieuwsbriefMeld je aan

Documentenlijst sfpc

Documenten als lijst in plaats van kaarten: titel, taal, beschrijving en een actie. De hele rij is klikbaar. De documenten op de homepage staan in _data/documents.yaml.

Standaard voor Publieke Code (NL) NLNederlandse vertaling van de Standaard voor Publieke Code.Lees online
Standard for Public Code (upstream) ENThe Standard for Public Code is a set of criteria.Read online

Titel + linklijst, zoals het blok “Direct naar” op opensourcewerken.nl. Met link-list--described krijgt elke link een korte uitleg eronder. Zo staat “Meer manieren om mee te doen” op de homepage, onder het community-blok.

Eisen-lijst sfpc

De lijst met eisen bij elk criterium van de standaard. Elke eis begint met een eis-woord. De teksten hieronder zijn voorbeelden.

Alle broncode die in gebruik is moet openbaar gepubliceerd zijn.
De broncode zou moeten gepubliceerd worden voordat hij in gebruik genomen wordt.
Een changelog bijhouden is optioneel.

Aftiteling eigen

Credits zoals aan het eind van een film: een zwarte achtergrond, één gecentreerde kolom en per sectie een rol met de namen onder elkaar. Logo’s zijn wit, zonder blokje eromheen. Een naam zonder logo is ook goed. De namen komen uit _data/credits.yaml, de HTML uit _includes/credits.html. Gebruik voor een ministerie geen Rijkslogo, want dat is alleen voor de overheid zelf.

Een nieuwe naam toevoegen:

- role: Organisatie meetups
  credits:
    - name: Naam van de organisatie of persoon
      url: https://example.org
      logo: /assets/img/credits/naam.png   # optioneel: wit logo, transparante achtergrond

Onderaan elke pagina: de aftiteling op zwart.

Templates

Een template is een paginaskelet zonder echte inhoud.

Template	Bestand	Opbouw
`default`	`_layouts/default.html`	Banner (als `hero_title` gezet is) → inhoud (`.prose`) → footer met aftiteling

Voor een pagina met een rechterkolom gebruik je .sidebar-layout met __aside (eerst in de HTML, op mobiel bovenaan) en __main.

Een nieuwe pagina is een Markdown-bestand met deze front matter:

---
layout: default
title: Paginatitel
hero_title: Kop in de banner      # optioneel
hero_text: "Inleiding, met **Markdown**"  # optioneel
---

Pagina’s

Een pagina is een template met echte inhoud.

Pagina	Bestand	Template
Startpagina	`index.html`	`default`, met banner, documentenlijst (`_data/documents.yaml`) en community-blok in de rechterkolom (`_data/community.yaml`)
Design system	`design-system.md`	`default`, met banner en Markdown-inhoud

Design system