Laws are immutable rules that dictate the appearance and behavior of all components.
Width and Resolution
Maestro does not support mobile screenwidths. It is designed for screenwidths greater than 1024px. Images should support both standard and 2x resolution. There is consideration underway for a cinema width layout.
Depth
Maestro has two concepts for depth that work together to determine z-index. The first is global layers, and the second is local layers. Global layers contain local layers within it. This means that any local layer can only ascend to the top of its global layer and no further. An additional detail, only one modal can exist on the page at one time. The same is true for menus and tooltips
Product Colors
The following colors are for in product UI. Please use this stylesheet. To make things easier, shades are in values divisible by eight. Colors labeled AA conform to W3C Accessiblility standards with a rating of AA. All colors are non-transparent. Save these colors to Sketch.
$color_blue: #0070E0
$color_blue_light: #007AF5
$color_blue_dark: #005DD6
$color_blue_forty: #99C6F3
$color_blue_sixteen: #D6E8FA
$color_blue_eight: #EBF4FD
Use Blue for primary buttons and links. Light and dark are for hover and down states respectively. Blue_forty is for stroke color on selected rows. Blue_sixteen is for background color on a selected row. Blue_eight is the background color for cells displaying an unread state.
$color_ink: #1B2733
Use Ink for all standard body text.
$color_stone: #637282
$color_stone_light: #6A7C8F
$color_stone_dark: #536170
$color_stone_forty: #C1C7CD
$color_stone_sixteen: #E6E8EB
Use Stone for secondary text or secondary links. Light and Dark are for hover and down states respectively. Stone_forty is for strokes around secondary buttons and forms. Otherwise Stone_sixteen is the standard color of strokes.
$color_chalk: #F7F9FA
$color_white: #FFF
Chalk is used as a neutral background. The main examples are the global navigation and Modal footer. White is the standard color for the content container.
$color_cherry: #D62C0B
Cherry is for warning text. If something is wrong, like an input field was incorrectly filled out. Or if something is dangerous like you are deleting something.
$color_kiwi: #0D8424
Green is for success text. Space was added to your Dropbox! You successfully did whatever!
$color_plum: #6C16DB
$color_guava: #D31C92
$color_mint: #00755F
Avatar and Illustration Colors (in Review)
$color_blueberry: #344063
$color_blueberry_illo: #505A78
$color_grape: #9B49F2
$color_grape_illo: #C89BF8
$color_watermelon: #FF6EB6
$color_watermelon_illo: #FFA1D0
$color_tomato: #F25123
$color_tomato_illo: #F79C82
$color_tangerine: #FF8E21
$color_tangerine_illo: #FFC185
$color_banana: #FFC726
$color_banana_illo: #FFE28F
$color_apple: #91D44A
$color_apple_illo: #BEE594
$color_lime: #3DCC5E
$color_lime_illo: #7FDE95
$color_snozzberry: #00D6B6
$color_snozzberry_illo: #78E9D8
$color_squash: #3BA0F3
$color_squash_illo: #B3D8F6
Transparent Colors
$color_blue opacity 30
$color_ink opacity 30
$color_stone opacity 30
Colors take on 30% transparency for disabled states.
$color_stone opacity 50: #637282
$color_stone opacity 16: #637282
$color_ink opacity 8: #1B2733
There are only three cases for non-disabled transparent color. One for the shaded overlay behind a modal window which uses Color_stone at a 50% opacity. And second, for popover and modal borders which uses Color_stone at 16% opacity so that it properly interacts with casted shadows, which (third and final case) use Color_ink at 8% opacity.
Dropshadow
Type Scale and line-height
30px - Marketing headline Marketing only
20px - Page titles
18px - Marketing and setup taglines Marketing only
16px - App Names (Files, Paper, Chime)
14px - Button labels, input, descriptions, file names
12px - Table headers, Meta