Brand Design System Deep Dive – Buitengewoonglasvezel

1. Brand Overview

Buitengewoonglasvezel (presented via Caiway.nl in this case) has a clear, utility-first digital language. This is fibre-optic broadband for everyday users, not an avant-garde interface experiment. The design reads as pragmatic — the visual vocabulary is built to be understood, navigated, and clicked. That means: high-contrast primary colour, minimal type complexity, generous spacing, and interactive states that say “you can click me.”

The vibe is functional with a sprinkle of friendliness. They use a deep, robust blue (#00529c) as the anchor. This choice immediately signals trust, professionalism, and competence — a hue you find in tech, corporate, and government portals. The supporting neutral palette is light (#d6d6d6 grey) and pure black, which keeps visuals clean while letting blue do the branding heavy lifting. There’s no sign of playful colour explosions — it’s about clarity and the brand’s authority.

Typography sits firmly in the sans-serif space; no custom typefaces from Google or Adobe, no variable font trickery. The entire hierarchy is consistently built around a single point-size (15px) in different weights. It's a minimalist approach that conveys stability but forgoes headlines with bold visual heft. It’s uniform — perhaps too uniform — which creates predictability (a plus for UI consistency) but risks flatness when you need to shout.

Structurally, the site plays well with modular spacing. Values like 7.5px, 22.5px, and 56.25px are repeated often, so you feel rhythm in paddings and margins across components. Components float in clean card environments, sometimes with gentle radii (15px, 60px), sometimes with pure geometry (0px for certain buttons). Borders are soft grey, never heavy blacks.

The result is a brand system you could easily hand off to a dev team without drowning in rules. It’s not crafted to win a design award — it’s built to communicate product tiers, to guide sign-up flows, and to keep you from bouncing. And it works because it’s understated, coherent, and has a singular primary colour as the focus.

2. Color System

2.1 Primary Colors

The primary brand colour is #00529c (RGB 0,82,156). It’s a deep cobalt leaning into trust-heavy tech blue territory. This hue is everywhere: buttons, links (especially important links), focus outlines. It sits nicely against white surfaces and offers excellent contrast for both UI affordance and WCAG compliance in most light contexts.

Psychologically — blue is about reliability and calm authority. For a fibre-optic broadband provider, it signals a dependable backbone service. When compared to competitors like Ziggo (orange) or KPN (green), Buitengewoonglasvezel’s blue differentiates with a more corporate, infrastructure-heavy tone. Less lifestyle, more “We’ll keep your internet solid.”

2.2 Complete Palette

CSS variables exist for functional contexts too:

• --swiper-theme-color: #007aff — Likely specific to Swiper component UI (sliders/navigation bullets).
• --tw-ring-color: rgba(59,130,246,.5) — Utility ring highlight with translucency; probably Tailwind default.
• --tw-ring-offset-color: #fff — Ring offset to ensure separation from background.

2.3 Color Relationships

Blue vs grey: The blue pops against grey without clashing. Against black, it can lose contrast with small text, so usage wisely limits that pairing to UI outlines or accent links.

Contrast accessibility: #00529c against white offers a 5.6:1 contrast — comfortably WCAG AA for normal text. #d6d6d6 against white is extremely low contrast (minimal legibility); hence grey is only applied to subtle, non-essential content.

No dark mode palette observed. The brand’s system is locked into a light UI framework — you’d need to spin a separate dark token set for accessibility in night themes.

2.4 Usage Guide

• Use Primary Blue (#00529c) for clickable elements, main CTA buttons, active link states, and focus borders.
• Pair Primary Blue with white backgrounds for maximum legibility.
• Grey (#d6d6d6) only belongs in non-critical borders and UI dividers — avoid text unless explicitly de-emphasising content.
• Black (#000000) is your default for body copy; don’t soften it unless adjusting for disabled states.
• Avoid running Primary Blue text on Black background — poor readability.
• Keep functional blues like #007aff isolated to their respective widgets (don’t mix into global palette unless necessary).

3. Typography

3.1 Font Families

All styles use generic sans-serif. No declared custom families, no imported Google or Adobe Fonts, no variable fonts. This means the visual weight and character widths change per platform default (Arial, Helvetica, etc.), but the system avoids dependencies.

Source: The data shows "sources": { "googleFonts": [], "adobeFonts": false, "variableFonts": false }.

Fallback stacks are basically browser defaults because no primary font is loaded.

3.2 Type Scale

Here’s every extracted type style:

3.3 Hierarchy

There’s no real size hierarchy — almost everything is 15px. Hierarchy comes from weight and spacing adjustments. Heading-1 might just be visually grouped or coloured differently rather than resized. Captions drop to 12px to signal secondary context (e.g., labels, footnotes).

Pros: This is extremely consistent in UI — you won’t see text jumping sizes unpredictably. Cons: Without larger headline sizes, the brand misses opportunities for typographic drama. Sections rely on weight (400 vs 600/700) to define importance. In fibre-internet landing pages, that’s fine — clarity wins.

4. Spacing & Layout

4.1 Spacing Scale

It’s a custom scale — not pure 4px or 8px. Repeating values (with frequency counts) reveal the rhythm:

4.2 Layout

Breakpoints (px):

• 601, 640, 768, 1024, 1280, 1510, 1536

This suggests they operate beyond Tailwind’s defaults, adding 601 and 1510px as custom thresholds. Likely: 601px to catch early tablet portrait, 1510px for large desktop grid scaling.

Responsive approach: standard mobile-first, scaling paddings and column count upwards. No exotic grid revealed.

5. Visual Elements

Border Radius

Values:

• 3.75px — Buttons (medium confidence)
• 7.5px — li, div
• 8px — dialog
• 15px — div
• 32px — span
• 60px — span, div (full-round cards or avatars)

This means small controls are subtly rounded, cards have more radius, avatars/round badges go up to 60px (big pill/circle look).

Shadows

One shadow found:

• rgba(0, 0, 0, 0.3) 0px 32px 68px 0px — low confidence, rare usage. Heavy blur — probably applied only to modals or prominent overlays.

Otherwise, it’s a flat design relying on borders for element separation.

Borders

• 1px solid #d6d6d6 — li, div
• 1px 0px 0px solid #d6d6d6 — top dividers
• 0px 0px 1px solid rgb(20, 20, 20) — bottom dividers
• 2px solid #00529c — button outlines
• Variants with partial sides for tables/dividers

Borders are crisp and mostly 1px — positive restraint.

6. Components

6.1 Buttons

Outline Link Button

Default:

• background: transparent
• colour: #00529c
• padding: 15px
• border-radius: 0px
• outline: rgb(0, 82, 156) none 0px
• font-weight: 600
• font-size: 15px

Hover:

• background: rgba(0,0,0,0.05)
• colour unchanged
• opacity: 0.85

Focus:

• background: #00529c
• colour: rgb(180 180 180/var(--tw-placeholder-opacity))
• outline: none

Secondary Button (white bg outline blue)

Default:

• background: #ffffff
• colour: #00529c
• padding: 15px
• radius: 3.75px
• border: 2px solid #00529c
• font-weight: 600
• font-size: 15px

Hover:

• opacity: 0.85
• background: transparent

Primary Filled Button (blue bg, white text)

Default:

• background: #00529c
• colour: #ffffff
• padding: 15px
• radius: 3.75px
• border: 2px solid #00529c

Hover:

• opacity: 0.85
• background: transparent

States are minimal. No disabled explicitly defined in data (likely handled with opacity or grey swap).

6.2 Links

Two styles:

1. Black text, weight 400

   • Default: #141414, no underline
   • Hover: #00529c, underline

2. Blue text, weight 600

   • Default: #00529c
   • Hover: same colour, underline on hover

6.3 Forms

Inputs are absent in extracted data — likely generic HTML with default styling overridden per case. No custom focus states reported here.

6.4 Cards

No explicit card class found, but given spacing/border values:

• padding: 22.5px or 56.25px for big hero cards
• radius: 15px
• border: 1px solid #d6d6d6
• Shadow: none or modal-level heavy drop

7. Design Tokens

:root {
  /* Colors */
  --color-grey-light: #d6d6d6;
  --color-primary-blue: #00529c;
  --color-black: #000000;
  --color-swiper-theme: #007aff;
  --color-ring: rgba(59,130,246,.5);
  --color-ring-offset: #fff;

  /* Typography */
  --font-family-base: sans-serif;
  --font-size-base: 15px;
  --font-size-caption: 12px;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.6;
  --line-height-caption: 1.2;

  /* Spacing */
  --space-3: 3px;
  --space-3_75: 3.75px;
  --space-5_625: 5.625px;
  --space-7_5: 7.5px;
  --space-9_375: 9.375px;
  --space-11_25: 11.25px;
  --space-15: 15px;
  --space-16_875: 16.875px;
  --space-22_5: 22.5px;
  --space-28_125: 28.125px;
  --space-30: 30px;
  --space-56_25: 56.25px;

  /* Border Radius */
  --radius-3_75: 3.75px;
  --radius-7_5: 7.5px;
  --radius-8: 8px;
  --radius-15: 15px;
  --radius-32: 32px;
  --radius-60: 60px;

  /* Border styles */
  --border-1-grey: 1px solid #d6d6d6;
  --border-2-primary: 2px solid #00529c;

  /* Shadow */
  --shadow-heavy: rgba(0, 0, 0, 0.3) 0px 32px 68px 0px;
}

8. AI Coding Assistant Prompt

# Buitengewoonglasvezel Design System Specification

You are a Buitengewoonglasvezel design expert. Build UIs matching their visual language exactly.

## Brand Context
Buitengewoonglasvezel values functional clarity and trust-first presentation. Blue is authority, grey is subtle separation, black is text. Typography is simple sans-serif, consistently sized at 15px, with weight shifts defining hierarchy.

## Color Palette
- Light Grey: #d6d6d6 — borders, dividers, subtle backgrounds
- Primary Blue: #00529c — CTAs, links, buttons, active indicators
- Black: #000000 — core text, icons
- Swiper Theme Blue: #007aff — component-specific (sliders)
- Ring Highlight Blue (semi-transparent): rgba(59,130,246,.5) — focus rings
- Ring Offset White: #fff — separates ring from background

## Typography
- Font Family: sans-serif (system defaults)
- Sizes:
  - Base: 15px, weights 400/600/700, line height 1.6
  - Caption: 12px, weight 700, line height 1.2
- Use 400 for body text, 600 for important links, 700 for strong labels/buttons.

## Spacing & Grid
Base spacing unit: 3.75px adjusted multiples.
Scale: 3px, 3.75px, 5.625px, 7.5px, 9.375px, 11.25px, 15px, 16.875px, 22.5px, 28.125px, 30px, 56.25px.
Map:
- Buttons padding: 15px
- Card padding: 22.5px
- Section spacing: 56.25px

## Border Radius
- sm: 3.75px — buttons
- md: 7.5px — lists, small boxes
- dialog: 8px
- card: 15px
- pill: 32px
- circle: 60px — avatars/images

## Shadows & Depth
Flat design — single heavy shadow for prominent overlays:
- rgba(0,0,0,0.3) 0px 32px 68px 0px

## Component Specifications

### Primary Button
Default:
- background: #00529c
- color: #ffffff
- padding: 15px
- radius: 3.75px
- border: 2px solid #00529c
- font-size: 15px
- font-weight: 600
Hover:
- opacity: 0.85
- background: transparent
Focus:
- outline: none
Active: same as hover
Disabled: reduce opacity to 0.5

### Secondary Button
Default:
- background: #ffffff
- color: #00529c
- padding: 15px
- border-radius: 3.75px
- border: 2px solid #00529c
Hover:
- opacity: 0.85
- background: transparent

### Navigation Links
- Black Links: #141414, weight 400, no underline default, underline + blue on hover.
- Blue Links: #00529c, weight 600, underline on hover.

### Input Fields
Not specified in extraction — match button border radius 3.75px, border 1px solid #d6d6d6, padding 15px. On focus: border-color #00529c, ring color rgba(59,130,246,.5).

### Cards
- background: #fff
- padding: 22.5px
- border-radius: 15px
- border: 1px solid #d6d6d6
- no shadow except modals

## Layout & Responsive Rules
Breakpoints px: 601, 640, 768, 1024, 1280, 1510, 1536.
Max content width: 1280px on regular desktop layouts.
Mobile padding: 15px, desktop padding: 22.5px.

## Interaction Rules
- Transition all state changes at 150ms ease.
- Focus indicators use blue ring or blue background shift.
- Hover opacity changes for buttons (0.85)

## DO List
- Use only `#00529c` for primary interactions
- Keep spacing multiples to provided scale
- Always pair Primary Blue with white or light grey
- Apply border radii consistently across similar components
- Maintain line-height at 1.6 for all base text

## DON'T List
- Don't introduce unlisted colours
- Don't mix sharp and rounded corners in same module
- Don't shadow every card — reserve heavy shadow for overlays
- Don't shrink base button padding
- Don't override font family with decorative typefaces

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #00529c;
  color: #fff;
  padding: 15px;
  border-radius: 3.75px;
  border: 2px solid #00529c;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 150ms ease;
}
.btn-primary:hover { opacity: 0.85; background: transparent; }
```

Secondary Button:
```css
.btn-secondary {
  background: #fff;
  color: #00529c;
  padding: 15px;
  border-radius: 3.75px;
  border: 2px solid #00529c;
  font-size: 15px;
  font-weight: 600;
}
.btn-secondary:hover { opacity: 0.85; background: transparent; }
```

Card:
```css
.card {
  background: #fff;
  border-radius: 15px;
  padding: 22.5px;
  border: 1px solid #d6d6d6;
}
```

9. Summary

TL;DR: Buitengewoonglasvezel uses a stripped-down digital visual system: deep primary blue, pure sans-serif at a fixed size, soft neutrals, and disciplined spacing. The brand’s design language is cohesion + function over flair.

Brand Keywords: trust-heavy, minimal-sans, grid-disciplined, flat-ui, blue-dominant