diff --git a/img/components/button_groups_intro.svg b/img/components/button_groups_intro.svg index 25d1e70..8520f9e 100644 --- a/img/components/button_groups_intro.svg +++ b/img/components/button_groups_intro.svg @@ -1,31 +1,31 @@ button_groups_intro - - More + + More - + Pages - + Other - + Talk diff --git a/img/components/button_groups_states.svg b/img/components/button_groups_states.svg index d637165..28cab53 100644 --- a/img/components/button_groups_states.svg +++ b/img/components/button_groups_states.svg @@ -1,206 +1,206 @@ button_groups_states - + - + - + - + Other Pages More - + Talk - - More + + More - - + + Pages - + Other - + Talk - - More + + More - + Pages - + Other - - More + + More - - More + + More - + Pages - + Pages - + Other - + Other - + Talk - Talk + Talk Talk - - More + + More - + Pages - + Other - + Talk - + - + - + Disabled Focus Selected Active Hover Normal diff --git a/img/components/buttons_designing.svg b/img/components/buttons_designing.svg index c0322dd..3789439 100644 --- a/img/components/buttons_designing.svg +++ b/img/components/buttons_designing.svg @@ -1,46 +1,46 @@ buttons_designing - + - - + + Button diff --git a/img/components/buttons_normal_and_primary_states.svg b/img/components/buttons_normal_and_primary_states.svg index 2073ecd..1c23717 100644 --- a/img/components/buttons_normal_and_primary_states.svg +++ b/img/components/buttons_normal_and_primary_states.svg @@ -1,171 +1,171 @@ buttons_normal_and_primary_states - + - + - + - + Normal Hover Active Focus Disabled Progressive Destructive Progressive - + Destructive Progressive - + Destructive Progressive Destructive Progressive Destructive Normal - + Normal - + Normal Normal - + Normal - + - + - + diff --git a/img/components/buttons_normal_intro.svg b/img/components/buttons_normal_intro.svg index 3f16760..1a9146b 100644 --- a/img/components/buttons_normal_intro.svg +++ b/img/components/buttons_normal_intro.svg @@ -1,21 +1,21 @@ buttons_normal_intro - - + + - + Normal diff --git a/img/components/buttons_quiet_states.svg b/img/components/buttons_quiet_states.svg index 6a89774..9560fc5 100644 --- a/img/components/buttons_quiet_states.svg +++ b/img/components/buttons_quiet_states.svg @@ -1,176 +1,176 @@ buttons_quiet_states - + - + - + - + Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Neutral - + Neutral - + Neutral Neutral - + Neutral - + - + - + Normal Hover Active Focus Disabled diff --git a/img/components/buttons_toggle_intro.svg b/img/components/buttons_toggle_intro.svg index af833c7..813966f 100644 --- a/img/components/buttons_toggle_intro.svg +++ b/img/components/buttons_toggle_intro.svg @@ -1,54 +1,54 @@ buttons_toggle_intro - - + + - - Toggle + + Toggle Toggle - + - - - + + + Normal Selected diff --git a/img/components/checkboxes_designing.svg b/img/components/checkboxes_designing.svg index 2b49fbd..1c54808 100644 --- a/img/components/checkboxes_designing.svg +++ b/img/components/checkboxes_designing.svg @@ -1,45 +1,45 @@ checkboxes_designing - + Option 2 - + Option 1 `vertical-align: middle` - + - + Checkbox group label diff --git a/img/components/checkboxes_indeterminate_intro_on.svg b/img/components/checkboxes_indeterminate_intro_on.svg index 4c6e068..4f470dd 100644 --- a/img/components/checkboxes_indeterminate_intro_on.svg +++ b/img/components/checkboxes_indeterminate_intro_on.svg @@ -1,58 +1,58 @@ checkboxes_indeterminate_intro_on - + Indeterminate – some children selected - + - - - + + + - + Unselected - + Selected - + Neutral point diff --git a/img/components/checkboxes_intro_off.svg b/img/components/checkboxes_intro_off.svg index 38bca6a..d596071 100644 --- a/img/components/checkboxes_intro_off.svg +++ b/img/components/checkboxes_intro_off.svg @@ -1,23 +1,21 @@ checkboxes_intro_off - - Neutral point + + Neutral point - - - + diff --git a/img/components/checkboxes_intro_on.svg b/img/components/checkboxes_intro_on.svg index c7bd827..bffb0fa 100644 --- a/img/components/checkboxes_intro_on.svg +++ b/img/components/checkboxes_intro_on.svg @@ -1,18 +1,32 @@ + - - - - Neutral point - - - - - - - - Neutral point - - + + checkboxes_intro_on + + + + + + + + + Neutral point + + + + + + + + + + + Neutral point + + + + + diff --git a/img/components/checkboxes_states.svg b/img/components/checkboxes_states.svg index 20746d3..577e688 100644 --- a/img/components/checkboxes_states.svg +++ b/img/components/checkboxes_states.svg @@ -1,266 +1,266 @@ checkboxes_states - + - + - + - + - + - + Normal Hover Active Focus Disabled Selected - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point diff --git a/img/components/comboboxes_designing.svg b/img/components/comboboxes_designing.svg index e93abf0..dcd61c0 100644 --- a/img/components/comboboxes_designing.svg +++ b/img/components/comboboxes_designing.svg @@ -1,61 +1,61 @@ comboboxes_designing - - + + Placeholder - + - + - + Label diff --git a/img/components/comboboxes_intro.svg b/img/components/comboboxes_intro.svg index 4cb7191..bfa3261 100644 --- a/img/components/comboboxes_intro.svg +++ b/img/components/comboboxes_intro.svg @@ -1,21 +1,21 @@ comboboxes_intro - - + + Placeholder - + diff --git a/img/components/comboboxes_states.svg b/img/components/comboboxes_states.svg index 0f6becf..df8925e 100644 --- a/img/components/comboboxes_states.svg +++ b/img/components/comboboxes_states.svg @@ -1,94 +1,94 @@ comboboxes_states Normal Hover Active Focus Expanded Menu Disabled - + - - + + - - + + - - + + Placeholder User input - + - - + + Placeholder Placeholder - + - + - + Placeholder - + - - + + - + Option 1 - + Option 2 - + diff --git a/img/components/dropdowns_designing.svg b/img/components/dropdowns_designing.svg index c23b4a1..52b2ea0 100644 --- a/img/components/dropdowns_designing.svg +++ b/img/components/dropdowns_designing.svg @@ -1,83 +1,83 @@ dropdowns_designing - + Item 1 selected - - + + - + - + - + Item 2 - + Item 1 - + Label diff --git a/img/components/dropdowns_intro.svg b/img/components/dropdowns_intro.svg index a19bc29..ccc984e 100644 --- a/img/components/dropdowns_intro.svg +++ b/img/components/dropdowns_intro.svg @@ -1,33 +1,33 @@ dropdowns_intro - - Neutral + + Select an item - + - - + + diff --git a/img/components/dropdowns_states.svg b/img/components/dropdowns_states.svg index 0824ff7..69e3f95 100644 --- a/img/components/dropdowns_states.svg +++ b/img/components/dropdowns_states.svg @@ -1,218 +1,218 @@ dropdowns_states - + - + - + Select an item - - + + - Select an item + Select an item - - + + - + - + - + Item 1 selected - - + + - + - + - + Item 2 - + Item 1 Select an item - + - + Select an item - - + + - + Normal Hover Active & Focus Expanded Menu & Focus Disabled diff --git a/img/components/file_inputs_designing.svg b/img/components/file_inputs_designing.svg index c00fc23..1fbbda0 100644 --- a/img/components/file_inputs_designing.svg +++ b/img/components/file_inputs_designing.svg @@ -1,69 +1,68 @@ file_inputs_designing - + Select a file - - - + + - + Label diff --git a/img/components/file_inputs_intro.svg b/img/components/file_inputs_intro.svg index 79eea4a..bc3a91b 100644 --- a/img/components/file_inputs_intro.svg +++ b/img/components/file_inputs_intro.svg @@ -1,26 +1,25 @@ file_inputs_intro - + - + Select a file - diff --git a/img/components/file_inputs_select_button_only_intro.svg b/img/components/file_inputs_select_button_only_intro.svg index f24115f..836d00c 100644 --- a/img/components/file_inputs_select_button_only_intro.svg +++ b/img/components/file_inputs_select_button_only_intro.svg @@ -1,33 +1,33 @@ file_inputs_select_button_only_intro - + - + - - + + - - Select a file + + Select a file diff --git a/img/components/number_inputs_intro.svg b/img/components/number_inputs_intro.svg index 75b46fb..f4ae28f 100644 --- a/img/components/number_inputs_intro.svg +++ b/img/components/number_inputs_intro.svg @@ -1,45 +1,45 @@ number_inputs_intro - - + + 100 - - + + - - + + diff --git a/img/components/password_inputs_intro.svg b/img/components/password_inputs_intro.svg index 1119ebf..340980d 100644 --- a/img/components/password_inputs_intro.svg +++ b/img/components/password_inputs_intro.svg @@ -1,26 +1,26 @@ password_inputs_intro - + ****** diff --git a/img/components/radio_buttons_designing.svg b/img/components/radio_buttons_designing.svg index 657f1e9..6bcf307 100644 --- a/img/components/radio_buttons_designing.svg +++ b/img/components/radio_buttons_designing.svg @@ -1,40 +1,40 @@ radio_buttons_designing - + Option 2 - + - + Option 1 - + - + Radio group label `vertical-align: middle` - + diff --git a/img/components/radio_buttons_intro_off.svg b/img/components/radio_buttons_intro_off.svg index 60e6ae1..a2bf8e3 100644 --- a/img/components/radio_buttons_intro_off.svg +++ b/img/components/radio_buttons_intro_off.svg @@ -1,21 +1,21 @@ - Radio_Buttons_intro_off + radio_buttons_intro_off - - Neutral point + + Neutral point - + diff --git a/img/components/radio_buttons_intro_on.svg b/img/components/radio_buttons_intro_on.svg index 428e52c..745526a 100644 --- a/img/components/radio_buttons_intro_on.svg +++ b/img/components/radio_buttons_intro_on.svg @@ -1,30 +1,30 @@ - Radio_Buttons_intro_on + radio_buttons_intro_on - - Neutral point + + Neutral point - + - - Neutral point + + Neutral point - - + + diff --git a/img/components/radio_buttons_states.svg b/img/components/radio_buttons_states.svg index 0edb84b..f4d2b70 100644 --- a/img/components/radio_buttons_states.svg +++ b/img/components/radio_buttons_states.svg @@ -1,257 +1,257 @@ radio_buttons_states - + - + - + - + - + - + - + Neutral point - + Neutral point - + Neutral point Normal Hover Active Focus Disabled - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point diff --git a/img/components/search_inputs_intro.svg b/img/components/search_inputs_intro.svg index ccfd104..3edf41a 100644 --- a/img/components/search_inputs_intro.svg +++ b/img/components/search_inputs_intro.svg @@ -1,10 +1,31 @@ - - - - - - Search - - + + + + search_inputs_intro + + + + + + + + + + + + Search + + + + + + + + + + + + + diff --git a/img/components/text_inputs.svg b/img/components/text_inputs.svg deleted file mode 100644 index 9801c53..0000000 --- a/img/components/text_inputs.svg +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - DISABLED NORMAL :HOVER :FOCUS & :ACTIVE - - - - - Re-enter password - - - - - - - - - - ****** - - - - - - - - Re-enter password - - - - - - Re-enter password - - - - - - SEARCH INPUT FIELD + ICON - - - - - - Placeholder text - - - - - - Re-enter password - - - - - - - - - ****** - - - - - - - - Re-enter password - - - - - - - - - - - - - DISABLED NORMAL :HOVER :FOCUS & :ACTIVE - - - diff --git a/img/components/text_inputs_designing.svg b/img/components/text_inputs_designing.svg index d5f36c0..32b9068 100644 --- a/img/components/text_inputs_designing.svg +++ b/img/components/text_inputs_designing.svg @@ -1,89 +1,66 @@ text_inputs_designing - - - - - - - - - - - - - - - - - - + - - + + Placeholder - - - + + + - - - + + + - + Label - + - + - + - + - - - - - - diff --git a/img/components/text_inputs_states.svg b/img/components/text_inputs_states.svg index 8f37ce2..c1c446a 100644 --- a/img/components/text_inputs_states.svg +++ b/img/components/text_inputs_states.svg @@ -1,79 +1,79 @@ text_inputs_states - + - + Placeholder text Your input - + - + Providing input Your input - + Normal Hover Active & Focus Disabled diff --git a/img/components/toggle_switches_designing.svg b/img/components/toggle_switches_designing.svg index 6302f09..df9e91d 100644 --- a/img/components/toggle_switches_designing.svg +++ b/img/components/toggle_switches_designing.svg @@ -1,41 +1,41 @@ toggle_switches_designing - + - + Label for binary selection diff --git a/img/components/toggle_switches_states.svg b/img/components/toggle_switches_states.svg index 075660b..7471e7c 100644 --- a/img/components/toggle_switches_states.svg +++ b/img/components/toggle_switches_states.svg @@ -1,252 +1,247 @@ toggle_switches_states - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - + + + + + + - Normal Hover Active Focus Disabled - + - + - - - - - - + + - - - + + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - Switched on + + Selected diff --git a/img/design-principles/content-first--mobile.svg b/img/design-principles/content-first--mobile.svg index 772ea70..81762ce 100644 --- a/img/design-principles/content-first--mobile.svg +++ b/img/design-principles/content-first--mobile.svg @@ -1,35 +1,35 @@ - + Spiral galaxies form a class of galaxy originally described by Edwin Hubble in his 1936 work The Realm of the Nebulae and, as such, form part of the Hubble sequence. Most spiral galaxies consist of a flat, rotating disk containing stars, gas and dust, and a central concentratio n diff --git a/img/design-principles/this-is-for-everyone--mobile.svg b/img/design-principles/this-is-for-everyone--mobile.svg index f0a0108..5c9065a 100644 --- a/img/design-principles/this-is-for-everyone--mobile.svg +++ b/img/design-principles/this-is-for-everyone--mobile.svg @@ -1,87 +1,87 @@ - + - + - + - + - + - + - + diff --git a/img/design-principles/this-is-for-everyone.svg b/img/design-principles/this-is-for-everyone.svg index a9d0474..8740fb2 100644 --- a/img/design-principles/this-is-for-everyone.svg +++ b/img/design-principles/this-is-for-everyone.svg @@ -1,166 +1,166 @@ this-is-for-everyone - + - + - + - + - + - + - + - + - + - + diff --git a/img/visual-style/illustrations-grey-background.svg b/img/visual-style/illustrations-grey-background.svg index 3ae4016..306de7d 100644 --- a/img/visual-style/illustrations-grey-background.svg +++ b/img/visual-style/illustrations-grey-background.svg @@ -1,52 +1,52 @@ Save pages to view them later, even offline - + No saved pages yet diff --git a/img/visual-style/illustrations-header--end.svg b/img/visual-style/illustrations-header--end.svg index 5616753..43cb9dd 100644 --- a/img/visual-style/illustrations-header--end.svg +++ b/img/visual-style/illustrations-header--end.svg @@ -1,29 +1,27 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/img/visual-style/illustrations-white-background.svg b/img/visual-style/illustrations-white-background.svg index 94b8a5e..43f237c 100644 --- a/img/visual-style/illustrations-white-background.svg +++ b/img/visual-style/illustrations-white-background.svg @@ -1,19 +1,19 @@ Take our survey - + Please help us improve Wikipedia by answering a few questions in our survey. diff --git a/img/visual-style/principles-color-type.svg b/img/visual-style/principles-color-type.svg index bb78ed1..dcf2998 100644 --- a/img/visual-style/principles-color-type.svg +++ b/img/visual-style/principles-color-type.svg @@ -1,93 +1,93 @@ - - + + - - - + + + Lato - + abcdefghjklmnopqrstuvwxy z Imagine a world… - + 1234567890 - + Aa - + Aa - + Aa - + Aa - + Sans Serif - - - + + + Charter - + abcdefghjklmnopqrstuvwxyz Imagine a world… - + 1234567890 - + Aa - + Aa - + Aa - + Serif diff --git a/img/visual-style/principles-color-type_old.svg b/img/visual-style/principles-color-type_old.svg deleted file mode 100644 index d5e7276..0000000 --- a/img/visual-style/principles-color-type_old.svg +++ /dev/null @@ -1,91 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Dieter Rams - - - German professor emeritus and industrial designer - - - H.C. Dieter Rams (born 20 May 1932 in Wiesbaden, Hessen) is a German professor emeritus [1] and industrial designer closely associated with the consumer products company Braun and the Functionalist school of industrial design. His unobtrusive approach and belief in “less but better” design generated a timeless quality in his products and have influenced the design of many products, which also secured Rams worldwide recognition and appreciation. - - - - - diff --git a/img/visual-style/principles-content-chrome.svg b/img/visual-style/principles-content-chrome.svg index f023cd0..b85b6cc 100644 --- a/img/visual-style/principles-content-chrome.svg +++ b/img/visual-style/principles-content-chrome.svg @@ -1,99 +1,99 @@ principles-content-chrome - + - + - + Dieter Rams - + German professor emeritus and industrial designer - H.C. Dieter Rams (born 20 May 1932 in Wiesbaden, Hessen) is a German professor emeritus [1] and industrial designer closely associated with the consumer products company Braun and the Functionalist school of industrial design. His unobtrusive approach and belief in “less but better” design generated a timeless quality in his products and have influenced the design of many products, which also secured Rams worldwide recognition and appreciation. + H.C. Dieter Rams (born 20 May 1932 in Wiesbaden, Hessen) is a German professor emeritus [1] and industrial designer closely associated with the consumer products company Braun and the Functionalist school of industrial design. His unobtrusive approach and belief in “less but better” design generated a timeless quality in his products and have influenced the design of many products, which also secured Rams worldwide recognition and appreciation. - + diff --git a/resources/WikimediaUI-components_overview.png b/resources/WikimediaUI-components_overview.png index b01ff2f..aaf4491 100644 Binary files a/resources/WikimediaUI-components_overview.png and b/resources/WikimediaUI-components_overview.png differ diff --git a/resources/WikimediaUI-components_overview.sketch b/resources/WikimediaUI-components_overview.sketch index 1d3af08..a9ba2bb 100644 Binary files a/resources/WikimediaUI-components_overview.sketch and b/resources/WikimediaUI-components_overview.sketch differ diff --git a/resources/WikimediaUI-components_overview.svg b/resources/WikimediaUI-components_overview.svg index 5f69abc..de3c075 100644 --- a/resources/WikimediaUI-components_overview.svg +++ b/resources/WikimediaUI-components_overview.svg @@ -1,5278 +1,5512 @@ WikimediaUI-components_overview + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + - + - - - + + + + - + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - - - - - - - - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67% AA - + #fc3 RGB 255, 204, 51 HSB 45, 80%, 100% AAA - + #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100% AAA - + Yellow50 - + Yellow30 - + Green50 - + Green30 - + #00af89 RGB 0, 175, 137 HSB 167,100%,69% AA - + #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99% AAA - + Yellow90 - + Green90 #14866d RGB 20, 134, 109 HSB 167, 85%, 53% AA Secondary link highlight Positive messages Warning messages - + COLOR PALETTE - + BASE COLORS - + ACCENT COLORS Primary buttons Links Page accents Focus outlines Active buttons Active links - + Accent30 Progressive #36c RGB 51, 102, 204 HSB 220, 75%, 80% AA - + #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100% AAA - + Base100 - + #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100% AAA Destructive #d33 RGB 221, 51, 51 HSB 360, 77%, 87% AA - + AA #b32424 RGB 135, 54, 54 HSB 360, 60%, 53% AAA #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55% AAA Destructive actions – Buttons and Links Alerts Destructive active buttons and links Hovered buttons Active menu items backgrounds Base background Highlight from grey Disabled text input background - + #fff RGB 255, 255, 255 HSB 0, 0%, 100% AAA - + Accent90 - + Accent50 - + Red90 - + Red50 - + Red30 - + Base90 - + Base80 - + Base70 - + Base50 - + Base30 - + Base20 - + Base10 - + Base0 Button/3D widget background - + #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98% AAA - + #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94% AAA - + #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82% AAA - + #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69% AAA - + #72777d RGB 114, 119, 125 HSB 210, 9%, 49% AA AA #54595d RGB 84, 89, 93 HSB 207, 10%, 36% AAA - - - #222 RGB 34, 34, 34 HSB 0, 0%, 13% AAA + + + #202122 RGB 32, 33, 34 HSB 210, 6%, 13% AAA #000 RGB 0, 0, 0 HSB 0, 0%, 0% AAA Disabled button/3D widget background Highlighted border Disabled elements text Placeholder text Active border Copy color Buttons/widgets text Emphasized copy color Active button/widgets text Emphasized secondary text at level AAA need WCAG 2.0 conformance level: (with white/black) - + SUPPLEMENTARY COLORS - + BACKGROUND COLORS - + Layer 1: #f8f9fa - + Layer 2: #fff - + Layer 3: #eaecf0 - + Layer 4: #c8ccd1 Re-enter password Multiline inline message without rich text. Only sentences, which bring clarity on what's happening to the user. Multiline block message with rich text like links to Nas , who • will rule the World and • free all his sons - + 24 scale-independent pixels (1.5 em) - + 20 sp (1.25 em) - + 16 sp (1 em) - + 12 sp (0.75 em) - + 8 sp (0.5 em) - + `font-size: 1em` - + `font-size: 1em` `font-weight: bold` A neutral message which informs about general higher priority notices to the user. Stay neutral! A neutral message which informs about general higher priority notices to the user. Stay neutral! A success message which means the user did everything right and should know about it. Yay! A success message which means the user did everything right and should know about it. Yay! A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. An error which means it's potentially stopping whatever the user just did and will give them a clear message what is wrong. Re-enter password An error which means it's potentially stopping whatever the user just did and providing them a clear message on what's wrong. There's also an explanatory link . Sizes Notice Success Warning Error - + MESSAGES - + + + + - + - - - - Select a file + + + + Select a file - + + - + Option 1 Re-enter password - - Password on general purpose + + Password on general purpose - + Volker - + Label - + CheckboxMultiSelect label - + Option with a really long label - + Radio button with really long label - + Neutral point - + Neutral point Primary - The document containing a hyperlink is known as its source document. For example, in an online reference work such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are often used to implement reference mechanisms, such as tables of contents, footnotes, bibliographies, indexes, letters, and glossaries. + The document containing a hyperlink is known as its source document. For example, in an online reference work such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are often used to implement reference mechanisms, such as tables of contents, footnotes, bibliographies, indexes, letters, and glossaries. `margin-bottom: 1.25em` between widgets with labels `margin-bottom: 1.5em` between widgets without labels - + EXAMPLE FORM - + 2 WAYS OF CHOOSING DATE - + 1. Starting the process from scratch. Choosing YYYY, MM, DD Step 1: Choosing year Step 2: Choosing month Step 3: Choosing day Clicking on year in the field to change year Clicking on month in the field to change month Clicking on day in the field to change day - + 2. Clicking on YYYY, MM, or DD to alter a specific part of the date. - - + + - + - - + + S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Tue 14 Nov 2013 - - - + + + - - - + + + - - + + January 01 February 02 March 03 April 04 May 05 June 06 January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 July 07 August 08 September 09 October 10 November 11 December 12 - - - + + + YYYY-MM-DD - - Tue 14 Nov 2013 + + Tue 14 Nov 2013 November 2013 2013 2013 - + - + - - + + S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - + YYYY-MM-DD November 2013 - + - - - + + + - + - - - + + + - + 1986 1987 1988 1989 1990 1991 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2010 2011 2012 2013 2014 2015 - - - + + + YYYY-MM-DD - - Tue 14 Nov 2013 + + Tue 14 Nov 2013 - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + DATE PICKER Normal Disabled Text field Interaction Calendar Expanded Calendar interaction - + Tue Nov 5, 2013 - + Tue Nov 5, 2013 Tue Nov 5, 2013 - - - + + + - + Tue Nov 5, 2013 - - + + Tue Nov 5, 2013 - + - + 5 5 5 - + Tue Nov 5, 2013 - - + + Tue Nov 5, 2013 - + • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous month. • Scrolling down / clicking “down” button reveals the following month. • When user starts typing a number, it changes the numbers within highlighted area • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous set of years. • Scrolling down / clicking “down” button reveal the following set of years. • When user starts typing a number, it changes the numbers within highlighted area Once user selects a new month / day / year, the area highlighted will grow in size and back in place as if making one pulse. The highlight with more contrast and flash When we decide to have users start from scratch in selecting a day in a year, start from the “Year” selection view, followed by “Month” and then “Day.” 48 sp (3 em) height “Currently selected” style - + 5 Current day Hover state style Placeholder icon for navigate to today’s day When menu is expanded, clicking on the month / day / year, takes user to the month / day / year selection view. The month / day / year will be highlighted. User will be able to type an input like a text field or choose from the selection below. - + CHANGING “MONTH” - + GOING BACK TO CHANGE “MONTH” - + AFTER A SELECTION - + STARTING FROM SCRATCH - + GOING BACK TO CHANGE “YEAR” - + CHANGING “DAY” - + CHANGING “YEAR” - - + + - + - + - + January 01 February 02 March 03 April 04 May 05 June 06 - - July 07 August 08 September 09 October 10 November 11 December 12 + + July 07 August 08 September 09 October 10 November 11 December 12 - + - + Tue Nov 5, 2013 - + + + + + + + + + 2013 - - + + + + + + - + 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 - - - - - - + + Tue Nov 5, 2015 - - + + + + + + + + + + + + + + + + + + - + Select a date - + Hover Active Focus Hover Active Focus Calendar Expanded User will be able to press ↑ to enter previous year, ↓ to enter year after User will also be able to type the year manually. ↑ to enter previous month if cursor is over “Nov”, ↓ to enter day after if cursor is over “5” User will also be able to type the month and day manually. Placeholder icon for calendar - + - - - + + + - + January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 - + Tue Nov 14, 2013 - - + + + + + + + + + + 2013 - + - - - + + + - - + + - + S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + Tue Nov 14, 2013 November 2013 - + - + S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - Tue Nov 5, 2013 + + Tue Nov 5, 2013 - + November 2013 - + - + S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 - + T 1 8 15 22 29 - + F 2 9 16 23 30 S 3 10 17 24 1 - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + Tue Nov 5, 2013 November 2013 - + - - - + + + - + 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 - + - + Tue Nov 14, 2013 - - - + + + + + + + + + + + + + + + + + + + - - + + 1986 1987 1988 1989 1990 1991 - + 1992 1993 1994 1995 1996 1997 - - + + 1998 1999 2000 2001 2002 2003 - + 2004 2005 2006 2007 2008 2009 - - 2010 2011 2012 2013 2014 2015 + + 2010 2011 2012 2013 2014 2015 - - - - + + + - - - + + + + + + + + + + + + - + Tue Nov 5, 2013 - + - + - + - + - + - - + + - + - + - + - + - + - + Button Primary… - + Button - + - + - + - + - + Primary… - - + + - + - + - + Button - + - + - + - + - + - + - + Primary… - + - + - + Button - + - + - + - + - + - + - + Primary… - + - + - + Option 1 - + Option 2 Option 3 - + - + - + - + - + - + Option - + - “Currently selected” style + “Currently selected” style - - Option 1 + + Option 1 - - - + + + - + TOOLBAR - + Normal - + Legend Hover Active Focus 8 sp (0.5 em) 42 sp height Normal Hover Active Focus Expanded Menu Disabled Placeholder User input - + Placeholder Placeholder - + Placeholder - - + + - + - + - + Label - + Placeholder - + - + Option 1 - + Option 2 - + COMBOBOX INPUT FIELD - + BUTTON + DROPDOWN - - Disabled Normal Hover Active Expanded Menu + + Normal Hover Active Expanded Menu Disabled - - + + - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - - + + - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - - + + - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - + - - - - Download original file 601 x 601 px jpg + + + + Download original file 601 x 601 px jpg - - + - - + + - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - - + + - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - + - - + + - - - Original file 601 x 601 px jpg + + + Original file 601 x 601 px jpg - - Small 601 x 601 px jpg + + Small 601 x 601 px jpg - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - - + + - - - - Original file 601 x 601 px jpg + + + + Original file 601 x 601 px jpg - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - - - Small 601 x 601 px jpg + + + Small 601 x 601 px jpg - - - - - - - + - - + + - - - - Original file 601 x 601 px jpg + + + + Original file 601 x 601 px jpg - Small 601 x 601 px jpg + Small 601 x 601 px jpg - Download original file 601 x 601 px jpg + Download original file 601 x 601 px jpg - - + - + + + + + + + + + + + + + + + + + + + + + Normal Hover Active Expanded Menu Focus Disabled - + - + Option 1 Option 2 Option 3 - + - + - + - + - + - - + 20 sp x 20 sp icon vertical-align: middle - + ICON DROPDOWN Normal Hover Active Expanded Menu Focus Disabled - + - + Neutral - + Neutral Neutral Neutral - + - + - + Neutral - + Neutral - + Neutral - + Neutral 2 - + - + - + - + Neutral - + Neutral - + Neutral 2 - Neutral + Neutral - + Neutral Neutral 2 - + LINK DROPDOWN Select an item - - + + - - - + + + - + - Select an item + Select an item - - + + - - - + + + - + - + - + - + Item 1 selected - - + + - - - + + + - + - + - + Item 2 - + Item 1 Select an item - - + + - - - + + + - + Select an item - - + + - - - + + + - + - + Item 1 selected - - + + - - - + + + - + - + - + Item 2 - + Item 1 - + Label - + Normal Hover Active & Focus Expanded Menu & Focus Disabled - + DROPDOWN - - - + + + - - - + + + - - Select a file + + Select a file - + Select a file - - + + - - - + + + - + Label - + Select a file Normal Disabled - + FILE INPUT FIELD - + + + - + 100 - - - + + + - - - + + + - - - + + + - - - + + + - + 100 - - + + - - - + + + - - + + - - - + + + Normal Disabled - + NUMBER INPUT FIELD Disabled textarea - + Normal Disabled - + TEXTAREA Normal Hover Focus & Active Password - + ****** Password - + PASSWORD INPUT FIELD Normal Hover Focus & Active Disabled Search - - + + - - - + + + - + Entering search terms - + - - + + - - - + + + Search - - + + - - - + + + Search - - + + - - - + + + - + SEARCH INPUT FIELD Placeholder text Placeholder - - + + - - - + + + - - + + - - - + + + - + Label Your input - + Providing input - - + + Your input - + Normal Hover Active & Focus Disabled - + TEXT INPUT FIELDS - + Option with a really long label today - + Second option - + Option 1 - + Option 2 Normal Hover Active Focus Disabled Minimum 16 sp (1 em) margin - + - + - + - + - + Option 2 - + Label for binary selection - + `vertical-align: middle` one-liner text - + - - - - - - + + - - - + + + - + - + - + - + - + - + Selected - + TOGGLE SWITCH - + Option 2 - + Option 1 - + Radio group label - + Option with a really long label today - + Option title - + Neutral point - + Neutral point - + Neutral point Normal Hover Active Focus Disabled Selected - + Neutral point - + Neutral point - + Radio label touch area features `width: 2em;` `height: 2em;` - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Option with a really long label today - + Option title `vertical-align: middle` - - + + - + - + - + - + - + - + - + - + RADIO BUTTON - + Indeterminate – some children selected - - - + + + - - - + + + - + Unselected - + Selected - + Neutral point - + INTEDERMINATE Normal Hover Active Focus Disabled Selected - + Option 2 - + Option 1 - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Neutral point - + Checkbox label - + Option with a really long label today - + Option title `vertical-align: middle` touch area features `width: 2em;` `height: 2em;` - + - + - + - + - + - + - + Option with a really long label today - + Option 2 - + - + CHECKBOX Normal Highlighted Highlighted positive - + Neutral point - + Neutral point - + Neutral point - + TEXT HIGHLIGHT Normal Hover Active Focus Normal Hover Active Focus - + UNDERLINED LINK Neutral point of view Neutral point of view Neutral point of view Neutral point of view Neutral point of view Neutral point of view Neutral point of view Neutral point of view - + - + - + - + - + LINK Other Pages More Talk - - More + + More - - + + Pages - + Other - + Talk - - More + + More - + Pages - + Other - - More + + More - - More + + More - + Pages - + Pages - + Other - + Other - + Talk - Talk + Talk Talk - - More + + More - + Pages - + Other - + Talk - + - - - - - - - + - + Disabled Focus Selected Active Hover Normal - + BUTTON GROUP - - - + + + - Normal Hover Active Focus Disabled + Normal Hover Active Focus Disabled - - + + - + - - - + + + - 20 sp x 20 sp icon `vertical align: middle` + 20 sp x 20 sp icon `vertical align: middle` - 36 sp minimum width touch target + 36 sp minimum width touch target - - + + - - - + + + - + - + - - + + - - + + - + - - + + ICON - - - + + + Button - + ICON + TEXT - + Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Neutral - + Neutral - + Neutral Neutral - + Neutral - + - + - + - + - + - + - Normal Hover Active Focus Disabled + Normal Hover Active Focus Disabled - + - - BUTTONS QUIET + + BUTTONS QUIET - - + + - - - + + + - - Toggle + + Toggle Toggle - - - + + + - - - + + + Normal Selected - + TOGGLE BUTTONS - + ICON + TEXT - + Normal Hover Active Focus Disabled Primary - - + + Button Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Button Button Normal - + Normal - + Normal Normal - + Normal - + - + - + - + BUTTONS NORMAL + PRIMARY - + SPECIFICATIONS - + SPECIFICATIONS LEGEND MAIN TOOLBAR 48PX HEIGHT SECONDARY TOOLBAR 30PX HEIGHT - + - + - - + + - - + + - + - + SPECIFICATIONS LEGEND TEXT ICON ICON-TEXT INLINE ICON INLINE ICON + ICON-TEXT INLINE TEXT - - Text + + Text - - Icon + + Icon - - Button frame + + Button frame 16 sp / 1 em 12 sp / 1.25 em 8 sp / 0.5 em 4 sp / 0.25 em 24 sp / 1.5 em 32 scale-independent pixels / 2 em All single buttons, icons, text field have a min. of 40 scale- independent pixels (sp) width. All single buttons have a max. of 280 sp width. If >280 sp text wraps to the next line. - + Checkbox group label diff --git a/resources/WikimediaUI_color_palette.png b/resources/WikimediaUI_color_palette.png index b90a74d..d9c37e9 100644 Binary files a/resources/WikimediaUI_color_palette.png and b/resources/WikimediaUI_color_palette.png differ diff --git a/resources/WikimediaUI_color_palette.svg b/resources/WikimediaUI_color_palette.svg index 1d926c0..3749da4 100644 --- a/resources/WikimediaUI_color_palette.svg +++ b/resources/WikimediaUI_color_palette.svg @@ -1,252 +1,278 @@ - - - - - - - #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67% AA - - - - #fc3 RGB 255, 204, 51 HSB 45, 80%, 100% AAA - - - - #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100% AAA - - - Yellow50 - - - Yellow30 - - - - Green50 - - - Green30 - - - #00af89 RGB 0, 175, 137 HSB 167,100%,69% AA - - - - - #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99% AAA - - - Yellow90 - - - Green90 - - - #14866d RGB 20, 134, 109 HSB 167, 85%, 53% AA - - - Secondary link highlight Positive messages - - - Warning messages - - - - - COLOR PALETTE - - - BASE COLORS - - - - ACCENT COLORS - - - - - Primary buttons Links Page accents Focus outlines - - - Active buttons Active links - - - - - - Accent30 - - - Progressive #36c RGB 51, 102, 204 HSB 220, 75%, 80% AA - - - #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100% AAA - - - Base100 - - - #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100% AAA - - - Destructive #d33 RGB 221, 51, 51 HSB 360, 77%, 87% AA - - - AA - - - - #b32424 RGB 135, 54, 54 HSB 360, 60%, 53% AAA - - - - #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55% AAA - - - Destructive actions – Buttons and Links Alerts - - - Destructive active buttons and links - - - Hovered buttons Active menu items backgrounds - - - - - - Base background Highlight from grey - - - Disabled text input background - - - #fff RGB 255, 255, 255 HSB 0, 0%, 100% AAA - - - Accent90 - - - Accent50 - - - Red90 - - - Red50 - - - Red30 - - - Base90 - - - Base80 - - - Base70 - - - Base50 - - - Base30 - - - Base20 - - - Base10 - - - Base0 - - - - Button/3D widget background - - - #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98% AAA - - - - #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94% AAA - - - - #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82% AAA - - - - #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69% AAA - - - - #72777d RGB 114, 119, 125 HSB 210, 9%, 49% AA - - - AA - - - - #54595d RGB 84, 89, 93 HSB 207, 10%, 36% AAA - - - - #222 RGB 34, 34, 34 HSB 0, 0%, 13% AAA - - - - #000 RGB 0, 0, 0 HSB 0, 0%, 0% AAA - - - Disabled button/3D widget background - - - Highlighted border - - - Disabled elements text Placeholder text Active border - - - Copy color Buttons/widgets text - - - Emphasized copy color Active button/widgets text - - - Emphasized secondary text at level AAA need - - - WCAG 2.0 conformance level: (with white/black) - - - - SUPPLEMENTARY COLORS - - - - - BACKGROUND COLORS - - - - - - - - Layer 1: #f8f9fa - - - Layer 2: #fff - - - Layer 3: #eaecf0 - - - Layer 4: #c8ccd1 - + + + + WikimediaUI Color palette + + + + + + + + #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67% AA + + + + #fc3 RGB 255, 204, 51 HSB 45, 80%, 100% AAA + + + + #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100% AAA + + + Yellow50 + + + Yellow30 + + + + Green50 + + + Green30 + + + #00af89 RGB 0, 175, 137 HSB 167,100%,69% AA + + + + + #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99% AAA + + + Yellow90 + + + Green90 + + + #14866d RGB 20, 134, 109 HSB 167, 85%, 53% AA + + + Secondary link highlight Positive messages + + + Warning messages + + + + + COLOR PALETTE + + + + BASE COLORS + + + + + + + + + + + ACCENT COLORS + + + + + + + + Primary buttons Links Page accents Focus outlines + + + Active buttons Active links + + + + + + Accent30 + + + Progressive #36c RGB 51, 102, 204 HSB 220, 75%, 80% AA + + + #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100% AAA + + + Base100 + + + #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100% AAA + + + Destructive #d33 RGB 221, 51, 51 HSB 360, 77%, 87% AA + + + AA + + + + #b32424 RGB 135, 54, 54 HSB 360, 60%, 53% AAA + + + + #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55% AAA + + + Destructive actions – Buttons and Links Alerts + + + Destructive active buttons and links + + + Hovered buttons Active menu items backgrounds + + + + + + Base background Highlight from grey + + + Disabled text input background + + + #fff RGB 255, 255, 255 HSB 0, 0%, 100% AAA + + + Accent90 + + + Accent50 + + + Red90 + + + Red50 + + + Red30 + + + Base90 + + + Base80 + + + Base70 + + + Base50 + + + Base30 + + + Base20 + + + Base10 + + + Base0 + + + + Button/3D widget background + + + #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98% AAA + + + + #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94% AAA + + + + #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82% AAA + + + + #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69% AAA + + + + #72777d RGB 114, 119, 125 HSB 210, 9%, 49% AA + + + AA + + + + #54595d RGB 84, 89, 93 HSB 207, 10%, 36% AAA + + + + #202122 RGB 32, 33, 34 HSB 210, 6%, 13% AAA + + + + #000 RGB 0, 0, 0 HSB 0, 0%, 0% AAA + + + Disabled button/3D widget background + + + Highlighted border + + + Disabled elements text Placeholder text Active border + + + Copy color Buttons/widgets text + + + Emphasized copy color Active button/widgets text + + + Emphasized secondary text at level AAA need + + + WCAG 2.0 conformance level: (with white/black) + + + + + SUPPLEMENTARY COLORS + + + + + + + + + BACKGROUND COLORS + + + + + + + + + + + Layer 1: #f8f9fa + + + Layer 2: #fff + + + Layer 3: #eaecf0 + + + Layer 4: #c8ccd1 + + + diff --git a/resources/Wikimedia_Design_Style_Guide-imagery.sketch b/resources/Wikimedia_Design_Style_Guide-imagery.sketch index 58c51c8..8684d64 100644 Binary files a/resources/Wikimedia_Design_Style_Guide-imagery.sketch and b/resources/Wikimedia_Design_Style_Guide-imagery.sketch differ diff --git a/visual-style_colors.html b/visual-style_colors.html index 7fb96d8..54c90a1 100644 --- a/visual-style_colors.html +++ b/visual-style_colors.html @@ -1,376 +1,376 @@ Visual Style: Colors – Wikimedia Design Style Guide
Visual Style

