Design System

Brand Guidelines

The complete visual language of the Horst Hähl website — colors, typography, spacing, components and tokens. Use this reference to keep new pages consistent with the existing brand.

Identity Colors Typography Spacing Buttons Forms Icons Components CSS Variables Design Notes

01 — Brand Identity

Industrial precision, calm and confident

The Hähl brand reflects 60+ years of engineering heritage: technically credible, restrained in color, generous in whitespace, and grounded in real production photography.

Industrial credibility

Dark primary surfaces, deep typography and authentic factory imagery establish trust in engineering capability.

Restrained color

A single accent — brand teal — carries calls to action, eyebrows and highlights against a neutral grayscale base.

Functional clarity

Hierarchy is created with weight and spacing, not decoration. Every component is built for long-form B2B reading.

Logo

[ Horst Hähl logo ]

• Always place on a white surface — never directly on the dark primary background.
• Maintain clear space equal to the logo's cap height on every side.
• Minimum height: 32px digital. Never stretch, recolor or add effects.

Design principles

One accent. Brand teal is the only chromatic color in the system.
Light by default. Most sections are white; only hero and footer go dark.
Generous whitespace. 16–24 px container padding, 64–96 px section padding.
17 px base. Long reading lines tuned for technical B2B content.

02 — Color Palette

Every color used across the site

Click any swatch to copy the HEX value. All tokens are defined in src/styles.css and mapped via Tailwind v4 @theme inline.

Primary

Dark neutral used for headers, footer, primary buttons and high-contrast surfaces.

Primary

--primary

HEX #13161ARGB rgb(19, 22, 26)HSL hsl(214, 16%, 9%)OKLCH oklch(0.20 0.01 250)

Primary Foreground

--primary-foreground

HEX #F8F8F8RGB rgb(248, 248, 248)HSL hsl(0, 0%, 97%)OKLCH oklch(0.98 0 0)

Accent

Brand teal — the single chromatic color. Reserved for CTAs, eyebrows, links and key highlights.

Accent / Brand Teal

--accent

HEX #218B79RGB rgb(33, 139, 121)HSL hsl(170, 62%, 34%)OKLCH oklch(0.575 0.097 178)

Accent Foreground

--accent-foreground

HEX #FAFAFARGB rgb(250, 250, 250)HSL hsl(0, 0%, 98%)OKLCH oklch(0.98 0 0)

Brand Teal Soft

--brand-teal-soft

HEX #D3F3EBRGB rgb(211, 243, 235)HSL hsl(165, 57%, 89%)OKLCH oklch(0.94 0.035 178)

Secondary

Cool off-white for subtle section separation and quiet UI surfaces.

Secondary

--secondary

HEX #EFF2F5RGB rgb(239, 242, 245)HSL hsl(210, 23%, 95%)OKLCH oklch(0.96 0.005 250)

Secondary Foreground

--secondary-foreground

HEX #13161ARGB rgb(19, 22, 26)HSL hsl(214, 16%, 9%)OKLCH oklch(0.20 0.01 250)

Background

Base page surfaces.

Background

--background

HEX #FFFFFFRGB rgb(255, 255, 255)HSL hsl(0, 0%, 100%)OKLCH oklch(1 0 0)

Muted

--muted

HEX #EFF2F5RGB rgb(239, 242, 245)HSL hsl(210, 23%, 95%)OKLCH oklch(0.96 0.005 250)

Surface

Elevated containers — cards, popovers, mega menus.

Card

--card

HEX #FFFFFFRGB rgb(255, 255, 255)HSL hsl(0, 0%, 100%)OKLCH oklch(1 0 0)

Popover

--popover

HEX #FFFFFFRGB rgb(255, 255, 255)HSL hsl(0, 0%, 100%)OKLCH oklch(1 0 0)

Text

Foreground hierarchy from highest contrast to muted captions.

Foreground

--foreground

HEX #0E1216RGB rgb(14, 18, 22)HSL hsl(210, 22%, 7%)OKLCH oklch(0.18 0.01 250)

Muted Foreground

--muted-foreground

HEX #595E63RGB rgb(89, 94, 99)HSL hsl(210, 5%, 37%)OKLCH oklch(0.48 0.01 250)

Card Foreground

--card-foreground

HEX #0E1216RGB rgb(14, 18, 22)HSL hsl(210, 22%, 7%)OKLCH oklch(0.18 0.01 250)

Border

