Design System

Ingenieurbuero Krieger GmbH -- Phase 1 Foundation

Typography

h1 -- InterVariable 48px / 700

Heading 1 -- Ingenieurbuero Krieger

h2 -- InterVariable 40px / 700

Heading 2 -- Leistungen im Ueberblick

h3 -- InterVariable 28px / 600

Heading 3 -- Elektrische Anlagen

h4 -- InterVariable 23px / 600

Heading 4 -- DGUV Vorschrift 3

h5 -- InterVariable 19px / 600

Heading 5 -- Pruefintervalle

body -- 16px / 1.6 line-height

Body text at 16px with 1.6 line-height. This paragraph shows the primary text color on white background, using the Inter Variable font. The generous line-height provides comfortable reading for longer text passages about electrical engineering services. Das Ingenieurbuero Krieger bietet umfassende Dienstleistungen im Bereich der elektrischen Sicherheitstechnik.

.text-muted -- grey-500 (#637189)

Secondary text in muted grey -- used for supplementary information and descriptions.

.text-small -- 14px

Small text at 14px -- used for captions, labels, and fine print.

a -- primary blue with hover state

Link style -- primary blue with underline on hover

Color Palette

Primary

Primary #3670E0

Primary Dark #1B3A6B

Primary Hover #2B5BC0

Neutrals

Grey 900 #1A2332

Grey 800 #2D3748

Grey 700 #4A5568

Grey 500 #637189

Grey 300 #CBD5E0

Grey 200 #E2E8F0

Grey 100 #EDF2F7

Grey 50 #F7FAFC

White #FFFFFF

Accent

Accent #E8A838

Grid -- 3 Columns

Collapses to 2 columns at 1024px, 1 column at 768px.

Leistung 1

Card demonstrating the service card layout with rounded corners and subtle shadow.

Leistung 2

Cards sit side by side on desktop, stack vertically on mobile.

Leistung 3

Hover state shows slightly elevated shadow for interactivity.

Grid -- 2 Columns

Collapses to 1 column at 768px.

Two Column Layout

Used for content that pairs well side-by-side.

Responsive Behavior

Resize your browser to see the breakpoint transitions.

Visual Properties

Border Radius

Cards use 6px radius -- modern without being playful.

Shadows

Subtle depth with soft shadows. Hover for elevation change.

Spacing

8px base grid. Generous whitespace between sections (80px).