Typography
--scale-3xl
1.8rem
Headline 1, Text in Compound Commands
--scale-2xl
1.6rem
Headline 2
--scale-xl
1.4rem
Headline 3
--scale-lg
1.2rem
Headline 4
--scale-base
1rem
Normal Text, Command Label
--scale-sm
0.85rem
Small Text, Panel Footer
Spacing
--spacing-xs
2px
--spacing-sm
6px
--spacing
10px
--spacing-lg
14px
Colors
Primary
Shade 1
Shade 2
Shade 3
Warn
Usage
100
Text Color
500
Active/Focus State
600
Border/Flash Color
700
Corner Color
800
Command Color
950
Background
Page Layout
Choose yourself whether the body should scroll or the body should have a fixed width of 100%. For the latter, you should use one or more top-most panels which then will scroll their content.
You can see both options and how to implement them by toggling the
class height-100 on the html element of
this demo page.
Command
Default
Outline
Flashing
Disabled
Abbreviations for small screens
When rendered on small screens (<640px) an abbreviation can be
used to reduce the space a command needs. When doing so, the text
node of the command should be empty and two
data- attributes should be used:
data-label and data-abbr.
In order to see the difference below, reduce/increase the browser window width.
Wrapping
The command's text is wrapped by default which increases the height of the command.
If you want to use ellipsis and a single line of text, a wrapper element is needed. See page's source code for details.
Double check if ellipsis is really needed and if yes, that the full text is visible with another interaction (no tooltip, since not mobile friendly and not in the sense of the Ada look and feel).
Compound
With Text
Vertical
Panel
Without Header and Footer
With Header and Footer
With another color variant
Stacking
The panel has a translucent background, so when stacking multiple panels the background changes slightly with each level.