Subtle dividers, input outlines, card borders.

Border

--border

HEX #E2E8F0RGB rgb(226, 232, 240)HSL hsl(214, 32%, 91%)OKLCH oklch(0.929 0.013 255.508)

Input

--input

HEX #E2E8F0RGB rgb(226, 232, 240)HSL hsl(214, 32%, 91%)OKLCH oklch(0.929 0.013 255.508)

UI

Interactive system colors such as focus rings.

Ring (Focus)

--ring

HEX #90A1B9RGB rgb(144, 161, 185)HSL hsl(215, 23%, 65%)OKLCH oklch(0.704 0.04 256.788)

Status

Reserved for destructive or error feedback.

Destructive

--destructive

HEX #E7000BRGB rgb(231, 0, 11)HSL hsl(357, 100%, 45%)OKLCH oklch(0.577 0.245 27.325)

Destructive Foreground

--destructive-foreground

HEX #FAFAFARGB rgb(250, 250, 250)HSL hsl(0, 0%, 98%)OKLCH oklch(0.984 0.003 247.858)

03 — Typography

System sans, 17 px base, responsive clamp() scale

The site uses the operating-system sans stack — fast, native and neutral — paired with a calm, generous reading rhythm.

Family

System UI Sans

ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto

Weights

400 · 500 · 600

Regular, Medium, Semibold

Base size

17 px / 1.0625 rem

Line-height 1.7

Tracking

−0.02em → 0.2em

Tight for headings, wide for eyebrows

StylePreviewSpecs

Industrial Plastic Injection Molding

font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem)font-weight: 600line-height: 1.1letter-spacing: -0.02em

From customer specification to series production

font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)font-weight: 600line-height: 1.2letter-spacing: -0.015em

Toolmaking, molding & automation

font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem)font-weight: 600line-height: 1.3letter-spacing: -0.01em

Reduce parts, simplify assembly

font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.25rem)font-weight: 600line-height: 1.4letter-spacing: -0.005em

Material resistance & tolerances

font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem)font-weight: 600line-height: 1.5letter-spacing: 0

Certificates & quality system

font-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)font-weight: 600line-height: 1.5letter-spacing: 0

Large Body

We turn your requirements into manufacturable parts and robust production processes.

font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem)font-weight: 400line-height: 1.7letter-spacing: 0

Body

Toolmaking, plastic injection molding and series production from a single source — since 1960.

font-size: 1.0625remfont-weight: 400line-height: 1.7letter-spacing: 0

Small

6,350 m² production area · 20+ energy-efficient molding machines.

font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem)font-weight: 400line-height: 1.6letter-spacing: 0

Caption

IATF 16949 · ISO 9001:2015 · ISO 14001

font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem)font-weight: 400line-height: 1.5letter-spacing: 0.01em

Button Text

Start feasibility check

font-size: 0.875remfont-weight: 500line-height: 1letter-spacing: 0

Navigation

Solutions · Applications · Company

font-size: 0.875remfont-weight: 500line-height: 1.2letter-spacing: 0

Eyebrow

BRAND GUIDELINES

font-size: 0.75remfont-weight: 600line-height: 1.4letter-spacing: 0.2em

04 — Spacing System

4 px scale, 1440 px container, calm rhythm

Spacing scale (Tailwind units · 4 px)

1 · 4px

2 · 8px

3 · 12px

4 · 16px

6 · 24px

8 · 32px

12 · 48px

16 · 64px

20 · 80px

24 · 96px

Container

Max width 1440 px, side padding 2 rem, centered.

Sections

py-16 md:py-24 (64–96 px). Hero pages use py-16 md:py-24.

Grid

CSS Grid with gap-4 to gap-10. Columns: 1 → 2 → 3 → 4 responsive.

rounded-sm

4px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

shadow-sm

Surface elevation

shadow-card

Surface elevation

shadow-elegant

Surface elevation

05 — Buttons

Three variants, three sizes, accessible by default

Variants

Sizes

States

06 — Forms

Inputs, labels and validation

Full name

Placeholder uses muted-foreground at 60% weight.

Email · focus state

Email · validation error

Please enter a valid email address.

Message

Disabled

07 — Icons

Lucide, 1.5–1.75 stroke, accent on interactive elements

size-7 · stroke 1.5

size-4

16 px · Inline / button

size-5

20 px · Form / nav

size-7

28 px · Feature card

size-10

40 px · Hero / illustration

