AUDLA Nordic Design System

Explore our complete Nordic design system showcasing typography, colors, and components used throughout the Ziegelhaus website.

Nordic Typography System

Nordic Heading

Welcome to Ziegelhaus

Usage: Main titles, hero headings
Font: Inter, sans-serif
Weight: 300 (light)
Style: Normal

Nordic Subheading

Restaurant & Biergarten

Usage: Section headings, labels
Font: Inter, sans-serif
Weight: 400 (normal)
Style: Normal

Typography Hierarchy

Hero Title (H1)

Class: .nordic-heading
Font: Inter, sans-serif
Weight: 300 (light)
Size: 3xl → 6xl (responsive)

Section Heading (H2)

Class: .nordic-subheading
Font: Inter, sans-serif
Weight: 400 (normal)
Size: 2xl → 4xl (responsive)

Body text and descriptions. This is how regular content appears throughout the website with clean Nordic typography.

Class: .nordic-body
Font: Inter, sans-serif
Weight: 300 (light)
Size: base → xl (responsive)

Caption Text

Class: .nordic-caption
Font: Inter, sans-serif
Weight: 300 (light)
Usage: Small text, captions, labels

Nordic Color Palette

Nordic Blue

neutral-50

neutral-200

neutral-600

neutral-900

Nordic Sage

nordic-sage-50

nordic-sage-200

nordic-sage-500

nordic-sage-700

Nordic Cream

nordic-cream-50

nordic-cream-100

nordic-cream-200

nordic-cream-300

Nordic Accent

nordic-accent-50

nordic-accent-200

nordic-accent-500

nordic-accent-600

Usage Examples

Hero Section

Welcome to Ziegelhaus

Restaurant & Biergarten

Section Layout

Our Cuisine

Discover our refined cuisine that combines Bavarian tradition with contemporary creativity.

CSS Classes Reference

.nordic-heading - Main hero titles

.nordic-subheading - Section headings

.nordic-body - Body text and descriptions

.nordic-caption - Small text and captions

.nordic-gradient - Light Nordic gradient

.nordic-gradient-dark - Dark Nordic gradient