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.

4 Gründe gegen das Bewerbungsfoto

Ein Bild sagt mehr als 1.000 Worte. Nichts lässt Sie schneller einen Eindruck einer Bewerberin oder eines Bewerbers gewinnen, als ein Foto. Dieser Eindruck ist jedoch oft von Vorurteilen belastet. Deshalb sollten Sie das Bewerbungsbild aus Ihrem Rekrutierungsprozess verbannen.

Bewerbungsbilder beeinflussen (unbewusst) Ihre Entscheidung für oder gegen eine Person

Eine Studie der Universität Duisburg-Essen hat untersucht, wie Proband*innen Profilbilder von Männern und Frauen bewerten. Den Männern wurden häufiger Eigenschaften von Führungspositionen zugeordnet, den Frauen eher familiäre Werte. Und das, obwohl die Lebensläufe die gleichen waren.
Wie oft ist es Ihnen schon passiert, dass Sie eine Person unbewusst in eine Schublade gesteckt haben, ohne mehr von ihr zu wissen? Wahrscheinlich täglich. Wir haben gewisse Stereotypen so verinnerlicht, dass wir es gar nicht wahrnehmen, wenn wir Personen bestimmte Eigenschaften zuschreiben, weil das alles in unserem Unterbewusstsein passiert. Das verfälscht oftmals den ersten Eindruck, den man von einem Menschen hat.
Deshalb sollten Sie dafür Sorge tragen, dass Ihr erster Eindruck nicht durch ein Foto geprägt wird.

Gleichberechtigung in der Stellenanzeige, aber nicht beim Bewerbungsprozess

Für Stellenanzeigen ist im Allgemeinen Gleichberechtigungsgesetz (AGG) ganz genau geklärt, was erlaubt ist und was nicht. Bei allen nachgelagerten Prozessen im Bewerbungsprozess ist das nicht mehr so.
Durch das Verbot des Bewerbungsfotos stellen Sie sicher, dass Bewerber*innen im ersten Auswahlschritt nicht benachteiligt werden können. Diese Benachteiligung muss sich übrigens nicht auf das Geschlecht oder die Herkunft beziehen, sondern kann auch passieren, weil jemand vielleicht ein ungebügeltes Hemd trägt oder ein unprofessioneller Hintergrund gewählt wurde. Selbst diese Kleinigkeiten haben Einfluss auf das Bild, das wir uns von einer*m Bewerber*in machen.

Einen Schritt weiter gehen und die Namen in den Bewerbungsunterlagen ausblenden

Bewerbungsfotos zu "verbieten" ist schon ein guter Schritt dahin, sich nicht von Vorurteilen einnehmen zu lassen. Radikaler ist, auch die Namen der Bewerber*innen in der Vorauswahl auszublenden.
Den Hintergrund hierfür bietet eine Studie vom Sachverständigenrat deutscher Stiftungen für Integration und Migration. Hier wurde nämlich bestätigt, dass Bewerber*innen mit ausländischen Vor- und Nachnamen Nachteile bei der Bewerbung haben.

Die besten Teams sind divers

Mehrere Studien bestätigen, dass diverse Teams besser sind als homogene. Sie setzen die Bewerbungsfoto-Regeln also nicht (nur) wegen des AGG auf, sondern um das bestmögliche Team aufzubauen. Dafür müssen Sie alle Hürden, die Ihnen im Unterbewusstsein im Weg stehen, entfernen. Das Ergebnis ist ein buntes Team bestehend aus unterschiedlichen Backgrounds, Spezialisierungen und Erfahrungsschätzen.
Sie wollen mehr über Rekrutierung erfahren? Abonnieren Sie unseren Newsletter:

4 Gründe gegen das Bewerbungsfoto

Deshalb sollten Sie das Bewerbungsbild aus Ihrem Rekrutierungsprozess verbannen. Unsere Gründe aufgelistet.

Zuletzt aktualisiert:
3.12.2025

4 Gründe gegen das Bewerbungsfoto

Ein Bild sagt mehr als 1.000 Worte. Nichts lässt Sie schneller einen Eindruck einer Bewerberin oder eines Bewerbers gewinnen, als ein Foto. Dieser Eindruck ist jedoch oft von Vorurteilen belastet. Deshalb sollten Sie das Bewerbungsbild aus Ihrem Rekrutierungsprozess verbannen.

Bewerbungsbilder beeinflussen (unbewusst) Ihre Entscheidung für oder gegen eine Person

Eine Studie der Universität Duisburg-Essen hat untersucht, wie Proband*innen Profilbilder von Männern und Frauen bewerten. Den Männern wurden häufiger Eigenschaften von Führungspositionen zugeordnet, den Frauen eher familiäre Werte. Und das, obwohl die Lebensläufe die gleichen waren.
Wie oft ist es Ihnen schon passiert, dass Sie eine Person unbewusst in eine Schublade gesteckt haben, ohne mehr von ihr zu wissen? Wahrscheinlich täglich. Wir haben gewisse Stereotypen so verinnerlicht, dass wir es gar nicht wahrnehmen, wenn wir Personen bestimmte Eigenschaften zuschreiben, weil das alles in unserem Unterbewusstsein passiert. Das verfälscht oftmals den ersten Eindruck, den man von einem Menschen hat.
Deshalb sollten Sie dafür Sorge tragen, dass Ihr erster Eindruck nicht durch ein Foto geprägt wird.

Gleichberechtigung in der Stellenanzeige, aber nicht beim Bewerbungsprozess

Für Stellenanzeigen ist im Allgemeinen Gleichberechtigungsgesetz (AGG) ganz genau geklärt, was erlaubt ist und was nicht. Bei allen nachgelagerten Prozessen im Bewerbungsprozess ist das nicht mehr so.
Durch das Verbot des Bewerbungsfotos stellen Sie sicher, dass Bewerber*innen im ersten Auswahlschritt nicht benachteiligt werden können. Diese Benachteiligung muss sich übrigens nicht auf das Geschlecht oder die Herkunft beziehen, sondern kann auch passieren, weil jemand vielleicht ein ungebügeltes Hemd trägt oder ein unprofessioneller Hintergrund gewählt wurde. Selbst diese Kleinigkeiten haben Einfluss auf das Bild, das wir uns von einer*m Bewerber*in machen.

Einen Schritt weiter gehen und die Namen in den Bewerbungsunterlagen ausblenden

Bewerbungsfotos zu "verbieten" ist schon ein guter Schritt dahin, sich nicht von Vorurteilen einnehmen zu lassen. Radikaler ist, auch die Namen der Bewerber*innen in der Vorauswahl auszublenden.
Den Hintergrund hierfür bietet eine Studie vom Sachverständigenrat deutscher Stiftungen für Integration und Migration. Hier wurde nämlich bestätigt, dass Bewerber*innen mit ausländischen Vor- und Nachnamen Nachteile bei der Bewerbung haben.

Die besten Teams sind divers

Mehrere Studien bestätigen, dass diverse Teams besser sind als homogene. Sie setzen die Bewerbungsfoto-Regeln also nicht (nur) wegen des AGG auf, sondern um das bestmögliche Team aufzubauen. Dafür müssen Sie alle Hürden, die Ihnen im Unterbewusstsein im Weg stehen, entfernen. Das Ergebnis ist ein buntes Team bestehend aus unterschiedlichen Backgrounds, Spezialisierungen und Erfahrungsschätzen.
Sie wollen mehr über Rekrutierung erfahren? Abonnieren Sie unseren Newsletter:

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.