Colors

The color palette represents our character and brings a hint of freshness to our products.

  1. Accent90 #eaf3ff
  2. Accent50 #36c
  3. Accent10 #2a4b8d
  1. Base100
  2. Base90
  3. Base80
  4. Base70
  5. Base50
  6. Base30
  7. Base20
    8. -
  8. +
  9. Base10
  10. Base0
  1. Red90 #fee7e6
  2. Red50 #d33
  3. Red30 #b32424
  1. Green90 #d5fdf4
  2. Green50 #00af89
  3. Green30 #14866d
  1. Yellow90 #fef6e7
  2. Yellow50 #fc3
  3. Yellow30 #ac6600

Because content readability for everyone is our main goal, we have made accessibility considerations a top priority. Each color detailed below indicates its WCAG conformance level (“AA” or “AAA”). This level is based on a color's contrast against white or black.

Base colors

Base colors define the content surface and the main color for content. Different shades of paper and ink are useful to emphasize or de-emphasize different content areas.

Base colors range from pure white (Base100) to true black (Base0). Intermediate shades of gray include a tint of blue for greater harmony with our accent colors.

When applying text on a surface, you need to check the color contrast between the text and the background:

  • Base100…50 are safe text colors for a black surface.
  • Base30…0 are safe text colors for a white surface.
  1. Base100 #fff AAA RGB 255, 255, 255 HSB 0, 0%, 100%
  2. Base90 #f8f9fa AAA RGB 248, 249, 250 HSB 210, 1%, 98%
  3. Base80 #eaecf0 AAA RGB 234, 236, 240 HSB 220, 3%, 94%
  4. Base70 #c8ccd1 AAA RGB 200, 204, 209 HSB 213, 4%, 82%
  5. Base50 #a2a9b1 AAA RGB 162, 169, 177 HSB 212, 8%, 69%
  6. Base30 #72777d AA / AA RGB 114, 119, 125 HSB 210, 9%, 49%
  7. Base20 #54595d AAA RGB 84, 89, 93 HSB 207, 10%, 36%
    8. -
  8. +
  9. Base10 - #222 + #202122 AAA - RGB 34, 34, 34 - HSB 0, 0%, 13% + RGB 32, 33, 34 + HSB 210, 6%, 13%
  10. Base0 #000 AAA RGB 0, 0, 0 HSB 0, 0%, 0%

