DOCSEARCHbyAlgolia
Submit Docs

Utrecht Design System

website·Indexed 30 days ago

https://nl-design-system.github.io/utrecht/

A comprehensive design system for the City of Utrecht, providing guidelines and components for designers and developers. It includes documentation for UI components (such as Buttons, Alerts, and Accordions) with implementation details for HTML/CSS, React, Web Components, and Vue, as well as Figma templates, typography, color palettes, and accessibility guidelines compliant with WCAG.

Tokens
15.9K
Snippets
52
Records
108
Agent score
75%

What's inside Utrecht Design System

  1. Overview of the Utrecht Design System

    The Utrecht Design System is a community-maintained open source collection of design choices and code used to create accessible, robust, and consistent presentation layers for the Municipality of Utrecht's websites and apps. It aims to prevent duplicate work and ensure that digital services are inclusive and user-friendly for all citizens, including those with disabilities. The system is linked to the NL Design System to remain aligned with national government digital developments.

  3. Overview of Utrecht Design System resources for designers

    The Utrecht Design System provides a comprehensive set of resources for designers creating digital products for the municipality of Utrecht. Key available resources include:

    • Figma integration and setup guides
    • Branding components and assets
    • Official corporate identity colors and typography (including primary fonts and alternatives)
    • Design guidelines specifically for internal applications
    • Instructions for creating prototypes using Figma and templates.

  5. Structure web content using the Inverted Pyramid

    Organize web content starting with the most essential information (the conclusion) at the top, followed by explanations and background details (the inverted pyramid).

    Key structural elements:

    • Introduction: The first paragraph must contain the most important information and the focus keyword for SEO.
    • Paragraphs: Keep them short (2 to 10 sentences). Limit sentences to a maximum of 15 words. Use a mix of simple and compound sentences.
    • White Space: Use actual paragraph breaks (Enter) rather than line breaks (Shift+Enter).

  6. Use the Heading component for document structure

    The Heading component is used to create headings within a page's heading structure. It should be configured at the appropriate hierarchical level (e.g., H1, H2, H4) to ensure correct document accessibility and semantic structure.
    # The Quick Brown Fox Jumps Over The Lazy Dog

## The Quick Brown Fox Jumps Over The Lazy Dog

#### The Quick Brown Fox Jumps Over The Lazy Dog

  9. Use Top Task icons for primary services

    These icons represent the most frequently searched tasks and services. They should be used primarily on homepages and overview pages.
    <!-- Examples of Top Task icon classes -->
<i class="utrecht-icon-rijbewijs"></i>
<i class="utrecht-icon-paspoort"></i>
<i class="utrecht-icon-melding-klacht"></i>
<i class="utrecht-icon-verhuizen"></i>
<i class="utrecht-icon-afval"></i>
<i class="utrecht-icon-toeslag"></i>
<i class="utrecht-icon-trouwen"></i>
<i class="utrecht-icon-afspraak-maken"></i>
<i class="utrecht-icon-vervoersvoorziening"></i>
<i class="utrecht-icon-afval-container"></i>
<i class="utrecht-icon-afval-containerpas"></i>
<i class="utrecht-icon-afval-kalender"></i>
<i class="utrecht-icon-afval-scheiden"></i>
<i class="utrecht-icon-bewijsstukken"></i>
<i class="utrecht-icon-bijstand"></i>
<i class="utrecht-icon-bouwproject"></i>
<i class="utrecht-icon-college-b-w"></i>
<i class="utrecht-icon-container-bio"></i>
<i class="utrecht-icon-dakloos"></i>
<i class="utrecht-icon-parken"></i>
<i class="utrecht-icon-parkeren-bedrijven"></i>
<i class="utrecht-icon-parkeren-betalen"></i>
<i class="utrecht-icon-kroon"></i>
<i class="utrecht-icon-markt"></i>
<i class="utrecht-icon-parkeervergunning"></i>
<i class="utrecht-icon-park"></i>
<i class="utrecht-icon-grofvuil"></i>
<i class="utrecht-icon-horeca"></i>
<i class="utrecht-icon-kerstbomen"></i>
<i class="utrecht-icon-klachten"></i>
<i class="utrecht-icon-laadpaal"></i>
<i class="utrecht-icon-fiets"></i>
<i class="utrecht-icon-gemeenteraad"></i>
<i class="utrecht-icon-energie-vergoeding"></i>
<i class="utrecht-icon-virus"></i>
<i class="utrecht-icon-werken"></i>
<i class="utrecht-icon-woning-zoeken"></i>
<i class="utrecht-icon-verkiezingen"></i>
<i class="utrecht-icon-vluchtelingen"></i>
<i class="utrecht-icon-omgevingsvisie"></i>
<i class="utrecht-icon-omgevingswet"></i>
<i class="utrecht-icon-openingstijden"></i>
<i class="utrecht-icon-nieuwsbrief"></i>

  10. Use Conventional Commit syntax for Design System contributions

    To maintain an overview of changes and enable automatic release notes, all commits must follow the Conventional Commits specification. The format requires a type, subject, and body. Scope and footer are optional.
    <type>(<scope>): <subject>

<body>

<footer>

    Example:

    style(kleuren): blue-30 verwijderd

--utrecht-blue-30 is vervangen door --utrecht-blue-35.

PR close #44450

  11. Understand the purpose and utility of icons

    Icons serve as a simplified visual representation of an object or principle, gaining specific meaning through their surrounding context. Their primary utilities include:

    • Bridging Language Gaps: Providing a common visual language that transcends text.
    • Visual Feedback: Offering immediate visual cues that are often faster to process than text.
    • Increasing Engagement: Enhancing visual interest to draw user attention to specific page elements or navigation paths.