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
Ziegelhaus
Footer is loading...