Styleguide for Beats and Sheets

Colors

Brand Color - Orange-Brown-Mix

--color-primary-10

#FFF2E6

--color-primary-20

#FFE0B8

--color-primary-30

#FFD199

--color-primary-40

#FFC074

--color-primary-50

#FFB055

--color-primary-60

#F29C1D

--color-primary-70

#D6851B

--color-primary-80

#B76F19

--color-primary-90

#985816

--color-primary-100

#7A4314

Neutral Colors

--color-neutral-10

#FAFAFA

--color-neutral-20

#F0F0F0

--color-neutral-30

#E0E0E0

--color-neutral-40

#CFCFCF

--color-neutral-50

#B5B5B5

--color-neutral-60

#9E9E9E

--color-neutral-70

#858585

--color-neutral-80

#757575

--color-neutral-90

#5A5A5A

--color-neutral-100

#3C3C3C

Accent Colors

--color-green-10

#DFF4E6

--color-green-80

#3FA85A

--color-green-100

#2A6E3A

--color-orange-10

#FFF3D8

--color-orange-80

#F29C1D

--color-orange-100

#8A520D

--color-red-10

#F9E1E1

--color-red-20

#F7DCDC

--color-red-80

#D64545

--color-red-90

#7A1F1F

--color-red-100

#7B2525

--color-blue-10

#DCE7F8

--color-blue-100

#234A7B

Typography & Text Styles

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Labels

Practicing Editing Ready Important

This is a song's Title

This is a music sheet Text

Chord Highlights

Am Am Am Am Am Am

Text & Inline

Normaler Absatz mit strong, em, b, i, u, mark , code, kbd, small, _sub, ^sup.

HTML und heute .

Blockquote Text mit Standard-Styles.
Quelle

Inline-Zitat mit q-Element.

function hello() {
  console.log('Hello World');
}

Links

Link

Messages

Please use the Format +## ### #######

Form was submitted successfully!

Don’t forget to save the sheet!

Please fill out all the required fields!

Please use the Format +## ### #######

Form was submitted successfully!

Don’t forget to save the sheet!

Please fill out all the required fields!

Lists

since we don't use lists except for the navigation, we only have the reset and the navigation uses the styling of Links

Form, Form elements & Buttons

⌕

Formularfelder

Text: This is a Field info

E-Mail: Error for invalid input

Passwort:

Checkbox: Text

Radio: Option 1 Option 2

Toggle Text

Nummer:

Datum:

Select:

Textarea:

Cards

Song Name	Author	Date Added ▾	Status
Song #1	Someone	2/02/2024	Ready
Song #2	Someone Else	05/07/2023	Practicing

These are the cards they have different border-radius so thy look good if we need to use them within each other.

Tables

Beispieltabelle
Head 1	Head 2
Zelle 1	Zelle 2

Media

We don't really display images, so we didn't style this!

Samples

My Songs

⌕