Style Guide

Light theme

Surfaces

Surface 1
Code
Surface 1
Surface 2
Code
Surface 2
Surface 3
Code
Surface 3
Surface 4
Code
Surface 4

Text colours

Text 1
Code
Text 1
Text 2 on surface 2
Code
Text 2 on surface 2
Text 2 on surface 4
Code
Text 2 on surface 4
Text 3 on surface 3
Code
Text 3 on surface 3

Typography

Default font

Optima, Candara, Noto Sans, source-sans-pro, sans-serif
Code

Default font

Optima, Candara, Noto Sans, source-sans-pro, sans-serif

Greek font/edition font

source-sans-pro, Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif
Code

Greek font/edition font

source-sans-pro, Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong
Emphasis
Code

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong
Emphasis

Badges

Default badge
Code
Default badge
Strong badge
Code
Strong badge

Buttons

Code
Code
Code
Code

Inputs

Code
Code

Slider

Code

Edition

1 line 1
2 line 2
3 line 3
Code
1 line 1
2 line 2
3 line 3

Tabs

Code

Dark theme

Surfaces

Surface 1
Code
Surface 1
Surface 2
Code
Surface 2
Surface 3
Code
Surface 3
Surface 4
Code
Surface 4

Text colours

Text 1
Code
Text 1
Text 2 on surface 2
Code
Text 2 on surface 2
Text 2 on surface 4
Code
Text 2 on surface 4
Text 3 on surface 3
Code
Text 3 on surface 3

Typography

Default font

Optima, Candara, Noto Sans, source-sans-pro, sans-serif
Code

Default font

Optima, Candara, Noto Sans, source-sans-pro, sans-serif

Greek font/edition font

source-sans-pro, Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif
Code

Greek font/edition font

source-sans-pro, Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong
Emphasis
Code

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Strong
Emphasis

Badges

Default badge
Code
Default badge
Strong badge
Code
Strong badge

Buttons

Code
Code
Code
Code

Inputs

Code
Code

Slider

Code

Edition

1 line 1
2 line 2
3 line 3
Code
1 line 1
2 line 2
3 line 3

Tabs

Code