FONTS
Headline lorem ipsum dolor.
Headline lorem dolor sit
SUBHEADLINE: font: Museo 500, color #888888, size 24
Headline lorem ipsum dolor sit amet.
HEADLINE: font: Museo 500, color #888888, size 48
Subheadline lorem ipsum dolor sit amet. BODYTEXT: font: Museo 500, color #333333, size 14
Headline lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
FONTS
HEADLINE: font: Museo 500, color #888888
Headline highlight lorem ipsum dolor. HEADLINE: font: Museo 500, color #888888
Subheadline lorem ipsum highlighted text dolor sit amet. BODYTEXT: font: Museo 500, color #333333
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, highlighted body quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
BUTTONS
Active
Disabled
With Icon
HEADLINE: font: Museo 500, size 24 6px
44px
A min 12px
12px
Text 12px
12px
icon < 32px
A min 12px
24px
BUTTON ICONS
HEADLINE: font: Museo 500, color #888888 32x32 matrix to create button icons 44px
140px
180px
New Play again Share Report Record Remove
220px
COLOR RANGES
color #1F283A
color #AAAAAA 6px
24px
Headline lorem dolor sit Headline lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Gray behind Headline lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Play again 24px
PARAGRAPH AND LEADING
leading 100% 48pt leading 100% 24pt
Headline lorem dolor sit
10px
Headline lorem ipsum dolor sit amet. 20px
Lorem ipsum dolor sit amet, consec leading 21pt tetuer adipiscing elit, sed diam nonum my nibh.
Title or Source of the video Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...
27% Emotion 1: 25% Emotion 2: 12% Emotion 3: Emotion 4: 9% Emotion 5: 6% Emotion 6: 4% Concentration: 43 1:21
1:14 emotion 1
emotion 2
emotion 3
2:32 emotion 4
emotion 5
3:21 emotion 5
Report
0:52
0:11 emotion 1
1:48 emotion 2
emotion 3
emotion 4
3:21 emotion 5
emotion 5
27% Emotion 1: 25% Emotion 2: 12% Emotion 3: Emotion 4: 9% Emotion 5: 6% Emotion 6: 4% Concentration: 43 1:21
1:14 emotion 1
emotion 2
emotion 3
2:32 emotion 4
emotion 5
3:21 emotion 5
27% Emotion 1: 25% Emotion 2: 12% Emotion 3: Emotion 4: 9% Emotion 5: 6% Emotion 6: 4% Concentration: 43 1:21 emotion 1 emotion 2 emotion 3 emotion 4 emotion 5 emotion 6 focus
1:14
2:32
3:21
TOOLTIPS
Tooltip H
Tooltip V
Tooltip vertical
Tooltip Horizontal
6px
6px
44px
44px 12px 12px
12px 12px
BUTTON EVENTS
MouseOut MouseOut 6px
MouseOver MouseDown
MouseOver 8px
5px
48px
44px
Outline +2px
42px
Outline -1px
POPUP DIALOGS
color #1F283A
color #6C0E00 6px
24px
24px
pictogram (optional)
pictogram (optional)
24px
Headline lorem ipsum dolor sit amet.
Sorry, Headline lorem ipsum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Continue
Retry 24px
POPUP COLOR CODES
#1F283A
#6C0E00
For normal warnings.
For problems and errorrs
#009CA7
#C88700
For succesful processes
Temporal popups, loadings
SelectMenu
SelectMenu Museo 500, size 24 6px
44px
A min 12px
Opacity 30%
12px
Text
12px
12px 44px