Elements

Colors

$green

var(--green)

#73ba25

$teal

var(--teal)

#173f4f

$turquoise

var(--turquoise)

#35b9ab

$blue

var(--blue)

#21a4df

$yellow

var(--yellow)

#ffc107

$red

var(--red)

#dc3545

$orange

var(--orange)

#fe7f2d

$white

var(--white)

#ffffff

$gray-100

var(--gray-100)

#f8f9fa

$gray-200

var(--gray-200)

#e9ecef

$gray-300

var(--gray-300)

#dee2e6

$gray-400

var(--gray-400)

#ced4da

$gray-500

var(--gray-500)

#adb5bd

$gray-600

var(--gray-600)

#6c757d

$gray-700

var(--gray-700)

#495057

$gray-800

var(--gray-800)

#343a40

$gray-900

var(--gray-900)

#212529

$black

var(--black)

#000000

Fonts

All fonts are pre-installed in all openSUSE desktop distributions. So we can maximize the loading experience of openSUSE users.

Source Sans Pro

Source Sans Pro is used in all normal texts.

Source Sans Pro Bold

Source Sans Pro Bold is used in headings, strong text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is an important thing.

Source Code Pro

Source Code Pro is used in code examples.

sudo zypper install retroarch

Icons

opensuse

opensuse-button

leap

tumbleweed

<svg class="icon">
  <use xlink:href="#leap">
</svg>

More icons can be found at Remix Icon. Note: you need append -fill or -line to the name of icons from Remix Icon.

<svg class="icon">
  <use xlink:href="#home">
</svg>