Style Guide

Lumos | v2.0.4

Typography

Font Styles

u-text-display

Display

u-text-h1

Heading

u-text-h2

Heading

u-text-h3

Heading

u-text-h4

Heading

u-text-h5
Heading
u-text-h6
Heading
u-text-subtitles
Subtitles
u-text-quotes
Quotes
u-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-link
Text Link

Font Weight

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Text alignment

u-text-aligned-left

Lorem ipsum dolor

u-text-aligned-center

Lorem ipsum dolor

u-text-aligned-right

Lorem ipsum dolor

Text wrap

u-text-wrap-balance

Lorem ipsum dolor

u-text-wrap-pretty

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Typography Elements

Ordered List
  1. This is some text
  2. This is some text
  3. This is some text
  1. This is some text
  2. This is some text
  3. This is some text
  1. This is some text
  2. This is some text
  3. This is some text
Unordered List
  • This is some text
  • This is some text
  • This is some text
  • This is some text what happens if the text is long
  • This is some text
  • This is some text
  • This is some text what happens if the text is long
  • This is some text
u-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Text Link

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Text Link

Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

Color

Themes

data-theme="light"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="dark"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="invert"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="inherit"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link

Font Families

u-font-body

Lorem ipsum dolor

u-font-heading

Lorem ipsum dolor

u-font-decoration

Lorem ipsum dolor

u-font-display

Lorem ipsum dolor

Text Color

u-text-color-primary

Lorem ipsum dolor

u-text-color-secondary

Lorem ipsum dolor

u-text-color-tertiary

Lorem ipsum dolor

u-text-color-black

Lorem ipsum dolor

u-text-color-brand

Lorem ipsum dolor

u-text-color-red

Lorem ipsum dolor

u-text-color-green

Lorem ipsum dolor

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Link Color

u-link-color
u-link-color-secondary

Background Colors

u-bg-color
u-bg-color-secondary
u-bg-color-tertiary
u-bg-color-alternate

Flexbox

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Align Self Utilities

u-align-self-auto
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Align Items Utilities

u-align-items-variable
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Grid

Grid Utilities

u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid

Column Utilities

u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12

Order Utilities

u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet

Spacing

Gap Utilities

u-gap-none
u-gap-main
u-gap-xxsmall
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large
u-gap-xlarge

Row Gap Utilities

u-gap-row-none
u-gap-row-main
u-gap-row-xsmall
u-gap-row-small
u-gap-row-medium
u-gap-row-large
u-gap-row-xlarge

Column Gap Utilities

u-gap-column-none
u-gap-column-main
u-gap-column-xsmall
u-gap-column-small
u-gap-column-medium
u-gap-column-large
u-gap-column-xlarge

Section Spacing Attributes

data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"

Custom Spacing Classes

u-section-header

Margin Top Utilities

u-mt-auto
u-mt-gutter
u-mt-text
u-mt-0
u-mt-1
u-mt-2
u-mt-3
u-mt-4
u-mt-5
u-mt-6
u-mt-7

Margin Bottom Utilities

u-mb-auto
u-mb-gutter
u-mb-text
u-mb-0
u-mb-1
u-mb-2
u-mb-3
u-mb-4
u-mb-5
u-mb-6
u-mb-7

Z-Index

Z-Index

u-zindex-2
u-zindex-3

Miscellaneous

Other Utilities

u-height-screen
u-min-height-70
u-min-height-60
u-max-width-none
u-visual-wrap
u-display-none
u-hide-portrait
u-hide-landscape
u-hide-tablet
u-cover
u-cover-absolute
u-container
u-sr-only
u-margin-trim
u-hide-if-empty
u-hide-if-empty-cms

Positions

Positions

u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Prevent Style Cleanup

Eyebrow Text Here

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ohne Kreditkarte

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Badge
Bitte Business-E-mail verwenden.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow Text Here

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Vorgefilterte Bewerber*innen, die härter arbeiten