08 — UI Components

Recurring patterns across the site

Cards

Feature card 1

Icon, heading and short supporting copy on a white surface with subtle border and shadow.

Feature card 2

Icon, heading and short supporting copy on a white surface with subtle border and shadow.

Feature card 3

Icon, heading and short supporting copy on a white surface with subtle border and shadow.

Badges

Default

Secondary

Outline

Accent

Hero section

Eyebrow

Page hero with intro and CTA pair

A light gradient surface, eyebrow micro-label, large semibold headline and a two-button CTA row.

Dark CTA section

Ready to talk about your project?

Dark surface reserved for the footer and a single closing CTA per page.

Testimonial

"Hähl transferred our existing tooling on time and stabilised the series within weeks — exactly the partner we needed."

— Engineering Lead, Tier-1 supplier

Navigation

SolutionsApplicationsCompany

Footer

Solutions

Link · Link · Link

Company

About · Careers

09 — CSS Variables

Drop-in tokens for new pages

Copy these custom properties into any new stylesheet to inherit the full design system.

:root {
  /* Colors */
  --primary: oklch(0.20 0.01 250); /* #13161A */
  --primary-foreground: oklch(0.98 0 0); /* #F8F8F8 */
  --accent: oklch(0.575 0.097 178); /* #218B79 */
  --accent-foreground: oklch(0.98 0 0); /* #FAFAFA */
  --brand-teal-soft: oklch(0.94 0.035 178); /* #D3F3EB */
  --secondary: oklch(0.96 0.005 250); /* #EFF2F5 */
  --secondary-foreground: oklch(0.20 0.01 250); /* #13161A */
  --background: oklch(1 0 0); /* #FFFFFF */
  --muted: oklch(0.96 0.005 250); /* #EFF2F5 */
  --card: oklch(1 0 0); /* #FFFFFF */
  --popover: oklch(1 0 0); /* #FFFFFF */
  --foreground: oklch(0.18 0.01 250); /* #0E1216 */
  --muted-foreground: oklch(0.48 0.01 250); /* #595E63 */
  --card-foreground: oklch(0.18 0.01 250); /* #0E1216 */
  --border: oklch(0.929 0.013 255.508); /* #E2E8F0 */
  --input: oklch(0.929 0.013 255.508); /* #E2E8F0 */
  --ring: oklch(0.704 0.04 256.788); /* #90A1B9 */
  --destructive: oklch(0.577 0.245 27.325); /* #E7000B */
  --destructive-foreground: oklch(0.984 0.003 247.858); /* #FAFAFA */

  /* Radius */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-base: 1.0625rem;
  --line-height-base: 1.7;

  /* Shadows */
  --shadow-card: 0 1px 3px 0 oklch(0 0 0 / 0.06), 0 4px 16px -4px oklch(0 0 0 / 0.08);
  --shadow-elegant: 0 10px 40px -12px oklch(0.20 0.01 250 / 0.18);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, oklch(0.18 0.01 250) 0%, oklch(0.26 0.02 250) 100%);
  --gradient-accent: linear-gradient(135deg, oklch(0.575 0.097 178) 0%, oklch(0.50 0.09 180) 100%);

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 500ms ease-out;
}

10 — Design Notes

The visual logic behind the system

The Hähl design system follows a light-by-default rule: most sections are white, with the dark primary surface reserved for the header micro-bar, hero CTAs and the footer. This keeps long technical pages calm and readable.

One accent color (brand teal) does the chromatic work — eyebrows, primary buttons, link hovers, icons in cards and focus states. No purples, gradients or rainbow illustrations.

Typography uses the native system sans stack at a 17 px base with a 1.7 line-height, tuned for B2B reading. Headings are semibold with tight tracking; eyebrows wear a wide 0.2em tracking to signal hierarchy.

Components are built on shadcn/ui primitives styled with Tailwind v4 tokens (@theme inline in src/styles.css). Always use semantic class names (bg-accent, text-muted-foreground) — never hard-code hex values in components.

When designing a new page: start from a white background, add an eyebrow + semibold headline + supporting copy, group content into bordered cards with shadow-sm, and close with a single dark CTA before the footer.

11 — Website Structure

Complete sitemap

Hierarchical overview of every page accessible through navigation, footer and internal links. Documentation only — reflects the website as it currently exists.

Page Title

URL Slug

Parent

Level

