diff --git a/img/components/buttons_normal_and_primary_states.svg b/img/components/buttons_normal_and_primary_states.svg index 2af8830..b09ea9c 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 + Progressive Destructive Progressive Destructive - Progressive + Progressive Destructive - Progressive + Progressive Destructive Progressive Destructive Normal Normal Normal Normal Normal diff --git a/img/components/checkboxes_designing.svg b/img/components/checkboxes_designing.svg index 1c54808..7a6bfc5 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_states.svg b/img/components/checkboxes_states.svg index f9a52ed..9303bb8 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/dropdowns_designing.svg b/img/components/dropdowns_designing.svg index 52b2ea0..06237f5 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 ccc984e..def8fab 100644 --- a/img/components/dropdowns_intro.svg +++ b/img/components/dropdowns_intro.svg @@ -1,33 +1,33 @@ dropdowns_intro - - - + + + Select an item - + diff --git a/img/components/dropdowns_states.svg b/img/components/dropdowns_states.svg index 84a48ec..56ab198 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 - + - + - - + + 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/links_states.svg b/img/components/links_states.svg index dcb8f09..8020d3b 100644 --- a/img/components/links_states.svg +++ b/img/components/links_states.svg @@ -1,92 +1,99 @@ - + links_states - + - + - - - - + + + + - Normal Hover Active Focus + Normal Hover Active Focus Visited - + Neutral point of view - + Neutral point of view - + Neutral point of view + + + + Neutral point of view + + + Neutral point of view - + - + - + - + diff --git a/img/components/radio_buttons_designing.svg b/img/components/radio_buttons_designing.svg index 6bcf307..2ec974b 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_states.svg b/img/components/radio_buttons_states.svg index 6d492d2..22d92ae 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/toggle_switches_designing.svg b/img/components/toggle_switches_designing.svg index dba9de7..9777bf4 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 13f4861..ceb1d41 100644 --- a/img/components/toggle_switches_states.svg +++ b/img/components/toggle_switches_states.svg @@ -1,247 +1,247 @@ toggle_switches_states - + - + - + - + - + - + - - - - - - + - + + + + + + Normal Hover Active Focus Disabled Selected diff --git a/resources/WikimediaUI-components_overview-RSS.xml b/resources/WikimediaUI-components_overview-RSS.xml index 17208ec..c781789 100644 --- a/resources/WikimediaUI-components_overview-RSS.xml +++ b/resources/WikimediaUI-components_overview-RSS.xml @@ -1,21 +1,21 @@ WikimediaUI Components, Icons and Colors Library WikimediaUI Components, Icons and Colors Library https://design.wikimedia.org/style-guide/resources/WikimediaUI-components_overview.png WikimediaUI Components, Icons and Colors Library Sketch WikimediaUI Components, Icons and Colors Library - Wed, 15 Apr 2020 23:00:00 +0000 + Tue, 18 Mai 2020 23:00:00 +0000 - + diff --git a/resources/WikimediaUI-components_overview.png b/resources/WikimediaUI-components_overview.png index 995513f..062752e 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 cf32f4e..3dc910a 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 a902e86..8035566 100644 --- a/resources/WikimediaUI-components_overview.svg +++ b/resources/WikimediaUI-components_overview.svg @@ -1,5543 +1,5463 @@ - + WikimediaUI-components_overview - - + + - - + + - - + + - - + + - + - + - + - - + + - - + + - + - - - + + + - + - - - - - + + + + + - - + + - + - + - + - - + + - + - - + + - - - - - - - - - - + + + + + + + + + + + + + + + + - + + + + + + + - + - + - - - - - - - + - + - + - + - + - + - + - + - + - - - - - - - + - + - + - + - + - + - + - + - + - + - + - - - + + + + - + + + + + + + + + + - + - + - + - + - - - - + + + - - - - - - - - - - + - + - + - + - - - - - - - - - - - - - - - - - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + - - + + - + - - - + + - + + - - - - + + + - - - - - + + + + + - - - - + + + + + - - + - - + + + + + + #6b4ba1 + + + Visited link color + + + + #ff4242 + + + + #447ff5 + + + Hover color on primary (progressive) buttons + + + Hover color on primary (destructive) buttons + + + + #404244 `lighten( #202122, 13% )` + + + + #6c7378 `lighten( #54595d, 10% )` + + + Emphasized copy color Active button/widgets text + + + + MODIFIER COLORS + + + + + + #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 + + Descriptive text on Base90 background + + + Hover color on normal buttons 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` + + `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 Option 1 Re-enter password Password on general purpose Vannevar Bush Username CheckboxMultiSelect label Option with a really long label Radio button with really long label Neutral point Neutral point - Call to action + Call to action 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 1: Choosing year - - Step 2: Choosing month + + Step 2: Choosing month - - Step 3: Choosing day + + Step 3: Choosing day - - Clicking on year in the field to change year + + Clicking on year in the field to change year - - Clicking on month in the field to change month + + Clicking on month in the field to change month - - Clicking on day in the field to change day + + 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 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 + 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 + - + 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 + + 48 sp (3 em) height - - “Currently selected” style + + “Currently selected” style 5 - - Current day + + Current day - - Hover state style + + 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 - - + 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 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 - - - - - - - - + + + + + + - - - - - - - - + + + + 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, 2013 + + - - - - - - - - - - - - - - Tue Nov 5, 2013 - - + - + Button Primary… Button Primary… Button Primary… - + - - + + - Button + Button - + - - + + Primary… Option 1 Option 2 Option 3 Option - - “Currently selected” style + + “Currently selected” style Option 1 TOOLBAR Normal Legend Hover Active Focus - - 8 sp (0.5 em) + + 8 sp (0.5 em) - - 42 sp height + + 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 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 - + - + - + - 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 + + 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 - + + + + + + + + + + Item 1 selected + + + + + + + + + + + + + + + + + + + Item 2 + + + Item 1 + + 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 Label Select a file Normal Disabled FILE INPUT FIELD - + 100 100 Normal Disabled NUMBER INPUT FIELD - - + + - + Disabled textarea Normal Disabled - + - TEXTAREA + 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 + 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 1 Label for binary selection - - - `vertical-align: middle` one-liner text + + + `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;` + + 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 Visited - Normal Hover Active Focus + Normal Hover Active Focus Visited 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 Neutral point of view + + + Neutral point of view + + + - + - + - + - + - + - + - + - LINK + LINK - + Other Pages More Talk More Pages Other Talk More Pages Other More More Pages Pages Other Other Talk Talk - Talk + Talk - More + More - Pages + Pages - Other + Other - Talk + Talk - + - + - + Disabled Focus Selected Active Hover Normal BUTTON GROUP - + 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 + + 44 sp minimum width touch target, 32 sp height - - + + - - - - + + + + - - + + - + - - + + - - + + - + ICON - - + + Button ICON + TEXT - - + + - + + + Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Neutral Neutral Neutral Neutral Neutral - + - + - + Normal Hover Active Focus Disabled BUTTONS QUIET - + - - + + - - + + Toggle Toggle - - + + - - + + Normal Selected TOGGLE BUTTONS - - + + ICON + TEXT - - + + Normal Hover Active Focus Disabled Primary Button - Progressive + Progressive Destructive Progressive Destructive - Progressive + Progressive Destructive - Progressive + 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 + + + SPECIFICATIONS LEGEND - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - - - - + - Text + Text - Icon + Icon - Button frame + Button frame - - - 16 sp / 1 em + + 16 sp / 1 em - - 12 sp / 1.25 em + + 12 sp / 1.25 em - - - - 8 sp / 0.5 em + + 8 sp / 0.5 em - - 4 sp / 0.25 em + + 4 sp / 0.25 em - - 24 sp / 1.5 em + + 24 sp / 1.5 em - - 32 scale-independent pixels / 2 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. + All single buttons, icons, text field have a min. of 44 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 - Option 2 + Option 2 diff --git a/resources/WikimediaUI_color_palette.png b/resources/WikimediaUI_color_palette.png index d9c37e9..6a176da 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 3749da4..489ba01 100644 --- a/resources/WikimediaUI_color_palette.svg +++ b/resources/WikimediaUI_color_palette.svg @@ -1,278 +1,323 @@ - + WikimediaUI Color palette - - + + + + + + #6b4ba1 + + + Visited link color + + + + #ff4242 + + + + #447ff5 + + + Hover color on primary (progressive) buttons + + + Hover color on primary (destructive) buttons + + + + #404244 `lighten( #202122, 13% )` + + + + #6c7378 `lighten( #54595d, 10% )` + + + Emphasized copy color Active button/widgets text + + + + MODIFIER COLORS + + + + + + #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 + + Descriptive text on Base90 background + + + Hover color on normal buttons 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