← Back to Home

KB huisstijl implementation

On December 3, 2025, the site design was updated to align with the official KB (Koninklijke Bibliotheek) house style guidelines. This ensures visual consistency with other KB digital properties.

What is huisstijl?

“Huisstijl” is Dutch for “house style” or “corporate identity”. It encompasses the visual elements that make an organization recognizable: colors, typography, logos, and design patterns.

The KB (Koninklijke Bibliotheek - Royal Library of the Netherlands) maintains a comprehensive huisstijl to ensure consistent branding across all its digital and print materials.

Color palette

The site uses the official KB brand colors defined as CSS custom properties:

Color swatches

The KB color palette creates a warm, professional appearance with gold as the signature accent color:

• Primary accent: Gold (#cba052) - used for highlights and interactive states
• Text links: Dark blue (#001a70) - ensures readability and accessibility
• Backgrounds: Beige (#ecdcc8) - provides subtle warmth without distraction

Design elements updated

Implementation approach

1. CSS custom properties

All KB colors are defined as CSS variables in the :root selector:

:root {
  --kb-gold: #cba052;
  --kb-gold-dark: #8f6a2a;
  --kb-blue: #407ec9;
  --kb-blue-dark: #001a70;
  --kb-pink: #ef6079;
  --kb-pink-dark: #621323;
  --kb-beige: #ecdcc8;
  --kb-teal: #9cdbd9;
  --kb-light-blue: #96bded;
}

This approach makes future updates easy - change the variable once, and it updates everywhere.

2. Consistent hover states

Gold accents appear on interaction throughout the site:

• Cards get a gold border on hover
• Buttons show gold highlights
• Focus states use the KB blue for accessibility

3. Dark mode support

KB colors are adapted for dark mode while maintaining brand recognition:

• Background becomes dark gray
• Text becomes light
• Accent colors remain recognizable
• Contrast ratios are maintained

4. WCAG compliance

All color combinations maintain minimum 4.5:1 contrast ratio for WCAG 2.1 Level AA compliance:

• Dark blue text on white: 12.6:1 ratio
• White text on black footer: 21:1 ratio
• Gold on white: used only for decorative elements

Footer design

The footer received special attention to match the KB website style:

Before

• Dark blue background (#001a70)
• Gold headings
• Light blue links
• Social icons with gold circular backgrounds

After

• Black background (#000)
• White headings
• White links
• Social icons without backgrounds (cleaner look)
• White KB logo (matches dark background)

Source materials

The KB huisstijl implementation was based on:

1. Official KB huisstijlportaal documentation - internal brand guidelines
2. Color palette reference images - official color specifications
3. CSS variables from KB digital properties - extracted from existing KB websites

These materials are stored in .kbhuisstijl-docs/ for reference.

Why brand consistency matters

Implementing the KB huisstijl serves several purposes:

Technical files

The huisstijl is implemented in:

Related pages

• How this site was built - Full development story
• Accessibility, privacy & licensing - WCAG compliance details

Last updated: December 2025