DESIGN.md · Analysis

mindline - Marktforschung aus Hamburg

mindline.de · 28 Oct 2026 · 47 colors · Roboto

mindline - Marktforschung aus Hamburg

Inhabergeführtes Full-Service-Marktforschungsinstitut aus Hamburg mit über 20 Jahren Erfahrung. Der Auftritt verbindet eine klare, rote Markenfarbe mit einer ruhigen, hellen Bühne aus Architektur und Licht.

Colors

surface#ffffff

surface-dim#e5e5e5

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f1f1f1

surface-container#eeeeee

surface-container-high#dddddd

surface-container-highest#d0cfcf

on-surface#111111

on-surface-variant#3b3b3b

inverse-surface#313131

inverse-on-surface#eeeeee

outline#a5a5a5

outline-variant#d0cfcf

surface-tint#c51a1b

primary#c51a1b

on-primary#ffffff

primary-container#c41b1c

on-primary-container#ffffff

inverse-primary#ff8a8b

secondary#3b3b3b

on-secondary#ffffff

secondary-container#eeeeee

on-secondary-container#313131

tertiary#7a00df

on-tertiary#ffffff

tertiary-container#f1e6fb

on-tertiary-container#3a0070

error#ba1a1a

on-error#ffffff

error-container#ffdad6

on-error-container#410002

primary-fixed#ffdad8

primary-fixed-dim#ffb3b1

on-primary-fixed#410004

on-primary-fixed-variant#8c0f10

secondary-fixed#e2e2e2

secondary-fixed-dim#c6c6c6

on-secondary-fixed#1a1c1c

on-secondary-fixed-variant#3b3b3b

tertiary-fixed#eddcff

tertiary-fixed-dim#d7b8ff

on-tertiary-fixed#2b0058

on-tertiary-fixed-variant#6200b4

background#ffffff

on-background#000000

surface-variant#eeeeee

Typography

display: fontFamily: Roboto · fontSize: 52px · fontWeight: 300 · lineHeight: 60px · letterSpacing: 0.5px
headline-lg: fontFamily: Roboto · fontSize: 36px · fontWeight: 700 · lineHeight: 44px
headline-md: fontFamily: Roboto · fontSize: 28px · fontWeight: 700 · lineHeight: 34px
title-lg: fontFamily: Roboto · fontSize: 22px · fontWeight: 700 · lineHeight: 28px
body-lg: fontFamily: Roboto · fontSize: 20px · fontWeight: 300 · lineHeight: 28px
body-md: fontFamily: Roboto · fontSize: 17px · fontWeight: 300 · lineHeight: 21px
label-md: fontFamily: Roboto · fontSize: 15px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.1em
label-sm: fontFamily: Roboto · fontSize: 13px · fontWeight: 400 · lineHeight: 18px · letterSpacing: 0.05em

Design guidance

Overview

mindline ist ein inhabergeführtes Full-Service-Marktforschungsinstitut mit Hauptsitz in Hamburg, das Marken, Kommunikationsabteilungen und Produktteams mit quantitativen, qualitativen und DIY-Studien versorgt. Die Gestaltung folgt einer ruhigen Editorial-Haltung: eine helle, nahezu weiße Fläche, ein großzügiger Weißraum und ein einzelner roter Akzent, der Orientierung gibt, statt zu dominieren. Die emotionale Wirkung ist Sachlichkeit mit Haltung – Vertrauen durch Klarheit statt durch Lautstärke. Auf der Startseite erzeugt eine fotografische Bühne mit Pokal-Illustration und geschwungener roter Linie eine leichte, fast spielerische Note, die den Ernst der Methodik ausbalanciert.

Die Tonalität ist sachlich, direkt und auf Augenhöhe, wie der Claim „INSIGHTS beyond the obvious“ und der Hero-Text „Ansprechpartner auf Augenhöhe“ zeigen. Der Wortschatz kombiniert Fachbegriffe (Marktforschung, Tracking, Conjoint-Analyse) mit einer warmen Ansprache im Deutschen. Beispielsatz: „Ihre Marke verdient Antworten, die über das Offensichtliche hinausgehen.“

Colors

