Style Guide

Lumos | v2.0.4
Components

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

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

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.

Jetzt starten–kostenlos
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

  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.

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.
EinstellungenAlle ablehnenAlle akzeptieren
OnApply-KI-Generator

Stellenanzeigen KI-Generator

Mit dem OnApply-KI-Generator erstellen Sie in wenigen Klicks überzeugende Stellenanzeigen, basierend auf Daten aus über 10.000 erfolgreichen Anzeigen und wissenschaftlichen Studien.

Bitte Business-E-mail verwenden.

100% gratis

Danke! Prüfen Sie Ihre Emails.
Oops! Etwas ist schief gelaufen. Bitte versuchen Sie es noch einmal.

Erstellen Sie in wenigen Minuten professionelle, suchmaschinenoptimierte und ansprechende Stellenanzeigen.
Dieser GPT analysiert die wichtigsten Jobparameter (z. B. Rolle, Standort, Anforderungen, Benefits) und erstellt daraus automatisch überzeugende Texte, die Bewerber:innen ansprechen – auf Deutsch oder Englisch.

Ihre Vorteile:

  • Spart wertvolle Zeit bei der Texterstellung
  • Sorgt für konsistente Arbeitgeberkommunikation
  • Optimiert Sprache und Struktur für mehr Bewerbungen
  • Funktioniert auf Deutsch und Englisch
1

Wählen Sie die Sprache

2

Geben Sie eine Anweisung

3

Finalisieren Sie die Stellenanzeige

Jetzt Zugang sichern

Bitte Business-E-mail verwenden.

100% gratis

Danke! Prüfen Sie Ihre Emails.
Oops! Etwas ist schief gelaufen. Bitte versuchen Sie es noch einmal.

Fragen zum KI-Agenten

Hier ein paar der häufig gesetelltesten Fragen zu unserem OnApply-GPT:

Timur Özcan
OnApply
00:00
/
00:00
Yannik Harney
OnApply
00:00
/
00:00
Testimonials

2.500+ OnApply Fans

Lesen Sie, was unsere Kunden an unserer Software begeistert:

Als kleines Unternehmen ist es schwer, Bewerber zu finden. Mit OnApply haben wir mehr Bewerbungen erhalten und konnten die besten Talente für uns gewinnen.
Vera Zürg
Geschäftsführerin, Verlagsunternhmen mit 20 Mitarbeitenden
Vorher haben wir monatelang nach Bewerbern gesucht – mit OnApply hatten wir in 30 Tagen drei Top-Kandidaten! Ich hätte nie gedacht, dass Recruiting so effizient laufen kann.
Raoul Schäffer
Geschäftsführer im Industriegüter-Unternehmen mit 300 Mitarbeitenden
Dank der automatisierten Terminbuchung musste ich mich nur noch in die Interviews setzen. Wir haben innerhalb von 6 Wochen zwei Stellen besetzt – ganz ohne Stress.
Natalie Gobereit
Geschäftsführerin Start-Up Beratung
Unsere Stellenanzeige wurde auf den richtigen Plattformen platziert – innerhalb kürzester Zeit hatten wir mehr qualifizierte Bewerbungen als je zuvor!
Gisela Sobrowskaia
Personalreferent, Mittelstand 2.000 Mitarbeitende
Recruiting war für uns immer ein Problem – zu wenig Zeit, zu viele unpassende Bewerber. Mit OnApply haben wir jetzt einen kontinuierlichen Strom an passenden Kandidaten!
Sarah Berendt
COO eines Logistikunternehmens - 40 Mitarbeitende
Ich war skeptisch, ob Recruiting wirklich so einfach funktionieren kann – aber das System hat mich überzeugt! Drei perfekte Mitarbeiter innerhalb von zwei Monaten – und das ohne teure Headhunter!
Daniel Wächter
Geschäftsführer eines Finanzdienstleisters - 35 Mitarbeitende

Bessere Stellenanzeige + Bessere Jobbörsen = Bessere Bewerbungen

OnApply hilft ihnen ihre Stellenanzeige zu verbessern, ihren Bewerbungsprozess zu beschleunigen und die richtige Person einzustellen.

Jetzt Erstgespräch anfragen
Customer Stories

OnApply-Kunden und ihre Erfolge

Unsere Rekrutierungssoftware hilft schneller gute Mitarbeiter*innen zu finden. Unsere Kund*innen schätzen dabei unterschiedliche Vorteile von OnApply.

Alle Stories
Von Excel zur skalierbaren Recruiting-Lösung – wie Mylily mit OnApply über 30 Teammitglieder gewann
E-Commerce / Direct-to-Consumer (D2C)

Von Excel zur skalierbaren Recruiting-Lösung – wie Mylily mit OnApply über 30 Teammitglieder gewann

Digitale Recruiting-Lösung für E-Commerce: Mehr Struktur, weniger Aufwand

Mehr erfahren
Strukturierte IT-Rekrutierung für internationale Kunden – mit OnApply zur spürbaren Qualitätssteigerung
IT-Dienstleister

Strukturierte IT-Rekrutierung für internationale Kunden – mit OnApply zur spürbaren Qualitätssteigerung

Digitale Recruiting-Lösung für IT-Dienstleister: Bessere Prozesse, bessere Bewerber

Mehr erfahren

Rufen Sie uns an oder schreiben Sie uns eine kurze E-Mail, wir freuen uns, Sie kennenzulernen und Sie zu beraten.

+49 (0)69 348 7986 0
info@onapply.de

On-apply GmbH
Schumannstraße 27

60325 Frankfurt am Main