IVBF design system

This page shows the shared layout and components. Use it when changing the visual identity or checking responsive behaviour in both languages and colour modes.

Header, content and footer use the same horizontal frame.--pad-x · --maxw

Typography

One heading scale for every subpage.

The page title and content width are shared by Client, Admin and legal pages. Section eyebrows remain available where they add context.

Shared page heading classes.subpage-heading · .subpage-title

Controls

Buttons and states

Buttons in the header and main content use the same component classes. Check hover, focus and contrast in both themes.

Shared button classes.btn · .btn--primary · .btn--ghost · .btn--sm

Surfaces

Colours and cards

Colours come from tokens.css. Cards use the shared grid and card classes; page CSS only arranges the examples.

--bg

--bg2

--brand

Shared card

The same spacing, border and typography can be reused across pages.

Shared card

The same spacing, border and typography can be reused across pages.

Shared section and card classes.section · .container · .cell-grid · .cell-card