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

u-line-clamp-3

u-line-clamp-4

Typography Elements

Ordered List

This is some text
This is some text
This is some text

This is some text
This is some text
This is some text

This is some text
This is some text
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

Color

Themes

data-theme="light"

Heading

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

Text Link

data-theme="dark"

Heading

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

Text Link

data-theme="invert"

Heading

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

Text Link

data-theme="inherit"

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

Lorem ipsum dolor

u-link-color-secondary

Lorem ipsum dolor

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

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

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.

Funktionen

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

Item 1
Item 2
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

Block quote

Ordered list

Item 1
Item 2
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.

Jetzt Erstgespräch anfragen

Cookie Zustimmung
Diese Website verwendet Cookies, mit denen die Website funktioniert und wie Sie mit ihr interagieren, damit wir Ihnen eine verbesserte und angepasste Benutzererfahrung bieten können. Wir werden die Cookies nur verwenden, wenn Sie dem zustimmen, indem Sie auf Akzeptieren klicken. Sie können auch einzelne Cookie-Einstellungen in den Einstellungen verwalten.

Einstellungen Alle ablehnen Alle akzeptieren

Timur Özcan

Geschäftsführer - Kundenberatung

Das erwartet Sie:

In einem kurzen Expertengespräch erhalten Sie einen praxisnahen Einblick in das neue KI-gestützte Bewerbungsscreening von OnApply. Sie erfahren, wie Sie Bewerbungen automatisiert analysieren, schneller die passenden Kandidaten identifizieren und gleichzeitig alle DSGVO- und EU-AI-Act-Anforderungen sicher erfüllen.

Schnellere Vorauswahl: Identifizieren Sie qualifizierte Kandidaten in Sekunden durch strukturierte KI-Analyse und klare Bewertungskriterien.

Rechtssichere KI-Nutzung: Profitieren Sie von einer vollständig DSGVO-konformen und rechtlich geprüften Lösung – inklusive Human-in-the-Loop-Prinzip.

Mehr Effizienz im Recruiting: Reduzieren Sie manuellen Aufwand und beschleunigen Sie Ihren gesamten Recruiting-Prozess spürbar.

2.500+ erfolgreiche Kunden aus dem Mittelstand seit 2012

Wir helfen mittelständigen Unternehmen und Start-Ups einen exzellenten Rekrutierungsprozess in ihrem Unternehmen zu etablieren und Bewerber*innen von ihnen zu begeistern.

Über 170.000 Bewerbungen im letzten Jahr für Kunden generiert

Bringen auch Sie Ihr Recruiting auf das nächste Level.

Jetzt Erstgespräch anfragen

Unsere größte Herausforderung war die unstrukturierte Vorauswahl – mit OnApply haben wir es geschafft, den Prozess sinnvoll zu gestalten und die Qualität der Bewerber stark zu erhöhen.

Solomiya Terletska

Geschäftsführerin, Levari GmbH

Seit wir OnApply nutzen, haben wir eine höhere Anzahl an qualifizierten Bewerbungen erhalten und können diese dank der effizienten Verwaltung gezielt bearbeiten.

Thomas Müller

Chief People Officer, Pharma-Unternehmen mit 5.000 Mitarbeitenden

Unsere größte Herausforderung war die unstrukturierte Vorauswahl – mit OnApply haben wir es geschafft, den Prozess sinnvoll zu gestalten und die Qualität der Bewerber stark zu erhöhen.

Solomiya Terletska

Geschäftsführerin, Levari GmbH

Seit wir OnApply nutzen, haben wir eine höhere Anzahl an qualifizierten Bewerbungen erhalten und können diese dank der effizienten Verwaltung gezielt bearbeiten.

Thomas Müller

Chief People Officer, Pharma-Unternehmen mit 5.000 Mitarbeitenden

Unsere größte Herausforderung war die unstrukturierte Vorauswahl – mit OnApply haben wir es geschafft, den Prozess sinnvoll zu gestalten und die Qualität der Bewerber stark zu erhöhen.

Solomiya Terletska

Geschäftsführerin, Levari GmbH

Seit wir OnApply nutzen, haben wir eine höhere Anzahl an qualifizierten Bewerbungen erhalten und können diese dank der effizienten Verwaltung gezielt bearbeiten.

Thomas Müller

Chief People Officer, Pharma-Unternehmen mit 5.000 Mitarbeitenden

Dank OnApply sparen wir Zeit und Ressourcen bei der Verwaltung und Bearbeitung von Bewerbungen und können uns auf die wesentlichen Aufgaben im Bewerbungsprozess konzentrieren.

Magnus Keller

Geschäftsführer Immobilienunternehmen mit 50 Mitarbeitenden

Es war noch nie einfacher, Bewerbungen zu erhalten. Wir haben es zuerst nicht geglaubt, aber die Rekrutierung von neuen Mitarbeitenden wurde so viel einfacher.

Ute Noll

Senior HR-Business Partnerin, Luft und Raumfahrt-Unternehmen mit 200 Mitarbeitenden

Dank OnApply sparen wir Zeit und Ressourcen bei der Verwaltung und Bearbeitung von Bewerbungen und können uns auf die wesentlichen Aufgaben im Bewerbungsprozess konzentrieren.

Magnus Keller

Geschäftsführer Immobilienunternehmen mit 50 Mitarbeitenden

Es war noch nie einfacher, Bewerbungen zu erhalten. Wir haben es zuerst nicht geglaubt, aber die Rekrutierung von neuen Mitarbeitenden wurde so viel einfacher.

Ute Noll

Senior HR-Business Partnerin, Luft und Raumfahrt-Unternehmen mit 200 Mitarbeitenden

Dank OnApply sparen wir Zeit und Ressourcen bei der Verwaltung und Bearbeitung von Bewerbungen und können uns auf die wesentlichen Aufgaben im Bewerbungsprozess konzentrieren.

Magnus Keller

Geschäftsführer Immobilienunternehmen mit 50 Mitarbeitenden

Es war noch nie einfacher, Bewerbungen zu erhalten. Wir haben es zuerst nicht geglaubt, aber die Rekrutierung von neuen Mitarbeitenden wurde so viel einfacher.

Ute Noll

Senior HR-Business Partnerin, Luft und Raumfahrt-Unternehmen mit 200 Mitarbeitenden