Style Guide

Brand Colors

Brand

#14b8a6 (teal-500)

Brand Hover

#0d9488 (teal-600)

Brand Dark

#0f766e (teal-700)

Typography

Heading 1 - Reken. Begrijp. Beslis.

text-4xl md:text-5xl font-bold

Heading 2 - Transparante tools

text-2xl md:text-3xl font-semibold

Heading 3 - Subsection title

text-xl font-medium

Body text - Actuele aannames, transparante formules, en berekeningen die je kunt begrijpen.

leading-relaxed

Buttons

Size Variants

Color Variants

Loading States

Links Styled as Buttons

Go to Tools Learn More
All buttons use design tokens from tokens.css:
  • • Primary: bg-primary, text-primary-foreground
  • • Secondary: bg-secondary, text-secondary-foreground
  • • Ghost: text-fg, hover:bg-muted
  • • Destructive: bg-destructive, text-destructive-foreground
  • • Focus rings: ring-ring (matches --primary)
  • • Sizes: sm (h-8), md (h-10), lg (h-12)

Cards

Standard Card

Rounded corners, subtle border, background with shadow.

Another Card

Consistent padding and styling across all card components.

Tool Cards

Sample Tool 1

Example tool card with consistent styling.

Open tool →

Sample Tool 2

Hover state shows lift effect and arrow animation.

Open tool →

Sample Tool 3

All tool cards use the same layout and spacing.

Open tool →

Spacing System

Container: max-w-5xl mx-auto px-4 sm:px-6 lg:px-8

Section spacing: py-12 sm:py-16

Between sections: mt-12 sm:mt-16

Grid gap: gap-6 (matches vertical spacing)

Cookie Banner Colors

Cookie consent buttons now use design tokens for consistency:

Both buttons use semantic tokens (bg-primary, bg-secondary) for theme-aware styling

Dark Mode

Toggle the theme switcher in the header to see dark mode in action. All colors use design tokens that adapt to the theme.

Light Theme

Uses --bg, --fg, --primary tokens
Automatically adjusts all colors

Dark Theme

Uses same tokens with dark values
Seamless theme switching

✓ Smooth transitions (200ms duration)
✓ Respects system preference
✓ Persists via localStorage
✓ All colors use semantic design tokens