Der erste Vorteil eines Mitarbeiterempfehlungsprogramms besteht darin, dass alle Bewerber*innen bereits durch die empfehlenden Mitarbeiter*innen geprüft wurden. Niemand möchte doch den eigenen Ruf ruinieren und schlägt daher nur geeignete Kandidat*innen vor. Erfahrungen zeigen, dass durch bestehende Mitarbeiter*innen empfohlene Personen mit hoher Wahrscheinlichkeit zum Unternehmen passen und eine höhere Verbindung zu diesem haben. Zusätzlich hat sich herausgestellt, dass empfohlene Mitarbeiter*innen härter arbeiten, als solche, die sich klassisch bewerben.

Wie funktioniert ein Mitarbeiterempfehlungsprogramm?

Damit ein Mitarbeiterempfehlungsprogramm funktioniert, müssen Sie Ihren Mitarbeiter*innen die richtigen Werkzeuge an die Hand geben. Dazu empfehlen wir, einen How-To-Guide zu erstellen, in dem alle nachlesen können, worum es geht.

Wie sollen offene Stellen kommuniziert werden?

Ein Teil Ihres How-To-Guides sollte die Frage beantworten, wie Ihre Mitarbeiter*innen offene Stellenangebote kommunizieren sollten. Persönlich via E-Mail oder Telefonat? Öffentlich in einem Facebook- oder Instagram-Post? Kunden oder Lieferanten fragen, ob sie passende Personen kennen, Menschen auf Xing anschreiben oder direkt Bewerber*innen nach Empfehlungen von anderen Bewerber*innen fragen? Die Maßnahmen, die hier am besten funktionieren, hängen von der Branche ab, in der Sie sich bewegen.

Helfen Sie, die Vorteile Ihres Unternehmens zu artikulieren

Sicherlich genießen Ihre Mitarbeiter*innen in Ihrem Unternehmen den ein oder anderen Vorteil, aber manchmal kann man diese als Angestellte*r nicht so genau artikulieren. Hierbei können Sie helfen, indem Sie in Ihren How-To-Guide aufnehmen, warum es sich lohnt, bei Ihnen zu arbeiten.
Der erste Schritt ist jedoch, ein Umfeld zu schaffen, in dem man gerne arbeitet. Sind Ihre Mitarbeiter*innen nicht zu 100% überzeugt, werden sie Ihr Unternehmen auch weniger gerne weiterempfehlen.

Machen Sie ihr Programm sichtbar

Damit das Mitarbeiterempfehlungsprogramm nicht im Arbeitsalltag untergeht, sollte es permanent sichtbar sein, zum Beispiel im Intranet. Wir empfehlen, dass sich eine Person um dieses Thema kümmert, darauf achtet, dass es nicht in Vergessenheit gerät und den Mitarbeiter*innen bei Fragen hilft.

Kommunizieren Sie offene Stellen intern

Damit das ganze Programm funktioniert, müssen Ihre Mitarbeiter*innen wissen, welche Positionen gerade offen und ausgeschrieben sind. Sie können die offenen Stellen aushängen, in Meetings kommunizieren oder per internem Newsletter kommunizieren. Wenn ein Mitarbeiter eine Empfehlung machen will, sollten Sie am besten nur nach dem Namen und der Telefonnummer der Person fragen.

Anreiz: Warum sollten Ihre Mitarbeiter*innen Empfehlungen abgeben?

Am besten natürlich für das Wohl des Teams und des Unternehmens. Darüber hinaus können Sie Anreize schaffen, Ihre Mitarbeiter*innen zu Empfehlungen zu motivieren. Viele Arbeitgeber setzen hierbei auf Geld.

Mitarbeiterempfehlungen: So geht's

Erfahren Sie, wie Sie mit einem Mitarbeiterempfehlungsprogramm vorgefilterte Bewerber\*innen finden, die härter arbeiten: Erstellen Sie einen How-To-Guide, ko

Zuletzt aktualisiert:
3.12.2025

Vorgefilterte Bewerber*innen, die härter arbeiten

