Skip to content

Commit c9580c9

Browse files
ajford76ajford76
authored
Update themes-colors.md
1 parent a13709a commit c9580c9

File tree

1 file changed

+23
-243
lines changed

1 file changed

+23
-243
lines changed

‎docs/design/themes-colors.md

Lines changed: 23 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -6,101 +6,33 @@ ms.date: 01/24/2018
66

77
# SharePoint themes and colors
88

9-
Like the Microsoft brand palette, the SharePoint themes are designed to build on the Microsoft brand, while at the same time allow for flexibility to enliven our partnerships without dominating them. They reveal our shared goals and personality and reflect our diversity and ability to optimize the SharePoint experience.
9+
Like the Microsoft brand palette, the SharePoint themes are designed to build on the Microsoft brand, while at the same time allow for flexibility to enliven our partnerships without dominating them. They reveal our shared goals and personality, and reflect our diversity and ability to optimize the SharePoint experience.
1010

11-
<br/>
12-
13-
![SharePoint color palette, Red D13438, Orange CA5010, Green 10893E, Blue 0078D7, Purple 6B69D6, Gray 5D5A5B ](../images/sharepoint-themes.png)
14-
15-
## Themes
16-
17-
The following design principles helped form the current SharePoint themes and color palette.
18-
19-
**Guided**. Our theming system works at a global level so that updates can be made consistently across each site, allowing users to optimize their websites effortlessly. Our theming system operates in a controlled environment so that successful outcomes can be optimized quickly.
20-
21-
**Smart and efficient**. Our theming system expedites the site creation process by using smart algorithms to generate options that maximize aesthetic choices.
22-
23-
**Professional**. Our themes embody a professional look and feel that ensures coherency and conveys the brand of our enterprise audiences.
24-
25-
**Accessible**. Our built-in accessibility checker ensures universal design at all levels of default themes. For users who decide to customize, we provide helpful guidelines to design for accessibility.
26-
27-
## Colors
11+
## Main Colors
2812

2913
The SharePoint color palette has been optimized for screens and devices, and to provide enough flexibility to ensure continuity with your brand. The SharePoint-provided colors also guarantee accessible and legible experiences.
3014

31-
### Red
15+
![SharePoint color palette, Red A4262C, Orange CA5010, Gold 8F7034, Green 407855, Teal 038387, Blue 0078d4, Dark Blue 40587C, Indigo 4052AB, Plum 854085, Purple 8764B8, Cool Grey 737373, Warm Grey 867365](../images/sharepoint-themes.png)
3216

33-
![SharePoint color palette Red D1343](../images/themes-colors-red-theme.png)
17+
## Neutral palette
3418

35-
<br/>
19+
Neutral colors recede into the background in order to let our products shine. They allow brand colors to pop when we need to draw attention to content. When coupling neutrals with brand colors, make sure there is suitable contrast between them.
3620

37-
<table>
38-
<tr>
39-
<td style="color:white; background-color:#751b1e">themeDarker: #751b1e</td>
40-
<td style="color:white; background-color:#000000">black: #000000</td>
41-
</tr>
42-
<tr>
43-
<td style="color:white; background-color:#952226">themeDark: #952226</td>
44-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
45-
</tr>
46-
<tr>
47-
<td style="color:white; background-color:#c02b30">themeDarkAlt: #c02b30</td>
48-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
49-
</tr>
50-
<tr>
51-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#d13438">themePrimary: #d13438</td>
52-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
53-
</tr>
54-
<tr>
55-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
56-
</tr>
57-
<tr>
58-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
59-
</tr>
60-
<tr>
61-
<td style="color:white; background-color:#d6494d">themeSecondary: #d6494d</td>
62-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
63-
</tr>
64-
<tr>
65-
<td style="color:black; background-color:#ecaaac">themeTertiary: #ecaaac</td>
66-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
67-
</tr>
68-
<tr>
69-
<td style="color:black; background-color:#f6d6d8">themeLight: #f6d6d8</td>
70-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td></tr>
71-
<tr>
72-
<td style="color:black; background-color:#faebeb">themeLighter: #faebeb</td>
73-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
74-
</tr>
75-
<tr>
76-
<td style="color:black; background-color:#fdf5f5">themeLighterAlt: #fdf5f5</td>
77-
<td style="color:black; background-color:#fff">white: #fff</td>
78-
</tr>
79-
</table>
80-
81-
<br/>
82-
83-
### Orange
84-
85-
![SharePoint color palette Orange CA5010](../images/themes-colors-orange-theme.png)
21+
![Neutral greys](../images/sharepoint-neutral-greys.png)
8622

8723
<br/>
8824

