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.

Was sind K.O.-Fragen und wie helfen sie mir bei der Rekrutierung?

Bei K.O.-Fragen im Bewerbungsformular geht es darum, so schnell wie möglich zu sehen, ob ein*e Bewerber*in für die ausgeschriebene Stelle geeignet ist. Sie können dabei allgemeine und fachspezifische K.O.-Fragen stellen.
Hinweis: Immer, wenn im folgenden Text von Auswahllisten, Freitextfeldern oder Ähnlichem die Rede ist, beziehen wir uns auf einen automatisierten Bewerberfragebogen.

Allgemeine K.O.-Fragen

Allgemeine K.O.-Fragen betreffen grundlegende Anforderungen an den Job:

1. Arbeitserlaubnis

Bei manchen Berufen (vor allem im STEM-Bereich) bewerben sich sehr viele Personen aus dem nicht EU-Ausland. Hier ist es wichtig, vorab zu klären, ob die Bewerber*innen eine Arbeitserlaubnis haben. Wichtig ist, dass man nach der Arbeitserlaubnis und nicht nach dem Herkunftsland fragt. Die Frage nach dem Herkunftsland ist nach dem Allgemeinen Gleichbehandlungsgesetz (AGG) nicht zugelassen und diskriminierend.Die Frage kann ganz einfach per Auswahlliste gestellt werden. Die möglichen Antworten könnten “ja”, “nein” und “beantragt” sein.

2. Sprachkenntnisse

