Skip to content

Commit 3e6676a

Browse files
Linda-EditorLinda-Editor
authored
Replaced HTML with images (SharePoint#1277)
* Themes-colors image Adding images because table HTML in docs is no longer rendering * Replaced HTML with images * Replaced table with image HTML was no longer rendering * removed headings from colors They were duplicated in the images * Removed heading duplicated in image
1 parent 2c07ea7 commit 3e6676a

9 files changed

+9
-349
lines changed

‎docs/design/accessibility.md

Lines changed: 1 addition & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -133,81 +133,10 @@ A minimum level of contrast is essential to help users with vision impairments c
133133

134134
![Colors for minimum readable contrast](../images/wcag-2aa-compliance-colors.png)
135135

136-
<br/>
137-
138-
### Theme colors (Blue) and neutral colors
139-
140-
<table>
141-
<tr>
142-
<td style="color:white; background-color:#004578">themeDarker: #004578</td>
143-
<td style="color:white; background-color:#000000">black: #000000</td>
144-
</tr>
145-
<tr>
146-
<td style="color:white; background-color:#005a9e">themeDark: #005a9e</td>
147-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
148-
</tr>
149-
<tr>
150-
<td style="color:white; background-color:#106ebe">themeDarkAlt: #106ebe</td>
151-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
152-
</tr>
153-
<tr>
154-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#0078d7">themePrimary: #0078d7</td>
155-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
156-
</tr>
157-
<tr>
158-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
159-
</tr>
160-
<tr>
161-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
162-
</tr>
163-
<tr>
164-
<td style="color:white; background-color:#2b88d8">themeSecondary: #2b88d8</td>
165-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
166-
</tr>
167-
<tr>
168-
<td style="color:black; background-color:#71afe5">themeTertiary: #71afe5</td>
169-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
170-
</tr>
171-
<tr>
172-
<td style="color:black; background-color:#c7e0f4">themeLight: #c7e0f4</td>
173-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
174-
</tr>
175-
<tr>
176-
<td style="color:black; background-color:#deecf9">themeLighter: #deecf9</td>
177-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
178-
</tr>
179-
<tr>
180-
<td style="color:black; background-color:#eff6fc">themeLighterAlt: #eff6fc</td>
181-
<td style="color:black; background-color:#fff">white: #fff</td>
182-
</tr>
183-
</table>
184-
185-
### Alert colors
186-
187-
188-
<table>
189-
<tr>
190-
<td style="color:white; background-color:#952226">themeDark: #952226</td>
191-
</tr>
192-
<tr>
193-
<td style="color:black; background-color:#f6d6d8">themeLight: #f6d6d8</td>
194-
</tr>
195-
<tr>
196-
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
197-
</tr>
198-
</table>
136+
![Theme colors (blue) with neutral colors and alert colors](../images/accessibility-blue-theme-and-alert-colors.png)
199137

200138
<br/>
201139

202-
<table>
203-
<tr>
204-
<td style="color:white; background-color:#0f7c39">themeDarkAlt: #0f7c39</td>
205-
</tr>
206-
<tr>
207-
<td style="color:black; background-color:#bff7d5">themeLight: #bff7d5</td>
208-
</tr>
209-
</table>
210-
211140
## High contrast
212141

213142
Use high contrast colors as a guide for color choices for components and states on the web. Windows computers only have the ability to detect whether a PC is running high contrast, or high contrast white. For this reason, use the default high contrast black setting for any high contrast, non-white theme.

‎docs/design/themes-colors.md

Lines changed: 8 additions & 277 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: SharePoint themes and colors
33
description: Design principles that helped form the current SharePoint themes and color palette.
4-
ms.date: 01/23/2018
4+
ms.date: 01/24/2018
55
---
66

77
# SharePoint themes and colors
@@ -28,299 +28,30 @@ The following design principles helped form the current SharePoint themes and co
2828

2929
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.
3030

31-
### Red
32-
33-
<table>
34-
<tr>
35-
<td style="color:white; background-color:#751b1e">themeDarker: #751b1e</td>
36-
<td style="color:white; background-color:#000000">black: #000000</td>
37-
</tr>
38-
<tr>
39-
<td style="color:white; background-color:#952226">themeDark: #952226</td>
40-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
41-
</tr>
42-
<tr>
43-
<td style="color:white; background-color:#c02b30">themeDarkAlt: #c02b30</td>
44-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
45-
</tr>
46-
<tr>
47-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#d13438">themePrimary: #d13438</td>
48-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
49-
</tr>
50-
<tr>
51-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
52-
</tr>
53-
<tr>
54-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
55-
</tr>
56-
<tr>
57-
<td style="color:white; background-color:#d6494d">themeSecondary: #d6494d</td>
58-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
59-
</tr>
60-
<tr>
61-
<td style="color:black; background-color:#ecaaac">themeTertiary: #ecaaac</td>
62-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
63-
</tr>
64-
<tr>
65-
<td style="color:black; background-color:#f6d6d8">themeLight: #f6d6d8</td>
66-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td></tr>
67-
<tr>
68-
<td style="color:black; background-color:#faebeb">themeLighter: #faebeb</td>
69-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
70-
</tr>
71-
<tr>
72-
<td style="color:black; background-color:#fdf5f5">themeLighterAlt: #fdf5f5</td>
73-
<td style="color:black; background-color:#fff">white: #fff</td>
74-
</tr>
75-
</table>
31+
![SharePoint color palette Red D1343](../images/themes-colors-red-theme.png)
7632

7733
<br/>
7834

79-
### Orange
80-
81-
<table>
82-
<tr>
83-
<td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td>
84-
<td style="color:white; background-color:#000000">black: #000000</td>
85-
</tr>
86-
<tr>
87-
<td style="color:white; background-color:#8d390b">themeDark: #8d390b</td>
88-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
89-
</tr>
90-
<tr>
91-
<td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td>
92-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
93-
</tr>
94-
<tr>
95-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#ca5010">themePrimary: #ca5010</td>
96-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
97-
</tr>
98-
<tr>
99-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
100-
</tr>
101-
<tr>
102-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
103-
</tr>
104-
<tr>
105-
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
106-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
107-
</tr>
108-
<tr>
109-
<td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td>
110-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
111-
</tr>
112-
<tr>
113-
<td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td>
114-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
115-
</tr>
116-
<tr>
117-
<td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td>
118-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
119-
</tr>
120-
<tr>
121-
<td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td>
122-
<td style="color:black; background-color:#fff">white: #fff</td>
123-
</tr>
124-
</table>
35+
![SharePoint color palette Orange CA5010](../images/themes-colors-orange-theme.png)
12536

12637
<br/>
12738

128-
### Green
129-
130-
<table>
131-
<tr>
132-
<td style="color:white; background-color:#094c23">themeDarker: #094c23</td>
133-
<td style="color:white; background-color:#000000">black: #000000</td>
134-
</tr>
135-
<tr>
136-
<td style="color:white; background-color:#0c602c">themeDark: #0c602c</td>
137-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
138-
</tr>
139-
<tr>
140-
<td style="color:white; background-color:#0f7c39">themeDarkAlt: #0f7c39</td>
141-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
142-
</tr>
143-
<tr>
144-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#10893e">themePrimary: #10893e</td>
145-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
146-
</tr>
147-
<tr>
148-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
149-
</tr>
150-
<tr>
151-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
152-
</tr>
153-
<tr>
154-
<td style="color:white; background-color:#14a94e">themeSecondary: #14a94e</td>
155-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
156-
</tr>
157-
<tr>
158-
<td style="color:black; background-color:#7aefa7">themeTertiary: #7aefa7</td>
159-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
160-
</tr>
161-
<tr>
162-
<td style="color:black; background-color:#bff7d5">themeLight: #bff7d5</td>
163-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
164-
</tr>
165-
<tr>
166-
<td style="color:black; background-color:#dffbea">themeLighter: #dffbea</td>
167-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
168-
</tr>
169-
<tr>
170-
<td style="color:black; background-color:#effdf4">themeLighterAlt: #effdf4</td>
171-
<td style="color:black; background-color:#fff">white: #fff</td>
172-
</tr>
173-
</table>
39+
![SharePoint color palette Green 10893E](../images/themes-colors-green-theme.png)
17440

17541
<br/>
17642

177-
### Blue
178-
179-
<table>
180-
<tr>
181-
<td style="color:white; background-color:#004578">themeDarker: #004578</td>
182-
<td style="color:white; background-color:#000000">black: #000000</td>
183-
</tr>
184-
<tr>
185-
<td style="color:white; background-color:#005a9e">themeDark: #005a9e</td>
186-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
187-
</tr>
188-
<tr>
189-
<td style="color:white; background-color:#106ebe">themeDarkAlt: #106ebe</td>
190-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
191-
</tr>
192-
<tr>
193-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#0078d7">themePrimary: #0078d7</td>
194-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
195-
</tr>
196-
<tr>
197-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
198-
</tr>
199-
<tr>
200-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
201-
</tr>
202-
<tr>
203-
<td style="color:white; background-color:#2b88d8">themeSecondary: #2b88d8</td>
204-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
205-
</tr>
206-
<tr>
207-
<td style="color:black; background-color:#71afe5">themeTertiary: #71afe5</td>
208-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
209-
</tr>
210-
<tr>
211-
<td style="color:black; background-color:#c7e0f4">themeLight: #c7e0f4</td>
212-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
213-
</tr>
214-
<tr>
215-
<td style="color:black; background-color:#deecf9">themeLighter: #deecf9</td>
216-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
217-
</tr>
218-
<tr>
219-
<td style="color:black; background-color:#eff6fc">themeLighterAlt: #eff6fc</td>
220-
<td style="color:black; background-color:#fff">white: #fff</td>
221-
</tr>
222-
</table>
43+
![SharePoint color palette Blue 0078D7](../images/themes-colors-blue-theme.png)
22344

22445
<br/>
22546

226-
### Purple
227-
228-
<table>
229-
<tr>
230-
<td style="color:white; background-color:#27268a">themeDarker: #27268a</td>
231-
<td style="color:white; background-color:#000000">black: #000000</td>
232-
</tr>
233-
<tr>
234-
<td style="color:white; background-color:#3230b0">themeDark: #3230b0</td>
235-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
236-
</tr>
237-
<tr>
238-
<td style="color:white; background-color:#5250cf">themeDarkAlt: #5250cf</td>
239-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
240-
</tr>
241-
<tr>
242-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#6b69d6">themePrimary: #6b69d6</td>
243-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
244-
</tr>
245-
<tr>
246-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
247-
</tr>
248-
<tr>
249-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
250-
</tr>
251-
<tr>
252-
<td style="color:white; background-color:#7a78da">themeSecondary: #7a78da</td>
253-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
254-
</tr>
255-
<tr>
256-
<td style="color:black; background-color:#c1c0ee">themeTertiary: #c1c0ee</td>
257-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
258-
</tr>
259-
<tr>
260-
<td style="color:black; background-color:#e1e1f7">themeLight: #e1e1f7</td>
261-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
262-
</tr>
263-
<tr>
264-
<td style="color:black; background-color:#f0f0fb">themeLighter: #f0f0fb</td>
265-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
266-
</tr>
267-
<tr>
268-
<td style="color:black; background-color:#f8f7fd">themeLighterAlt: #f8f7fd</td>
269-
<td style="color:black; background-color:#fff">white: #fff</td>
270-
</tr>
271-
</table>
47+
![SharePoint color palette Purple 6B69D6](../images/themes-colors-purple-theme.png)
27248

27349
<br/>
27450

275-
### Gray
276-
277-
<table>
278-
<tr>
279-
<td style="color:white; background-color:#323130">themeDarker: #323130</td>
280-
<td style="color:white; background-color:#000000">black: #000000</td>
281-
</tr>
282-
<tr>
283-
<td style="color:white; background-color:#403e3d">themeDark: #403e3d</td>
284-
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
285-
</tr>
286-
<tr>
287-
<td style="color:white; background-color:#53504e">themeDarkAlt: #53504e</td>
288-
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
289-
</tr>
290-
<tr>
291-
<td rowspan="3" style="font-weight:bold; vertical-align:middle; color:white; background-color:#5d5a58">themePrimary: #5d5a58</td>
292-
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
293-
</tr>
294-
<tr>
295-
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
296-
</tr>
297-
<tr>
298-
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
299-
</tr>
300-
<tr>
301-
<td style="color:white; background-color:#6d6a67">themeSecondary: #6d6a67</td>
302-
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
303-
</tr>
304-
<tr>
305-
<td style="color:black; background-color:#bbb9b8">themeTertiary: #bbb9b8</td>
306-
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
307-
</tr>
308-
<tr>
309-
<td style="color:black; background-color:#dfdedd">themeLight: #dfdedd</td>
310-
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
311-
</tr>
312-
<tr>
313-
<td style="color:black; background-color:#efeeee">themeLighter: #efeeee</td>
314-
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
315-
</tr>
316-
<tr>
317-
<td style="color:black; background-color:#f7f7f7">themeLighterAlt: #f7f7f7</td>
318-
<td style="color:black; background-color:#fff">white: #fff</td>
319-
</tr>
320-
</table>
51+
![SharePoint color palette Gray 5D5A5B](../images/themes-colors-gray-theme.png)
32152

32253
<br/>
32354

32455
## See also
32556

326-
- [Designing great SharePoint experiences](design-guidance-overview.md)
57+
- [Designing great SharePoint experiences](design-guidance-overview.md)

‎docs/images/accessibility-blue-theme-and-alert-colors.png

60.6 KB
Loading

‎docs/images/themes-colors-blue-theme.png

44.3 KB
Loading

‎docs/images/themes-colors-gray-theme.png

43.6 KB
Loading

‎docs/images/themes-colors-green-theme.png

44.7 KB
Loading

‎docs/images/themes-colors-orange-theme.png

45.4 KB
Loading

‎docs/images/themes-colors-purple-theme.png

44.3 KB
Loading

‎docs/images/themes-colors-red-theme.png

44.3 KB
Loading

0 commit comments

Comments
 (0)