# Schulhaus Tirol · Design system migration spec

> Source: https://www.schulhaus.tirol  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in editorial web design, using a restricted palette and classic typography to create a powerful, high-end brand presence for a hospitality business.

## 1. Identity DNA

Schulhaus Tirol’s design system is built on the tension between heritage and contemporary editorial craft—much like a traditional Tyrolean inn reimagined as a design gallery. Every choice, from type to spacing, serves that dual identity: the warmth of craft and the clarity of modern composition.

**One-liner:** Schulhaus Tirol is a culinary destination that blends Tyrolean tradition with surprising, modern gastronomy.
**Keywords:** schulhaus · tirol · restaurant · gastronomy · traditional · surprising
**Analogy:** A traditional Tyrolean alpine inn reimagined with modern editorial design.

## 2. Color

The color system is deliberately restrained, anchored by a warm terracotta orange that dominates the canvas, paired with stark black for typography and imagery. This high-contrast pairing creates immediate visual impact while maintaining a sense of warmth and place.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FF7D50` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,0.25)` | divider |

**Color principle:** A bold, warm terracotta dominates the canvas, paired with stark black typography and imagery.

The principle is singular focus: one dominant hue and black, allowing photography and typography to carry the narrative without chromatic competition.

## 3. Typography

The typographic voice is split between two distinct roles—a classic transitional serif handles display headlines and body text, lending an editorial gravitas, while a monospaced typeface provides functional clarity for labels and navigation. The contrast between these two systems creates a clear visual hierarchy.

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Main site title 'Schulhaus Tirol' |
| h2 | 26px | 1.4 | 400 | normal | Introductory text and subtitles |
| body | 16px | 1.5 | 400 | 0.48px | Paragraph text and legal information |
| caption | 12px | 1.4 | 400 | 0.48px | Captions and secondary labels |

**Type rules:**
- Use monospaced typography for small labels, navigation links, and technical details.
- Use serif typography for large display headlines, body copy, and all primary text.
- Maintain generous letter-spacing for monospaced text to ensure high legibility.

## 4. Spacing

Rhythm is established through generous whitespace, which separates visual blocks and gives the large typography room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace is used to separate visual blocks and emphasize the large typography.

## 5. Surfaces

Surfaces are handled with restraint: borders are thin and functional, used for delineation rather than decoration. The single, heavy shadow is reserved for specific floating elements, preventing visual clutter while maintaining a flat, layout-driven hierarchy.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 25px 50px -12px rgba(0, 0, 0, 0.25)
- **Borders:** Thin 1px solid lines for cookie consent dividers; 2px solid borders for checkboxes.

## 6. Layout

The layout operates on an asymmetric editorial grid, where large text blocks and images are placed in unconventional positions, often overlapping. This structure rejects rigid symmetry in favor of a curated, gallery-like arrangement that guides the eye with intention.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** An asymmetric, editorial grid where large text blocks and images are placed in unconventional positions.

## 7. Motion & Interaction

Motion is minimal and purposeful, used only to smooth state changes on interactive elements through consistent 0.4s color transitions. The goal is refinement, not distraction—animation serves usability, not decoration.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 0.4s color and background transitions for interactive elements.

- **Hover:** Subtle color transitions triggered by the cubic-bezier easing function.
- **Click:** Standard pointer cursor for interactive elements, default for static text.
- **Transition:** Consistent 0.4s transition applied to color, fill, stroke, and background properties.
- **Keyboard:** Standard browser focus states with visible outlines.

## 8. Voice & Don'ts

The editorial voice is warm and welcoming, yet sophisticated, using large, timeless serif typography for headlines and direct, monospaced text for calls to action. It avoids any hint of casualness or trend-driven design language.

- **Tone:** Warm, welcoming, yet sophisticated and surprising.
- **Headline style:** Large, classic serif typography that feels editorial and timeless.
- **CTA style:** Direct, bold, and functional using monospaced text for buttons and links.
- **Avoid:** Avoid using multiple accent colors or complex gradients. / Avoid overly rounded corners or 'soft' UI elements. / Avoid using sans-serif typography for headlines or body text.

### Don'ts
- ❌ Don't use sans-serif typography — screenshot shows a classic transitional serif used for all primary text.
- ❌ Don't use multiple vibrant accent colors — screenshot shows a strict two-tone palette of terracotta and black.
- ❌ Don't use rounded corners on buttons or cards — screenshot shows sharp, rectangular edges.
- ❌ Don't use heavy box shadows for elevation — screenshot shows a flat, layout-driven hierarchy.
- ❌ Don't center-align all content — screenshot shows a mix of left-aligned and floating text blocks.
- ❌ Don't use complex gradients — screenshot shows solid, high-saturation background colors.

They deliberately avoid sans-serif typography, multiple accent colors, rounded corners, heavy shadows, and complex gradients—embracing restraint as a core design principle.

## System Prompt (paste into AI tool)

```
Schulhaus Tirol is a premium gastronomy website that uses an editorial layout to present traditional Tyrolean dining with a surprising, modern twist. The design is dominated by a warm terracotta background (#FF7D50) paired with stark black (#000000) typography and imagery. Typography relies heavily on a classic transitional serif for display and body text, complemented by a functional monospaced font for labels and links. Critical design rules include avoiding sans-serif fonts, rejecting rounded corners in favor of sharp geometric shapes, and maintaining a flat visual hierarchy without heavy shadows. The layout uses an asymmetric grid that allows text and images to overlap, creating a curated, gallery-like feel that emphasizes craftsmanship and tradition.
```