Die Farbphilosophie ist monochrom mit einem einzigen Markenakzent. Primary (#c51a1b) ist das Rot der Logo- und Headline-Farbe und wird für H1-Akzente, aktive Navigationszustände, Rubrik-Überschriften (36px, bold) und Links verwendet. Primary-container (#c41b1c) trägt Button-Hover-Zustände und die Schlagschatten-Basis (rgba(196, 27, 28, 0.3)). Secondary (#3b3b3b) übernimmt Fließtext-Kontrast und sekundäre Labels; Tertiary (#7a00df) ist nur ein Systemakzent aus dem WordPress-Block-Editor und sollte im Layout nicht eingesetzt werden.

Die Surface-Stack-Regel ist strikt flach: surface (#ffffff) für Seiten, surface-container-low (#f1f1f1) für alternierende Sektionen, surface-container-high (#dddddd) für Hover-Flächen. Verläufe fehlen; Tiefe entsteht über Fotografie, nicht über Farbverläufe.

Typography

Das Typsystem basiert auf Roboto in drei Gewichten: 300 für Fließtext und Display-Zeilen, 700 für Rubriken und Betonungen. Die Kontrastpaarung aus leichter Display-Zeile („INSIGHTS“ in 52px/300) und schwerer Folgezeile („beyond the obvious“ in Rot, bold) kommuniziert Leichtigkeit mit Substanz. Display-Text erhält letter-spacing: 0.5px; Labels in Navigation bekommen letter-spacing: 0.1em in Großbuchstaben. Auf kleinen Labels über fotografischen Flächen empfiehlt sich text-shadow: 0 1px 2px rgba(0,0,0,0.15).

Layout

Das Layout ist fluid innerhalb eines Containers mit max-width: 1300px und einem 12-Spalten-Raster mit 30px Gutter. Seitenränder betragen 63px auf Desktop (Header-Padding 0 63.25px). Der Abstand zwischen Sektionen folgt dem lg-Schritt (24px) für Fließtextblöcke und 60px für FAQ-Rubriken. Der xl-Schritt (30px) trennt Spalten in Textblöcken; 2xl (40px) setzt Hero-Abstände. Weißraum ist bewusst großzügig, besonders zwischen Hero und Kundenstimmen.

Elevation & Depth

Hierarchie wird über Fotografie, Typografie und minimale Schatten vermittelt. Level 1 (Base): weiße Seitenfläche ohne Schatten. Level 2 (Karten/Teaser): box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.16). Level 3 (Akzent-Hover): box-shadow: 0 3px 14px rgba(196, 27, 28, 0.18), bei Buttons verstärkt auf 0 3px 10px rgba(196, 27, 28, 0.3). Glassmorphismus oder Blur-Effekte sind nicht Teil der Marke.

Shapes

Die Formsprache ist kantenbetont mit geringen Radien – eine technische, sachliche Haltung, die zur Methodik passt. Buttons und Eingabefelder verwenden 3px, Kartenbilder und Teaser 8px, größere Container 12px. Pillen (9999px) sind ausschließlich für Badges und Tags reserviert. Die Begründung: kleine Radien signalisieren Präzision, während der 8px-Radius für Karten etwas Wärme ohne Verspieltheit einbringt.

Components

Action Elements Primärbuttons nutzen den Hintergrund #c51a1b, Text #ffffff, Padding 20px horizontal, Höhe 48px und Radius 3px. Der Hover-Übergang wechselt auf #c41b1c mit einer Transition von 200ms ease-out und dem Schatten 0 3px 10px rgba(196, 27, 28, 0.3). Sekundärbuttons sind transparent mit 1px solid #c51a1b Rahmen.

Containers & Surfaces Karten liegen auf surface-container-lowest mit 24px Innenabstand und 8px Radius. Hover hebt die Karte auf surface-container-low und verstärkt den Schatten auf Level 3 innerhalb von 250ms. Trennlinien sind 1px solid #e0e0e0.

Inputs & Interaction Eingabefelder haben einen 1px solid #d0cfcf Rahmen, 15px Padding und 3px Radius. Der Fokuszustand setzt den Rahmen auf #c51a1b mit einem 2px Outline in rgba(197, 26, 27, 0.25). FAQ-Elemente öffnen

Do's and Don'ts

**Do**

Do nutze #c51a1b ausschließlich für Interaktion, Rubriken und Markenakzente, nie als Flächenfarbe für große Sektionen.
Do kombiniere die leichte 300er-Display-Zeile mit einer fetten roten Folgezeile, um die Headline-Hierarchie zu bauen.
Do setze Fotografie als primäre Tiefenebene und halte Karten flach mit maximal 16px Blur-Schatten.
Do halte Radien bei 3px für Controls und 8px für Karten, um die technische Präzision zu wahren.

**Don't**

Don't führe Glassmorphismus, Verläufe oder Neon-Effekte ein; sie widersprechen der sachlichen Marktforschungs-Haltung.
Don't verwende die Tertiary-Farbe #7a00df aus dem Editor im Seitenlayout als Akzent.
Don't setze Fließtext unter 17px oder in Gewicht 700, da die Lesbarkeit der 300er-Schrift darunter leidet.
Don't nutze Pillen-Radien (9999px) für Buttons oder Eingabefelder; sie sind Badges vorbehalten.

---
version: alpha
name: mindline - Marktforschung aus Hamburg
description: >-
  Inhabergeführtes Full-Service-Marktforschungsinstitut aus Hamburg mit über 20 Jahren Erfahrung. Der Auftritt verbindet
  eine klare, rote Markenfarbe mit einer ruhigen, hellen Bühne aus Architektur und Licht.
logo:
  src: https://mindline.de/wp-content/uploads/2018/10/Logo-mindline-1.png
colors:
  surface: '#ffffff'
  surface-dim: '#e5e5e5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f1f1f1'
  surface-container: '#eeeeee'
  surface-container-high: '#dddddd'
  surface-container-highest: '#d0cfcf'
  on-surface: '#111111'
  on-surface-variant: '#3b3b3b'
  inverse-surface: '#313131'
  inverse-on-surface: '#eeeeee'
  outline: '#a5a5a5'
  outline-variant: '#d0cfcf'
  surface-tint: '#c51a1b'
  primary: '#c51a1b'
  on-primary: '#ffffff'
  primary-container: '#c41b1c'
  on-primary-container: '#ffffff'
  inverse-primary: '#ff8a8b'
  secondary: '#3b3b3b'
  on-secondary: '#ffffff'
  secondary-container: '#eeeeee'
  on-secondary-container: '#313131'
  tertiary: '#7a00df'
  on-tertiary: '#ffffff'
  tertiary-container: '#f1e6fb'
  on-tertiary-container: '#3a0070'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#410002'
  primary-fixed: '#ffdad8'
  primary-fixed-dim: '#ffb3b1'
  on-primary-fixed: '#410004'
  on-primary-fixed-variant: '#8c0f10'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c6'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#3b3b3b'
  tertiary-fixed: '#eddcff'
  tertiary-fixed-dim: '#d7b8ff'
  on-tertiary-fixed: '#2b0058'
  on-tertiary-fixed-variant: '#6200b4'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#eeeeee'
typography:
  display:
    fontFamily: Roboto
    fontSize: 52px
    fontWeight: 300
    lineHeight: 60px
    letterSpacing: 0.5px
  headline-lg:
    fontFamily: Roboto
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 44px
  headline-md:
    fontFamily: Roboto
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 34px
  title-lg:
    fontFamily: Roboto
    fontSize: 22px
    fontWeight: '700'
    lineHeight: 28px
  body-lg:
    fontFamily: Roboto
    fontSize: 20px
    fontWeight: '300'
    lineHeight: 28px
  body-md:
    fontFamily: Roboto
    fontSize: 17px
    fontWeight: 300
    lineHeight: 21px
  label-md:
    fontFamily: Roboto
    fontSize: 15px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.1em
  label-sm:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 18px
    letterSpacing: 0.05em
rounded:
  sm: 2px
  DEFAULT: 3px
  md: 3px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  unit: 5px
  xs: 10px
  sm: 15px
  md: 20px
  lg: 24px
  xl: 30px
  2xl: 40px
  gutter: 30px
  margin: 63px
  container-max: 1300px
elevation:
  sm: 0 3px 10px rgba(196, 27, 28, 0.3)
  md: 0 3px 14px rgba(196, 27, 28, 0.18)
  lg: 3px 3px 16px rgba(0, 0, 0, 0.16)
layout:
  containerMaxWidth: 1300px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    elevation: '{elevation.sm}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#111111'
  nav-link:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    padding: '{spacing.sm}'
  nav-link-hover:
    backgroundColor: transparent
    textColor: '{colors.primary}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.lg}'
    padding: '{spacing.lg}'
    elevation: '{elevation.lg}'
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    elevation: '{elevation.md}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  faq-item:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.title-lg}'
    padding: '{spacing.md}'
  faq-item-open:
    backgroundColor: transparent
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primärbuttons nutzen den Hintergrund #c51a1b, Text #ffffff, Padding 20px horizontal, Höhe 48px und Radius 3px. Der Hover-Übergang wechselt auf #c41b1c mit einer Transition von 200ms ease-out und dem Schatten 0 3px 10px rgba(196, 27, 28, 0.3). Sekundärbuttons sind transparent mit 1px solid #c51a1b Rahmen.

### Containers & Surfaces
Karten liegen auf surface-container-lowest mit 24px Innenabstand und 8px Radius. Hover hebt die Karte auf surface-container-low und verstärkt den Schatten auf Level 3 innerhalb von 250ms. Trennlinien sind 1px solid #e0e0e0.

### Inputs & Interaction
Eingabefelder haben einen 1px solid #d0cfcf Rahmen, 15px Padding und 3px Radius. Der Fokuszustand setzt den Rahmen auf #c51a1b mit einem 2px Outline in rgba(197, 26, 27, 0.25). FAQ-Elemente öffnen

## Do's and Don'ts

**Do**
- Do nutze #c51a1b ausschließlich für Interaktion, Rubriken und Markenakzente, nie als Flächenfarbe für große Sektionen.
- Do kombiniere die leichte 300er-Display-Zeile mit einer fetten roten Folgezeile, um die Headline-Hierarchie zu bauen.
- Do setze Fotografie als primäre Tiefenebene und halte Karten flach mit maximal 16px Blur-Schatten.
- Do halte Radien bei 3px für Controls und 8px für Karten, um die technische Präzision zu wahren.

**Don't**
- Don't führe Glassmorphismus, Verläufe oder Neon-Effekte ein; sie widersprechen der sachlichen Marktforschungs-Haltung.
- Don't verwende die Tertiary-Farbe #7a00df aus dem Editor im Seitenlayout als Akzent.
- Don't setze Fließtext unter 17px oder in Gewicht 700, da die Lesbarkeit der 300er-Schrift darunter leidet.
- Don't nutze Pillen-Radien (9999px) für Buttons oder Eingabefelder; sie sind Badges vorbehalten.

Edit, then copy or download.