Alles an einem Ort: Lernen, Fortschritt, Erfolg

Typography Demo

H1 Headline, Inter, sans-serif, bold 700

H2 Headline, Inter, sans-serif, bold 700

H3 Headline, Inter, sans-serif, Semibold 600

H4 Headline, Inter, sans-serif, Semibold 600

H5 Headline, Inter, sans-serif, Medium 500
H6 Headline, Inter, sans-serif, Medium 500

P Fliesstext, Inter, sans-serif, regular bold italic

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

display-xl Inter 700, 64/40, 1.05
Hero headline for a product page
h1 / .wt-h1 Inter 700, 56/36, 1.1

Page headline with native H1

h2 / .wt-h2 Inter 700, 45/30, 1.15

Section headline with native H2

h3 / .wt-h3 Inter 600, 35/24, 1.2

Subheadline with native H3

h4 / .wt-h4 Inter 600, 28/20, 1.25

Small headline with native H4

h5 / .wt-h5 Inter 500, 24/18, 1.3
Tiny headline with native H5
h6 / .wt-h6 Inter 500, 20/16, 1.35
Micro headline with native H6
body-lg Inter 400, 20/18, 1.5

Large body text works well for lead copy, short introductions, and important supporting text below a headline.

body / .body-default Inter 400, 18/16, 1.55

Default body text for standard paragraphs, product descriptions, content pages, and general interface copy.

body-sm Inter 400, 16/14, 1.5

Small body text for secondary descriptions, helper text, dense content, and supporting interface details.

caption Inter 500, 14/12, 1.4

Caption or label text for meta information, short annotations, tags, and compact labels.

Frontend colors

–ycona-blue900
#0b2133

–ycona-blue800
#032a51

–ycona-blue700
#054079

–ycona-blue600
#06488a

–ycona-blue500
#0755a2

–ycona-blue400
#3977b5

–ycona-blue300
#83aad1

–ycona-blue200
#dfe9f3

–ycona-blue100
#f7f9fc

–off-white1
#f8f8f8

–off-white2
#efefef

–off-white3
#dddddd

–off-white4
#fafafa

–white
#ffffff

–ycona-yellow1
#fec72d

–ycona-yellow2
#eaab1d

Primary button

Idle state

Lorem ipsum

Background-color: –ycona-yellow1 (#fec72d)
color: –white (#ffffff)
font-weight:700

hover state

Lorem ipsum

Background-color: –ycona-yellow2 (#eaab1d)
color: –white (#ffffff)
font-weight:700

Secondary button

Idle state

Lorem ipsum

Background-color: –ycona-blue800 (#032a51)
color: –white (#ffffff)
font-weight:700

hover state

Lorem ipsum

Background-color: –ycona-blue500 (#0755a2)
color: –white (#ffffff)
font-weight:700

Tertiary button

Idle state

Lorem ipsum

Background-color: –white (#ffffff)
color: –ycona-blue800 (#032a51)
border-color: –ycona-blue800 (#032a51)
border-width: 3px
font-weight:700

hover state

Lorem ipsum

Background-color: –ycona-blue200 (#dfe9f3)
color: –ycona-blue800 (#032a51)
border-color: –ycona-blue800 (#032a51)
border-width: 3px
font-weight:700

utility classes .wt-h1 through .wt-h6
Utility H1 class on a div
Utility H2 class on a div
Utility H3 class on a div
Utility H4 class on a div
Utility H5 class on a div
Utility H6 class on a div

Kontakt