Visual Identity & Style Guide
Visual Identity & Style Guide (DC v0.3.1)¶
Info
Bron: Disconnect Collective Style Guide Version 0.3.1 (MIT License, © 2025 DC). Definieert brand identity, kleuren, typography en UI-componenten voor alle 11 domeinen. Implementatie via Hugo + SCSS (BEM) + Woodpecker CI.
Brand Kleuren — 4 Primaire Kleuren¶
Digital Blue
#3a7fd2
Technologie, connectiviteit, digitale transformatie
Human Red
#df5b5b
Menselijkheid, warmte, creativiteit
Fusion Purple
#8b49a6
Integratie mens & technologie, synergie
Sound Gold
#dfbc29
Audio, muziek, klank als verbinding
Gradient: digitalToHuman — lineair van Digital Blue #3a7fd2 naar Human Red #df5b5b (symboliseert transitie technologie → mens).
Domain-Specifieke Accentkleuren¶
| Domein | Kleur | Hex | Voorbeeld | Niveau |
|---|---|---|---|---|
| DC | Human Red | #df5b5b |
N1 Org | |
| IV | Digital Blue | #3a7fd2 |
N3 Core | |
| PIPE | Fusion Purple | #8b49a6 |
N3 Core | |
| AXIS | Sound Gold | #dfbc29 |
N3 Core | |
| BNP | Professional Green | #40c463 |
N1 Primary | |
| BNI | Personal Cyan | #2fbef2 |
N1 Primary | |
| EcoX | Eco Green | #65d67e |
N1 Community | |
| THRIVE | Vitality Orange | #f79a3e |
N1 Satellite | |
| BU | Binary Violet | #d24bf5 |
N1 Satellite |
Typography¶
| Element | Font | Size | Weight | Gebruik |
|---|---|---|---|---|
| H1 | Inter, sans-serif | 3.5rem | 800 | Paginatitels, hero sections |
| H2 | Inter, sans-serif | 2.5rem | 700 | Sectiekoppen |
| H3 | Inter, sans-serif | 1.5rem | 600 | Subsecties |
| Body | Inter, sans-serif | 1.1rem | 400 | Lopende tekst, paragraphs |
| Small | Inter, sans-serif | 0.9rem | 400 | Captions, labels, metadata |
| Code | Monospace | 0.95rem | 400 | Code blocks, technische termen, CLI commands |
Logo Specificaties¶
| Variant | Bestand | Gebruik |
|---|---|---|
| Primary Full | disconnect-collective-logo.svg |
Standaard logo, headers, documentatie |
| Simplified | disconnect-collective-simplified-logo.svg |
Favicon, kleine ruimtes (<48px) |
| Banner | disconnect-banner.svg |
Full-width headers, wiki banners |
| Enhanced | disconnect-logo-enhanced.svg |
Presentaties, marketing |
| Footer | disconnect-logo-footer.svg |
Footer plaatsing |
| Light | disconnect-logo-light.svg |
Donkere achtergronden |
| Transparent | disconnect-logo-transparent.svg |
Overlays, watermarks |
Regels: Min. 32px height • Max 60px in headers • 50% logo-height clear space • SVG preferred • Nooit vervormen, stretchen of kleuren wijzigen
UI Componenten & Badge Systeem¶
Stable
#4CAF50
Productie-klare componenten
Experimental
#FF9800
Beta / proof-of-concept
Deprecated
#F44336
Verouderd / wordt verwijderd
v0.3.1
#2196F3
Versie-indicatie (SemVer)
Hugo Implementatie & Woodpecker CI¶
Frontend — Hugo SSG — Static site generator SCSS met BEM methodologie CSP-compliant JavaScript → Build — Woodpecker CI — SCSS compile → CSS Hugo build → /public Style lint + accessibility check → Deploy — Codeberg Pages — docs.dc.codeberg.page {prefix}.codeberg.page Per-domein subdomeinen
Taal & Terminologie Standaarden¶
| Regel | Correct (UK English) | Fout (US English) |
|---|---|---|
| -ise suffix | organise, specialise, realise | organize, specialize, realize |
| -our suffix | colour, behaviour, favourite | color, behavior, favorite |
| -re suffix | centre, metre, fibre | center, meter, fiber |
| -ogue suffix | dialogue, catalogue, analogue | dialog, catalog, analog |
| programme vs program | “programme” (algemeen), “program” (code) | Alleen “program” voor alles |
Warning
Anti-FAGAM Beleid: Vermijd alle referenties naar Facebook/Meta, Apple, Google, Amazon, Microsoft. Gebruik vendor-neutrale terminologie. Prefereer open-source voorbeelden en referenties. Gebruik inclusieve taal. Volg domein-specifieke terminologiestandaarden.
Changelog¶
| Versie | Datum | Wijziging |
|---|---|---|
| 0.1.0 | 2026-02-24 | Initiële versie — DC v0.3.1 style guide, kleuren, typografie, UK/US spelling |