Für viele Berufe ist es wichtig, verschiedene Sprachkenntnisse zu haben. Wir empfehlen, den Bewerber*innen eine standardisierte Liste zur Einstufung ihrer Sprachkenntnisse zur Verfügung zu stellen.Der Gemeinsame Europäische Referenzrahmen für Sprachen (GER) bietet eine solche Liste.

  • A1 - A2: Elementare Sprachverwendung
  • B1 - B2: Selbstständige Sprachverwendung
  • C1 - C2: Kompetente Sprachverwendung

  • Da manche Bewerber*innen an dieser Stelle falsche Sprachniveaus angeben, hilft es, eine Frage zu stellen, in der die Antwort in der entsprechenden Sprache erfolgen soll. Hierzu eignet sich ein Freitextfeld.

    3. Fahrerlaubnis

    Setzt Ihre ausgeschriebene Position voraus, dass Auto oder LKW gefahren werden muss, sollten Sie nach der Fahrerlaubnis fragen. Es gibt verschiedene Befugnisse für die einzelnen Führerscheinklassen, eine Übersicht finden Sie beim TÜV Süd. Umfasst Ihre Stelle, dass Personen befördert werden, vergessen Sie nicht zu fragen, ob ein Personenbeförderungsschein vorliegt.

    4. Weitere K.O.-Kriterien

    Weitere K.O.-Kriterien sind die Verfügbarkeit und Gehaltsvorstellungen. Ist Ihr Bewerber oder Ihre Bewerberin nicht in der benötigten Arbeitszeit verfügbar, braucht man ihn oder sie gar nicht erst zum Interview einzuladen.Liegen die Gehaltsvorstellung weit abseits Ihrer Vorstellungen, können Sie im Gespräch nachhaken, statt am Ende aller Interviews vom Hocker zu fallen.

    Fachspezifische K.O.-Fragen

    Kann der Bewerber oder die Bewerberin überhaupt das, was wir benötigen? Bei onapply nutzen wir zwei Methoden, um das herauszufinden.

    Wir fragen nach Fähigkeiten in bestimmten Bereichen

    Stellen wir uns mal vor, wir schreiben gerade eine Design-Stelle aus. Im Bewerberfragebogen fragen wir dann nach den Fähigkeiten in Photoshop, InDesign, Adobe XD, Premier Pro und CAD.Für uns ist erstmal nur relevant, ob InDesign und XD beherrscht werden. Die anderen Programme fragen wir nur zum Test ab. Würde die Person, die sich auf die Stelle bewirbt nur Premier Pro und CAD können, kommt sie für uns nicht infrage.

    Wir stellen detaillierte Fragen

    Detaillierte Fragen sind notwendig, um herauszufinden, wie gut die Kenntnisse des*der Bewerbe*in wirklich sind. Das finden wir ähnlich heraus, wie wir es auch mit den Sprachkenntnissen machen. In unserem Design-Beispiel fragen wir zum Beispiel “Warum kann an die Farbe Weiß nicht im HKL oder CMYK Farbraum nutzen? Wie hinterlegt man die Farbe für den Druck?”. Die Antwort sollte allen Designer*innen bewusst sein, die schon mal eine Visitenkarte gestaltet haben.Vielleicht möchten Sie jetzt gerne einwenden:
    Was ist, wenn die Antwort gegoogelt wird?
    In diesem Fall rechnen wir es der Person an, dass sie weiß, wie sie sich das nötige Wissen beschafft. Nach einigen Jahren Praxis können wir sicher sagen: Sie wären überrascht, wie wenige Bewerber*innen auf die Idee kommen zu googlen.

    Was sind K.O.-Fragen und wie helfen sie mir bei der Rekrutierung?

    Erfahren Sie, wie K.O.-Fragen bei der Rekrutierung helfen können. Allgemeine K.O.-Fragen betreffen grundlegende Anforderungen an den Job.

    Zuletzt aktualisiert:
    3.12.2025

    Was sind K.O.-Fragen und wie helfen sie mir bei der Rekrutierung?

    Bei K.O.-Fragen im Bewerbungsformular geht es darum, so schnell wie möglich zu sehen, ob ein*e Bewerber*in für die ausgeschriebene Stelle geeignet ist. Sie können dabei allgemeine und fachspezifische K.O.-Fragen stellen.
    Hinweis: Immer, wenn im folgenden Text von Auswahllisten, Freitextfeldern oder Ähnlichem die Rede ist, beziehen wir uns auf einen automatisierten Bewerberfragebogen.

    Allgemeine K.O.-Fragen

    Allgemeine K.O.-Fragen betreffen grundlegende Anforderungen an den Job:

    1. Arbeitserlaubnis

    Bei manchen Berufen (vor allem im STEM-Bereich) bewerben sich sehr viele Personen aus dem nicht EU-Ausland. Hier ist es wichtig, vorab zu klären, ob die Bewerber*innen eine Arbeitserlaubnis haben. Wichtig ist, dass man nach der Arbeitserlaubnis und nicht nach dem Herkunftsland fragt. Die Frage nach dem Herkunftsland ist nach dem Allgemeinen Gleichbehandlungsgesetz (AGG) nicht zugelassen und diskriminierend.Die Frage kann ganz einfach per Auswahlliste gestellt werden. Die möglichen Antworten könnten “ja”, “nein” und “beantragt” sein.

    2. Sprachkenntnisse

    Für viele Berufe ist es wichtig, verschiedene Sprachkenntnisse zu haben. Wir empfehlen, den Bewerber*innen eine standardisierte Liste zur Einstufung ihrer Sprachkenntnisse zur Verfügung zu stellen.Der Gemeinsame Europäische Referenzrahmen für Sprachen (GER) bietet eine solche Liste.

  • A1 - A2: Elementare Sprachverwendung
  • B1 - B2: Selbstständige Sprachverwendung
  • C1 - C2: Kompetente Sprachverwendung

  • Da manche Bewerber*innen an dieser Stelle falsche Sprachniveaus angeben, hilft es, eine Frage zu stellen, in der die Antwort in der entsprechenden Sprache erfolgen soll. Hierzu eignet sich ein Freitextfeld.

    3. Fahrerlaubnis

    Setzt Ihre ausgeschriebene Position voraus, dass Auto oder LKW gefahren werden muss, sollten Sie nach der Fahrerlaubnis fragen. Es gibt verschiedene Befugnisse für die einzelnen Führerscheinklassen, eine Übersicht finden Sie beim TÜV Süd. Umfasst Ihre Stelle, dass Personen befördert werden, vergessen Sie nicht zu fragen, ob ein Personenbeförderungsschein vorliegt.

    4. Weitere K.O.-Kriterien

    Weitere K.O.-Kriterien sind die Verfügbarkeit und Gehaltsvorstellungen. Ist Ihr Bewerber oder Ihre Bewerberin nicht in der benötigten Arbeitszeit verfügbar, braucht man ihn oder sie gar nicht erst zum Interview einzuladen.Liegen die Gehaltsvorstellung weit abseits Ihrer Vorstellungen, können Sie im Gespräch nachhaken, statt am Ende aller Interviews vom Hocker zu fallen.

    Fachspezifische K.O.-Fragen

    Kann der Bewerber oder die Bewerberin überhaupt das, was wir benötigen? Bei onapply nutzen wir zwei Methoden, um das herauszufinden.

    Wir fragen nach Fähigkeiten in bestimmten Bereichen

    Stellen wir uns mal vor, wir schreiben gerade eine Design-Stelle aus. Im Bewerberfragebogen fragen wir dann nach den Fähigkeiten in Photoshop, InDesign, Adobe XD, Premier Pro und CAD.Für uns ist erstmal nur relevant, ob InDesign und XD beherrscht werden. Die anderen Programme fragen wir nur zum Test ab. Würde die Person, die sich auf die Stelle bewirbt nur Premier Pro und CAD können, kommt sie für uns nicht infrage.

    Wir stellen detaillierte Fragen

    Detaillierte Fragen sind notwendig, um herauszufinden, wie gut die Kenntnisse des*der Bewerbe*in wirklich sind. Das finden wir ähnlich heraus, wie wir es auch mit den Sprachkenntnissen machen. In unserem Design-Beispiel fragen wir zum Beispiel “Warum kann an die Farbe Weiß nicht im HKL oder CMYK Farbraum nutzen? Wie hinterlegt man die Farbe für den Druck?”. Die Antwort sollte allen Designer*innen bewusst sein, die schon mal eine Visitenkarte gestaltet haben.Vielleicht möchten Sie jetzt gerne einwenden:
    Was ist, wenn die Antwort gegoogelt wird?
    In diesem Fall rechnen wir es der Person an, dass sie weiß, wie sie sich das nötige Wissen beschafft. Nach einigen Jahren Praxis können wir sicher sagen: Sie wären überrascht, wie wenige Bewerber*innen auf die Idee kommen zu googlen.

    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.