Haarte Zeiten - Comprehensive Style Guide

Introduction

This style guide defines the visual foundations and components for the "Haarte Zeiten" brand. It ensures a consistent appearance across all digital touchpoints and serves as a binding reference for designers and developers.

Color Palette

Our color palette conveys professionalism and trustworthiness while appearing modern and inviting at the same time. Each color has a specific area of application and should be used according to its defined function.

Midnight Blue
#102A43

Primary color for text and important UI elements. Conveys seriousness and professionalism.

Ice Blue
#EAF1F4

Background color for large areas. Creates a bright, friendly atmosphere.

Copper
#9F5719

Accent color for call-to-actions and important interaction elements.

Coal Black
#2E2E2E

For strong contrasts and text that should particularly stand out.

Orange
#FF6700

Highlight color for special promotions and attention points.

Typography

Our font selection combines the modern Montserrat for headings and UI elements with the classic Libre Baskerville for body text. This combination creates a balanced mix of modernity and readability.

Headings

Montserrat Extra Bold 24pxUsage: Main headings (H1)
Montserrat Semi Bold 20pxUsage: Subheadings (H2)
Montserrat Semi Bold 16pxUsage: Sub-subheadings (H3)

Body Text

Libre Baskerville Regular 16pxUsage: Main text, longer text passages
Libre Baskerville Bold 16pxUsage: Text emphasis

UI Elements

Montserrat Regular 14pxUsage: Buttons, navigation, labels

Design Principles

Our design principles form the foundation for all design decisions and ensure a consistent user experience.

Uncomplicated Precision

Clear structures and a clean layout characterize the design. We rely on intuitive navigation and reduced complexity without compromising professionalism.

Authentic Down-to-Earthness

A natural visual language and honest presentation are the focus. We avoid exaggerated effects and instead rely on authentic content.

Subtle Dynamism

Subtle animations and smooth transitions create a lively interaction. Movements are purposefully employed and support user guidance.

UI Components

Our UI components are modularly structured and follow unified design principles. They ensure consistency across all applications.

Buttons

Buttons are clearly organized hierarchically and convey their respective function through their design.

Primary Buttons

Usage: Main actions, most important call-to-actions

Secondary Buttons

Usage: Alternative actions, important but not primary functions

Outline Buttons

Usage: Tertiary actions, optional functions

Forms

Form elements are clearly structured and provide immediate visual feedback.

Help text or additional information

Navigation

The navigation is intuitively designed and provides clear visual cues about the current position.

Cards

Cards serve to present related information in a structured manner.

Card Title

An example text for the content of this card. Various information can be displayed here.

Learn More
Example image
Card with Image

An example of a card with image and text.

Details
Price Card

€49.99

  • ✓ Feature 1
  • ✓ Feature 2
  • ✓ Feature 3
Book Now

Image Guidelines

Our visual language is authentic and professional. Images should underscore the quality of our services and build trust.

Product Images

Product image example

Professional Composition

High resolution, natural light, clear focus

  • Minimum resolution: 1920x1080px
  • Natural color palette
  • Sharp, clear representation

Team & Ambiance

Team example

Authentic Representation

Natural poses, real work situations

  • Authentic situations
  • Positive atmosphere
  • Professional appearance

Responsive Design

All content is displayed responsively and adapts optimally to different screen sizes.

Breakpoints

Mobile

< 576px

Tablet

≥ 576px

Desktop

≥ 992px

Large Desktop

≥ 1200px

Responsive Typography

Mobile

  • Headings: 20px
  • Body text: 14px
  • Buttons: 14px

Desktop

  • Headings: 24px
  • Body text: 16px
  • Buttons: 16px

Animations and Transitions

Animations are used purposefully to enhance user interaction and provide feedback.

Hover Effects

Hover over this element

Gentle lift and shadow cast on hover

Fade Effects

Fade example

Fade effect on hover

Scaling

Scaling effect on hover

Gentle enlargement on hover

Pulse Animation

Continuous pulse animation for drawing attention

Animation Guidelines

  • Duration: 0.2s - 0.4s for UI feedback
  • Timing function: ease or ease-in-out
  • Sparing use of continuous animations
  • Consideration of the "prefers-reduced-motion" setting