8925
<table>
9026
<tr>
91-
<td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td>
9227
<td style="color:white; background-color:#000000">black: #000000</td>
9328
</tr>
9429
<tr>
95-
<td style="color:white; background-color:#8d390b">themeDark: #8d390b</td>
9630
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
9731
</tr>
9832
<tr>
99-
<td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td>
10033
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
10134
</tr>
10235
<tr>
103-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#ca5010">themePrimary: #ca5010</td>
10436
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
10537
</tr>
10638
<tr>
@@ -110,240 +42,88 @@ The SharePoint color palette has been optimized for screens and devices, and to
11042
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
11143
</tr>
11244
<tr>
113-
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
11445
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
11546
</tr>
11647
<tr>
117-
<td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td>
118-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
119-
</tr>
120-
<tr>
121-
<td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td>
122-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
123-
</tr>
124-
<tr>
125-
<td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td>
126-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
127-
</tr>
128-
<tr>
129-
<td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td>
130-
<td style="color:black; background-color:#fff">white: #fff</td>
131-
</tr>
132-
</table>
133-
134-
<br/>
135-
136-
### Green
137-
138-
![SharePoint color palette Green 10893E](../images/themes-colors-green-theme.png)
139-
140-
<br/>
141-
142-
<table>
143-
<tr>
144-
<td style="color:white; background-color:#094c23">themeDarker: #094c23</td>
145-
<td style="color:white; background-color:#000000">black: #000000</td>
146-
</tr>
147-
<tr>
148-
<td style="color:white; background-color:#0c602c">themeDark: #0c602c</td>
149-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
150-
</tr>
151-
<tr>
152-
<td style="color:white; background-color:#0f7c39">themeDarkAlt: #0f7c39</td>
153-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
48+
<td style="color:black; background-color:#d0d0d0">neutralQuaternary: #d0d0d0</td>
15449
</tr>
15550
<tr>
156-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#10893e">themePrimary: #10893e</td>
157-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
51+
<td style="color:black; background-color:#dadada">neutralquaternaryAlt: #dadada</td>
15852
</tr>
15953
<tr>
160-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
161-
</tr>
162-
<tr>
163-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
164-
</tr>
165-
<tr>
166-
<td style="color:white; background-color:#14a94e">themeSecondary: #14a94e</td>
167-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
168-
</tr>
169-
<tr>
170-
<td style="color:black; background-color:#7aefa7">themeTertiary: #7aefa7</td>
17154
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
17255
</tr>
17356
<tr>
174-
<td style="color:black; background-color:#bff7d5">themeLight: #bff7d5</td>
17557
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
17658
</tr>
17759
<tr>
178-
<td style="color:black; background-color:#dffbea">themeLighter: #dffbea</td>
17960
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
18061
</tr>
18162
<tr>
182-
<td style="color:black; background-color:#effdf4">themeLighterAlt: #effdf4</td>
18363
<td style="color:black; background-color:#fff">white: #fff</td>
18464
</tr>
18565
</table>
18666

18767
<br/>
18868

189-
### Blue
69+
## Shades and tints
70+
71+
Once a color is selected, light and dark shades of the accent color are created based on HSB values of color luminosity. Apps can use shade variations to create visual hierarchy and to provide an indication of interaction.
19072

191-
![SharePoint color palette Blue 0078D7](../images/themes-colors-blue-theme.png)
73+
![Theme primary colors](../images/sharepoint-theme-primary.png)
19274

19375
<br/>
19476

19577
<table>
19678
<tr>
19779
<td style="color:white; background-color:#004578">themeDarker: #004578</td>
198-
<td style="color:white; background-color:#000000">black: #000000</td>
19980
</tr>
20081
<tr>
20182
<td style="color:white; background-color:#005a9e">themeDark: #005a9e</td>
202-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
20383
</tr>
20484
<tr>
20585
<td style="color:white; background-color:#106ebe">themeDarkAlt: #106ebe</td>
206-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
207-
</tr>
208-
<tr>
209-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#0078d7">themePrimary: #0078d7</td>
210-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
211-
</tr>
212-
<tr>
213-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
21486
</tr>
21587
<tr>
216-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
88+
<td style="color:white; background-color:#0078d4">themePrimary: #0078d4</td>
21789
</tr>
21890
<tr>
219-
<td style="color:white; background-color:#2b88d8">themeSecondary: #2b88d8</td>
220-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
91+
<td style="color:black; background-color:#2b88d8">themeSecondary: #2b88d8</td>
22192
</tr>
22293
<tr>
22394
<td style="color:black; background-color:#71afe5">themeTertiary: #71afe5</td>
224-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
22595
</tr>
22696
<tr>
22797
<td style="color:black; background-color:#c7e0f4">themeLight: #c7e0f4</td>
228-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
22998
</tr>
23099
<tr>
231100
<td style="color:black; background-color:#deecf9">themeLighter: #deecf9</td>
232-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
233101
</tr>
234102
<tr>
235103
<td style="color:black; background-color:#eff6fc">themeLighterAlt: #eff6fc</td>
236-
<td style="color:black; background-color:#fff">white: #fff</td>
237104
</tr>
238105
</table>
239106

