Skip to content

Commit 2cf5580

Browse files
Linda-EditorLinda-Editor
authored
Orange and green
1 parent 76e3fc8 commit 2cf5580

File tree

1 file changed

+85
-3
lines changed

1 file changed

+85
-3
lines changed

‎docs/design/themes-colors.md

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Our themes embody a professional look and feel that ensures coherency and convey
3131

3232
**Accessible**
3333

34-
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.
34+
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.
3535

3636
## Colors
3737

@@ -85,11 +85,93 @@ The SharePoint color palette has been optimized for screens and devices, and to
8585

8686
### Orange
8787

88-
<table><tr><td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td><td style="color:white; background-color:#000000">black: #000000</td></tr><tr><td style="color:white; background-color:#8d390b">themeDark: #8d390b</td><td style="color:white; background-color:#212121">neutralDark: #212121</td></tr><tr><td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td><td style="color:white; background-color:#333">neutralPrimary: #333</td></tr><tr><td rowspan=3 style="font-weight:bold; vertical-align:middle; color:white; background-color:#ca5010">themePrimary: #ca5010</td><td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td></tr><tr><td style="color:white; background-color:#666666">neutralSecondary: #666666</td></tr><tr><td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td></tr><tr><td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td><td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td></tr><tr><td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td><td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td></tr><tr><td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td><td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td></tr><tr><td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td><td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td></tr><tr><td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td><td style="color:black; background-color:#fff">white: #fff</td></tr></table>
88+
<table style="font-weight:bold; vertical-align:middle">
89+
<tr>
90+
<td style="color:white; background-color:#6f2d09">themeDarker: #6f2d09</td>
91+
<td style="color:white; background-color:#000000">black: #000000</td>
92+
</tr>
93+
<tr>
94+
<td style="color:white; background-color:#8d390b">themeDark: #8d390b</td>
95+
<td style="color:white; background-color:#212121">neutralDark: #212121</td>
96+
</tr>
97+
<tr>
98+
<td style="color:white; background-color:#b5490f">themeDarkAlt: #b5490f</td>
99+
<td style="color:white; background-color:#333">neutralPrimary: #333</td>
100+
</tr>
101+
<tr>
102+
<td style="color:white; background-color:#ca5010">themePrimary: #ca5010</td>
103+
<td style="color:white; background-color:#3c3c3c">neutralPrimaryAlt: #3c3c3c</td>
104+
</tr>
105+
<tr>
106+
<td style="color:white; background-color:#666666">neutralSecondary: #666666</td>
107+
<td style="color:black; background-color:#a6a6a6">neutralTertiary: #a6a6a6</td>
108+
</tr>
109+
<tr>
110+
<td style="color:white; background-color:#e55c12">themeSecondary: #e55c12</td>
111+
<td style="color:black; background-color:#c8c8c8">neutralTertiaryAlt: #c8c8c8</td>
112+
</tr>
113+
<tr>
114+
<td style="color:black; background-color:#f6b28d">themeTertiary: #f6b28d</td>
115+
<td style="color:black; background-color:#eaeaea">neutralLight: #eaeaea</td>
116+
</tr>
117+
<tr>
118+
<td style="color:black; background-color:#fbdac9">themeLight: #fbdac9</td>
119+
<td style="color:black; background-color:#f4f4f4">neutralLighter: #f4f4f4</td>
120+
</tr>
121+
<tr>
122+
<td style="color:black; background-color:#fdede4">themeLighter: #fdede4</td>
123+
<td style="color:black; background-color:#f8f8f8">neutralLighterAlt: #f8f8f8</td>
124+
</tr>
125+
<tr>
126+
<td style="color:black; background-color:#fef6f1">themeLighterAlt: #fef6f1</td>
127+
<td style="color:black; background-color:#fff">white: #fff</td>
128+
</tr>
129+
</table>
89130

90131
### Green
91132

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

94176
### Blue
95177

0 commit comments

Comments
 (0)