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.

Die Zeit von der Ausschreibung bis zur Einstellung (Time to Hire) ist eine wichtige Kennzahl.

Es ist nicht nur wichtig, dass Ihre offene Stelle schnell besetzt wird, sondern auch, dass der/die Bewerber*in schnelles Feedback bekommt. Sonst sehen Sie gegen die Konkurrenz alt aus und der/die Bewerber*in ist schon vergeben. In diesem Artikel zeigen wir Ihnen ein paar Tipps und Tricks, wie Sie die Zeit bis zur Einstellung verkürzen.

Haben Sie immer Bewerber*innen in der Pipeline!

Versuchen Sie sich einen Bewerberpool aufzubauen und konstantes Rekrutierungsmarketing zu betreiben, intern sowie extern. So können Sie sofort Bewerber*innen aus Ihrem Repertoire ansprechen, die auf die offene Stelle passen oder diese zumindest informieren. Gute Faustregel: Haben Sie für jede Stelle immer schon drei Ersatzpersonen bereit.

Wenn Sie sich jetzt fragen, wie Sie genügend Bewerber*innen in Ihren Bewerberpool bekommen, dann haben wir hier ein paar Ansätze:

  • Lassen Sie z. B. Ihre Stellenanzeige weiterlaufen, obwohl die Stelle schon besetzt ist.
  • Veranstalten Sie Rekrutierungsevents.
  • Bauen Sie ein Empfehlungsnetzwerk auf.
  • Versuchen Sie in Ihrer Region präsent zu sein.

  • Nicht vergessen: Pflegen Sie Ihren Bewerberpool regelmäßig. Informieren Sie die Bewerber*innen über neue offene Stellen, Events, besondere Ereignisse in Ihrem Unternehmen oder suchen Sie den direkten Kontakt.

    >Wussten Sie, dass Sie sich mit onapply PRO einen Talentpool aus qualifizierten Bewerber*innen aufbauen können? Auf diesen können Sie dann bei der nächsten zu besetzenden Stelle zurückgreifen.

    Haben Sie immer eine Stellenbeschreibung bereit!

    Seien Sie wie die Pfadfinder*innen immer allzeit bereit. Haben Sie für alle Stellen ein Profil parat. Nutzen Sie den Input Ihrer Mitarbeiter*innen aus Beurteilungsgesprächen, um das Stellenprofil auf dem Laufenden zu halten. Lesen Sie in unserem Blogartikel »10 Tipps, wie Sie Ihre Stellenanzeige attraktiver gestalten« mehr zu dem Thema.

    Machen Sie Ihre Personalplanung im Voraus!

    Haben Sie einen festen Personalplan. Wenn Sie wissen, wen Sie über das Jahr einstellen wollen und wer ein*e Wackelkandidat*in ist, gibt es weniger Überraschungen.

    Verkürzen Sie den internen und externen Prozess!

    Das heißt kurze Genehmigungsprozesse, kurze Ausschreibungswege, kurze Bewerbungsprozesse, schnelle Rückmeldung bei Kandidat*innen, schneller Auswahlprozess, schnelles Onboarding von neuen Mitarbeiter*innen.

    Nutzen Sie Tools zur Unterstützung des Rekrutierungsprozesses!

    Mit Bewerbermanagement-Systemen können Sie Ihren Hiring Cycle um 50 % verkürzen. Arbeitsprozesse werden effektiver gestaltet und die Rekrutierung wird beschleunigt. Mit unserer Bewerbermanagement-Software onapply PRO dauert der Hiring Cycle statt 42 Tage nur noch 21 Tage.
    Was ein gutes Bewerbermanagement-System ausmacht und worauf Sie bei der Einführung achten sollten, können Sie hier nachlesen!

    Fazit Time to Hire verkürzen

    Ein Punkt, den ich noch hervorheben möchte, ist Ihre Bewerber*innen sind aktiv auf der Suche nach einem neuen Job. Wenn Sie 3 Monate brauchen, um die Bewerber*innen zu kontaktieren, sind diese oft nicht mehr verfügbar. Damit vertreiben Sie effektiv die besten Bewerber*innen, da diese schnell Angebote von anderen bekommen! Also nichts wie ran. Prozesse kürzen und Bewerberpool aufbauen!

    So verkürzen Sie Ihre Time to Hire!

    Es ist nicht nur wichtig, dass Ihre offene Stelle schnell besetzt wird, sondern auch, dass der/die Bewerber*in schnelles Feedback bekommt.

    Zuletzt aktualisiert:
    3.12.2025

    Die Zeit von der Ausschreibung bis zur Einstellung (Time to Hire) ist eine wichtige Kennzahl.

    Es ist nicht nur wichtig, dass Ihre offene Stelle schnell besetzt wird, sondern auch, dass der/die Bewerber*in schnelles Feedback bekommt. Sonst sehen Sie gegen die Konkurrenz alt aus und der/die Bewerber*in ist schon vergeben. In diesem Artikel zeigen wir Ihnen ein paar Tipps und Tricks, wie Sie die Zeit bis zur Einstellung verkürzen.

    Haben Sie immer Bewerber*innen in der Pipeline!

    Versuchen Sie sich einen Bewerberpool aufzubauen und konstantes Rekrutierungsmarketing zu betreiben, intern sowie extern. So können Sie sofort Bewerber*innen aus Ihrem Repertoire ansprechen, die auf die offene Stelle passen oder diese zumindest informieren. Gute Faustregel: Haben Sie für jede Stelle immer schon drei Ersatzpersonen bereit.

    Wenn Sie sich jetzt fragen, wie Sie genügend Bewerber*innen in Ihren Bewerberpool bekommen, dann haben wir hier ein paar Ansätze:

  • Lassen Sie z. B. Ihre Stellenanzeige weiterlaufen, obwohl die Stelle schon besetzt ist.
  • Veranstalten Sie Rekrutierungsevents.
  • Bauen Sie ein Empfehlungsnetzwerk auf.
  • Versuchen Sie in Ihrer Region präsent zu sein.

  • Nicht vergessen: Pflegen Sie Ihren Bewerberpool regelmäßig. Informieren Sie die Bewerber*innen über neue offene Stellen, Events, besondere Ereignisse in Ihrem Unternehmen oder suchen Sie den direkten Kontakt.

    >Wussten Sie, dass Sie sich mit onapply PRO einen Talentpool aus qualifizierten Bewerber*innen aufbauen können? Auf diesen können Sie dann bei der nächsten zu besetzenden Stelle zurückgreifen.

    Haben Sie immer eine Stellenbeschreibung bereit!

    Seien Sie wie die Pfadfinder*innen immer allzeit bereit. Haben Sie für alle Stellen ein Profil parat. Nutzen Sie den Input Ihrer Mitarbeiter*innen aus Beurteilungsgesprächen, um das Stellenprofil auf dem Laufenden zu halten. Lesen Sie in unserem Blogartikel »10 Tipps, wie Sie Ihre Stellenanzeige attraktiver gestalten« mehr zu dem Thema.

    Machen Sie Ihre Personalplanung im Voraus!

    Haben Sie einen festen Personalplan. Wenn Sie wissen, wen Sie über das Jahr einstellen wollen und wer ein*e Wackelkandidat*in ist, gibt es weniger Überraschungen.

    Verkürzen Sie den internen und externen Prozess!

    Das heißt kurze Genehmigungsprozesse, kurze Ausschreibungswege, kurze Bewerbungsprozesse, schnelle Rückmeldung bei Kandidat*innen, schneller Auswahlprozess, schnelles Onboarding von neuen Mitarbeiter*innen.

    Nutzen Sie Tools zur Unterstützung des Rekrutierungsprozesses!

    Mit Bewerbermanagement-Systemen können Sie Ihren Hiring Cycle um 50 % verkürzen. Arbeitsprozesse werden effektiver gestaltet und die Rekrutierung wird beschleunigt. Mit unserer Bewerbermanagement-Software onapply PRO dauert der Hiring Cycle statt 42 Tage nur noch 21 Tage.
    Was ein gutes Bewerbermanagement-System ausmacht und worauf Sie bei der Einführung achten sollten, können Sie hier nachlesen!

    Fazit Time to Hire verkürzen

    Ein Punkt, den ich noch hervorheben möchte, ist Ihre Bewerber*innen sind aktiv auf der Suche nach einem neuen Job. Wenn Sie 3 Monate brauchen, um die Bewerber*innen zu kontaktieren, sind diese oft nicht mehr verfügbar. Damit vertreiben Sie effektiv die besten Bewerber*innen, da diese schnell Angebote von anderen bekommen! Also nichts wie ran. Prozesse kürzen und Bewerberpool aufbauen!

    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.