Startseite
/
—
Main
Lösungen
/loesungen
Startseite
Main
└─Teile reduzieren, Montage vereinfachen
/loesungen/teile-reduzieren-montage-vereinfachen
Lösungen
Subpage
└─Metall zu Kunststoff
/loesungen/metall-zu-kunststoff
Lösungen
Subpage
└─Schnell zur Serie
/loesungen/schnell-zur-serie
Lösungen
Subpage
└─Materialbeständigkeit, Temperatur & Medien
/loesungen/materialbestaendigkeit-temperatur-medien
Lösungen
Subpage
└─Toleranzen, Oberflächen & Sichtteile
/loesungen/toleranzen-oberflaechen-sichtteile
Lösungen
Subpage
└─Anforderungen, Nachweisfähigkeit & Brandschutz
/loesungen/anforderungen-nachweisfaehigkeit-brandschutz
Lösungen
Subpage
Anwendungen
/anwendungen
Startseite
Main
└─Nutzfahrzeuge On- und Offroad
/anwendungen/nutzfahrzeuge-on-und-offroad
Anwendungen
Subpage
└─Elektrotechnik
/anwendungen/elektrotechnik
Anwendungen
Subpage
└─Verlagerung & Transferprojekte
/anwendungen/verlagerung-transferprojekte
Anwendungen
Subpage
└─Individuallösungen
/anwendungen/individualloesungen
Anwendungen
Subpage
Leistungen
/leistungen
Startseite
Main
Unternehmen
—
Startseite
Group
└─Über Hähl
/unternehmen/ueber-uns
Unternehmen
Subpage
└─Fertigung & Maschinenpark
/unternehmen/fertigung
Unternehmen
Subpage
└─Qualität, Nachhaltigkeit & Zertifikate
/unternehmen/qualitaet-nachhaltigkeit
Unternehmen
Subpage
└─Karriere
/unternehmen/karriere
Unternehmen
Subpage
Einblicke
/einblicke
Startseite
Main
Machbarkeitscheck
/machbarkeitscheck
Startseite
Main
Kontakt
/kontakt
Startseite
Main
Brand Guidelines
/brand-guidelines
Startseite
Utility
Impressum
Footer link currently points to Startseite
/
Footer
Legal
Datenschutz
Footer link currently points to Startseite
/
Footer
Legal

Hierarchical view

Home (/)
├── Lösungen (/loesungen)
│   ├── Teile reduzieren, Montage vereinfachen (/loesungen/teile-reduzieren-montage-vereinfachen)
│   ├── Metall zu Kunststoff (/loesungen/metall-zu-kunststoff)
│   ├── Schnell zur Serie (/loesungen/schnell-zur-serie)
│   ├── Materialbeständigkeit, Temperatur & Medien (/loesungen/materialbestaendigkeit-temperatur-medien)
│   ├── Toleranzen, Oberflächen & Sichtteile (/loesungen/toleranzen-oberflaechen-sichtteile)
│   └── Anforderungen, Nachweisfähigkeit & Brandschutz (/loesungen/anforderungen-nachweisfaehigkeit-brandschutz)
│
├── Anwendungen (/anwendungen)
│   ├── Nutzfahrzeuge On- und Offroad (/anwendungen/nutzfahrzeuge-on-und-offroad)
│   ├── Elektrotechnik (/anwendungen/elektrotechnik)
│   ├── Verlagerung & Transferprojekte (/anwendungen/verlagerung-transferprojekte)
│   └── Individuallösungen (/anwendungen/individualloesungen)
│
├── Leistungen (/leistungen)
│
├── Unternehmen  (group — no own page)
│   ├── Über Hähl (/unternehmen/ueber-uns)
│   ├── Fertigung & Maschinenpark (/unternehmen/fertigung)
│   ├── Qualität, Nachhaltigkeit & Zertifikate (/unternehmen/qualitaet-nachhaltigkeit)
│   └── Karriere (/unternehmen/karriere)
│
├── Einblicke (/einblicke)
├── Machbarkeitscheck (/machbarkeitscheck)
├── Kontakt (/kontakt)
├── Brand Guidelines (/brand-guidelines)  — utility / internal
│
└── Footer legal links (currently point to /)
    ├── Impressum (/)
    └── Datenschutz (/)

Total: 24 entries · 7 main sections · 14 subpages · 1 grouping label (Unternehmen) · 2 legal footer links (Impressum & Datenschutz currently point to Startseite).