240107
<br/>
241108

242-
### Purple
243109

244-
![SharePoint color palette Purple 6B69D6](../images/themes-colors-purple-theme.png)
110+
## Dark Themes
245111

246-
<br/>
112+
SharePoint includes a palette that support dark themes. The SharePoint-provided colors also guarantee accessible and legible experiences.
247113

248-
<table>
249-
<tr>
250-
<td style="color:white; background-color:#27268a">themeDarker: #27268a</td>
251-
<td style="color:white; background-color:#000000">black: #000000</td>
252-
</tr>
253-
<tr>
254-
<td style="color:white; background-color:#3230b0">themeDark: #3230b0</td>
255-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
256-
</tr>
257-
<tr>
258-
<td style="color:white; background-color:#5250cf">themeDarkAlt: #5250cf</td>
259-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
260-
</tr>
261-
<tr>
262-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#6b69d6">themePrimary: #6b69d6</td>
263-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
264-
</tr>
265-
<tr>
266-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
267-
</tr>
268-
<tr>
269-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
270-
</tr>
271-
<tr>
272-
<td style="color:white; background-color:#7a78da">themeSecondary: #7a78da</td>
273-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
274-
</tr>
275-
<tr>
276-
<td style="color:black; background-color:#c1c0ee">themeTertiary: #c1c0ee</td>
277-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
278-
</tr>
279-
<tr>
280-
<td style="color:black; background-color:#e1e1f7">themeLight: #e1e1f7</td>
281-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
282-
</tr>
283-
<tr>
284-
<td style="color:black; background-color:#f0f0fb">themeLighter: #f0f0fb</td>
285-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
286-
</tr>
287-
<tr>
288-
<td style="color:black; background-color:#f8f7fd">themeLighterAlt: #f8f7fd</td>
289-
<td style="color:black; background-color:#fff">white: #fff</td>
290-
</tr>
291-
</table>
114+
![SharePoint dark theme color palette, Red EF6950, Yellow FFC83D, Green 40C5AF, Blue 409AE1, Purple b4a0ff, Grey b2b2b2](../images/sharepoint-themes-dark.png)
292115

293-
<br/>
116+
## Principles
294117

295-
### Gray
118+
The following design principles helped form the current SharePoint themes and color palette.
296119

297-
![SharePoint color palette Gray 5D5A5B](../images/themes-colors-gray-theme.png)
120+
**Guided**. Our theming system works at a global level so that updates can be made consistently across each site, allowing users to optimize their websites effortlessly. Our theming system operates in a controlled environment so that successful outcomes can be optimized quickly.
298121

299-
<br/>
122+
**Smart and efficient**. Our theming system expedites the site creation process by using smart algorithms to generate options that maximize aesthetic choices.
300123

301-
<table>
302-
<tr>
303-
<td style="color:white; background-color:#323130">themeDarker: #323130</td>
304-
<td style="color:white; background-color:#000000">black: #000000</td>
305-
</tr>
306-
<tr>
307-
<td style="color:white; background-color:#403e3d">themeDark: #403e3d</td>
308-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
309-
</tr>
310-
<tr>
311-
<td style="color:white; background-color:#53504e">themeDarkAlt: #53504e</td>
312-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
313-
</tr>
314-
<tr>
315-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#5d5a58">themePrimary: #5d5a58</td>
316-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
317-
</tr>
318-
<tr>
319-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
320-
</tr>
321-
<tr>
322-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
323-
</tr>
324-
<tr>
325-
<td style="color:white; background-color:#6d6a67">themeSecondary: #6d6a67</td>
326-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
327-
</tr>
328-
<tr>
329-
<td style="color:black; background-color:#bbb9b8">themeTertiary: #bbb9b8</td>
330-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
331-
</tr>
332-
<tr>
333-
<td style="color:black; background-color:#dfdedd">themeLight: #dfdedd</td>
334-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
335-
</tr>
336-
<tr>
337-
<td style="color:black; background-color:#efeeee">themeLighter: #efeeee</td>
338-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
339-
</tr>
340-
<tr>
341-
<td style="color:black; background-color:#f7f7f7">themeLighterAlt: #f7f7f7</td>
342-
<td style="color:black; background-color:#fff">white: #fff</td>
343-
</tr>
344-
</table>
124+
**Professional**. Our themes embody a professional look and feel that ensures coherency and conveys the brand of our enterprise audiences.
345125

346-
<br/>
126+
**Accessible**. Our built-in accessibility checker ensures universal design at all levels of default themes. For users who decide to customize, we provide helpful guidelines to design for accessibility.
347127

348128
## See also
349129

0 commit comments

Comments
 (0)