Der erste Vorteil eines Mitarbeiterempfehlungsprogramms besteht darin, dass alle Bewerber*innen bereits durch die empfehlenden Mitarbeiter*innen geprüft wurden. Niemand möchte doch den eigenen Ruf ruinieren und schlägt daher nur geeignete Kandidat*innen vor. Erfahrungen zeigen, dass durch bestehende Mitarbeiter*innen empfohlene Personen mit hoher Wahrscheinlichkeit zum Unternehmen passen und eine höhere Verbindung zu diesem haben. Zusätzlich hat sich herausgestellt, dass empfohlene Mitarbeiter*innen härter arbeiten, als solche, die sich klassisch bewerben.

Wie funktioniert ein Mitarbeiterempfehlungsprogramm?

Damit ein Mitarbeiterempfehlungsprogramm funktioniert, müssen Sie Ihren Mitarbeiter*innen die richtigen Werkzeuge an die Hand geben. Dazu empfehlen wir, einen How-To-Guide zu erstellen, in dem alle nachlesen können, worum es geht.

Wie sollen offene Stellen kommuniziert werden?

Ein Teil Ihres How-To-Guides sollte die Frage beantworten, wie Ihre Mitarbeiter*innen offene Stellenangebote kommunizieren sollten. Persönlich via E-Mail oder Telefonat? Öffentlich in einem Facebook- oder Instagram-Post? Kunden oder Lieferanten fragen, ob sie passende Personen kennen, Menschen auf Xing anschreiben oder direkt Bewerber*innen nach Empfehlungen von anderen Bewerber*innen fragen? Die Maßnahmen, die hier am besten funktionieren, hängen von der Branche ab, in der Sie sich bewegen.

Helfen Sie, die Vorteile Ihres Unternehmens zu artikulieren

Sicherlich genießen Ihre Mitarbeiter*innen in Ihrem Unternehmen den ein oder anderen Vorteil, aber manchmal kann man diese als Angestellte*r nicht so genau artikulieren. Hierbei können Sie helfen, indem Sie in Ihren How-To-Guide aufnehmen, warum es sich lohnt, bei Ihnen zu arbeiten.
Der erste Schritt ist jedoch, ein Umfeld zu schaffen, in dem man gerne arbeitet. Sind Ihre Mitarbeiter*innen nicht zu 100% überzeugt, werden sie Ihr Unternehmen auch weniger gerne weiterempfehlen.

Machen Sie ihr Programm sichtbar

Damit das Mitarbeiterempfehlungsprogramm nicht im Arbeitsalltag untergeht, sollte es permanent sichtbar sein, zum Beispiel im Intranet. Wir empfehlen, dass sich eine Person um dieses Thema kümmert, darauf achtet, dass es nicht in Vergessenheit gerät und den Mitarbeiter*innen bei Fragen hilft.

Kommunizieren Sie offene Stellen intern

Damit das ganze Programm funktioniert, müssen Ihre Mitarbeiter*innen wissen, welche Positionen gerade offen und ausgeschrieben sind. Sie können die offenen Stellen aushängen, in Meetings kommunizieren oder per internem Newsletter kommunizieren. Wenn ein Mitarbeiter eine Empfehlung machen will, sollten Sie am besten nur nach dem Namen und der Telefonnummer der Person fragen.

Anreiz: Warum sollten Ihre Mitarbeiter*innen Empfehlungen abgeben?

Am besten natürlich für das Wohl des Teams und des Unternehmens. Darüber hinaus können Sie Anreize schaffen, Ihre Mitarbeiter*innen zu Empfehlungen zu motivieren. Viele Arbeitgeber setzen hierbei auf Geld.

Blogbeiträge

Entdecken Sie weitere informative Artikel

Change Management für Ihre Recruiting-Software

Recruiting-Software einführen ohne Widerstände: So gelingt Change Management mit klaren Prozessen und hoher Akzeptanz im Unternehmen.

KI im Recruiting: Datenschutz & EU-KI-Verordnung 2026

Was ist bei KI im Recruiting erlaubt? Die EU-KI-Verordnung bringt neue Pflichten für HR. Risiken, Datenschutz & Praxisbeispiele für DACH.

Mitarbeiter motivieren ohne finanzielle Anreize

Entdecken Sie 7 wissenschaftlich fundierte Methoden, um Mitarbeiter ohne finanzielle Anreize nachhaltig zu motivieren und langfristig zu binden.