Accent colors

Accent colors are used to emphasize actions and to highlight key information. Blue is a natural choice in our context, where it has been the default color used for links and conveys the idea of action.

There are three shades provided for when you need a lighter (Accent90), regular (Accent50) or a darker (Accent30) version of blue.

Accent50 is suitable to use for text and as background. When used for link text, this color provides sufficient contrast with black text. When used as background, it provides sufficient contrast with white text.

  1. Accent90 #eaf3ff AAA RGB 234, 243, 255 HSB 214, 8%, 100%
  2. Accent50 #36c AA Progressive RGB 51, 102, 204 HSB 220, 75%, 80%
  3. Accent30 #2a4b8d AAA RGB 42, 75, 141 HSB 220, 70%, 55%

Utility colors

Utility colors are another type of accent color. Common meanings are associated with them.

We use shades of red, green, and yellow as utility colors.

  1. Red90 #fee7e6 AAA RGB 255, 231, 230 HSB 2, 10%, 100%
  2. Red50 #d33 AA / AA Destructive RGB 221, 51, 51 HSB 360, 77%, 87%
  3. Red30 #b32424 AAA RGB 135, 54, 54 HSB 360, 60%, 53%
  1. Green90 #d5fdf4 AAA RGB 213, 253, 244 HSB 167, 16%, 99%
  2. Green50 #00af89 AA RGB 0, 175, 137 HSB 167, 100%, 69%
  3. Green30 #14866d AA RGB 20, 134, 109 HSB 167, 85%, 53%
  1. Yellow90 #fef6e7 AAA RGB 254, 246, 231 HSB 39, 9%, 100%
  2. Yellow50 #fc3 AAA RGB 255, 204, 51 HSB 45, 80%, 100%
  3. Yellow30 #ac6600 AA RGB 172, 102, 0 HSB 36, 100%, 67%

Additional colors

Some use cases, such as charts and data visualization, may need a broader color palette. Aim for level AA contrast (4.5:1) when extending the default palette. Make sure to test how these colors are perceived at different color vision deficiency conditions.[1]

Resources

The color palette is also available as part of Resources – components overview or alternatively, SVG and PNG download as part of the 'resources' directory of this Design Style Guide repo.

References

  1. See also English Wikipedia on accessible color usage as part of its Manual of Style.