Skip to content

Commit 9a6f327

Browse files
jaimergpjaimergp
authored
update hex colors in style guide (#19)
* update hex colors in style guide * add info about css sources
1 parent b0c3443 commit 9a6f327

File tree

1 file changed

+51
-53
lines changed

1 file changed

+51
-53
lines changed

‎src/pages/style-guide.mdx

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import TabItem from "@theme/TabItem";
66

77
# conda-forge Style guide
88

9-
We're excited to introduce the conda-forge brand guide – your go-to resource for all things conda-forge branding. This document sets the stage for how we want to showcase the conda-forge brand consistently and accurately.
9+
We're excited to introduce the conda-forge brand guide: your go-to resource for all things conda-forge branding. This document sets the stage for how we want to showcase the conda-forge brand consistently and accurately.
1010

1111
Whether you're a part of our team, a collaborator, or an external partner, this guide is here to help you represent conda-forge in the best possible way. We believe that by following these guidelines, we can keep our brand's values at the forefront and maintain effective communication with everyone. Thanks for being a part of our journey!
1212

@@ -57,17 +57,17 @@ Whether you're a part of our team, a collaborator, or an external partner, this
5757
<div className="row margin-bottom--md">
5858
<div className="col">
5959
<div className="color-container">
60-
<div className="color" style={{ backgroundColor: "#FF3664" }}></div>
61-
<div className="color-text">#FF3664</div>
60+
<div className="color" style={{ backgroundColor: "#00695c" }}></div>
61+
<div className="color-text">#00695c</div>
6262
</div>
6363
<div className="color-container">
6464
<div className="color-text">
6565
<h1>+</h1>
6666
</div>
6767
</div>
6868
<div className="color-container">
69-
<div className="color" style={{ backgroundColor: "#FF4B2B" }}></div>
70-
<div className="color-text">#FF4B2B</div>
69+
<div className="color" style={{ backgroundColor: "#26a69a" }}></div>
70+
<div className="color-text">#26a69a</div>
7171
</div>
7272
<div className="color-container">
7373
<div className="color-text">
@@ -76,7 +76,7 @@ Whether you're a part of our team, a collaborator, or an external partner, this
7676
</div>
7777
<div className="color-container">
7878
<div className="color-gradient"></div>
79-
<div className="color-text">(60deg, #FF3664 0%, #FF4B2B 100%)</div>
79+
<div className="color-text">(60deg, #00695c 20%, #26a69a 80%)</div>
8080
</div>
8181
</div>
8282
</div>
@@ -124,8 +124,8 @@ Whether you're a part of our team, a collaborator, or an external partner, this
124124
</div>
125125
<div className="col">
126126
<div className="color-container">
127-
<div className="color" style={{ backgroundColor: "#B34400" }}></div>
128-
<div className="color-text">#B34400</div>
127+
<div className="color" style={{ backgroundColor: "#008478" }}></div>
128+
<div className="color-text">#008478</div>
129129
</div>
130130
<div className="color-container">
131131
<div
@@ -145,32 +145,28 @@ Whether you're a part of our team, a collaborator, or an external partner, this
145145
</div>
146146
<div className="col">
147147
<div className="color-container">
148-
<div className="color" style={{ backgroundColor: "#E95800" }}></div>
149-
<div className="color-text">#E95800</div>
148+
<div className="color" style={{ backgroundColor: "#b2dfdb" }}></div>
149+
<div className="color-text">#b2dfdb</div>
150150
</div>
151151
<div className="color-container">
152-
<div className="color" style={{ backgroundColor: "#CE4E00" }}></div>
153-
<div className="color-text">#CE4E00</div>
152+
<div className="color" style={{ backgroundColor: "#80cbc4" }}></div>
153+
<div className="color-text">#80cbc4</div>
154154
</div>
155155
<div className="color-container">
156-
<div className="color" style={{ backgroundColor: "#C54B00" }}></div>
157-
<div className="color-text">#C54B00</div>
156+
<div className="color" style={{ backgroundColor: "#26a69a" }}></div>
157+
<div className="color-text">#26a69a</div>
158158
</div>
159159
<div className="color-container">
160-
<div className="color" style={{ backgroundColor: "#B34400" }}></div>
161-
<div className="color-text">#B34400</div>
160+
<div className="color" style={{ backgroundColor: "#007466" }}></div>
161+
<div className="color-text">#007466</div>
162162
</div>
163163
<div className="color-container">
164-
<div className="color" style={{ backgroundColor: "#A13D00" }}></div>
165-
<div className="color-text">#A13D00</div>
164+
<div className="color" style={{ backgroundColor: "#00695c" }}></div>
165+
<div className="color-text">#00695c</div>
166166
</div>
167167
<div className="color-container">
168-
<div className="color" style={{ backgroundColor: "#983A00" }}></div>
169-
<div className="color-text">#983A00</div>
170-
</div>
171-
<div className="color-container">
172-
<div className="color" style={{ backgroundColor: "#7D3000" }}></div>
173-
<div className="color-text ">#7D3000</div>
168+
<div className="color" style={{ backgroundColor: "#004d40" }}></div>
169+
<div className="color-text">#004d40</div>
174170
</div>
175171
</div>
176172
</div>
@@ -187,8 +183,8 @@ Whether you're a part of our team, a collaborator, or an external partner, this
187183
</div>
188184
<div className="col">
189185
<div className="color-container">
190-
<div className="color" style={{ backgroundColor: "#FF5501" }}></div>
191-
<div className="color-text">#FF5501</div>
186+
<div className="color" style={{ backgroundColor: "#4db6ac" }}></div>
187+
<div className="color-text">#4db6ac</div>
192188
</div>
193189
<div className="color-container">
194190
<div
@@ -208,32 +204,28 @@ Whether you're a part of our team, a collaborator, or an external partner, this
208204
</div>
209205
<div className="col">
210206
<div className="color-container">
211-
<div className="color" style={{ backgroundColor: "#FF884E" }}></div>
212-
<div className="color-text">#FF884E</div>
213-
</div>
214-
<div className="color-container">
215-
<div className="color" style={{ backgroundColor: "#FF6F27" }}></div>
216-
<div className="color-text">#FF6F27</div>
207+
<div className="color" style={{ backgroundColor: "#e0f2f1" }}></div>
208+
<div className="color-text">#e0f2f1</div>
217209
</div>
218210
<div className="color-container">
219-
<div className="color" style={{ backgroundColor: "#FF661B" }}></div>
220-
<div className="color-text">#FF661B</div>
211+
<div className="color" style={{ backgroundColor: "#b2dfdb" }}></div>
212+
<div className="color-text">#b2dfdb</div>
221213
</div>
222214
<div className="color-container">
223-
<div className="color" style={{ backgroundColor: "#FF5501" }}></div>
224-
<div className="color-text">#FF5501</div>
215+
<div className="color" style={{ backgroundColor: "#80cbc4" }}></div>
216+
<div className="color-text">#80cbc4</div>
225217
</div>
226218
<div className="color-container">
227-
<div className="color" style={{ backgroundColor: "#E64C00" }}></div>
228-
<div className="color-text">#E64C00</div>
219+
<div className="color" style={{ backgroundColor: "#009688" }}></div>
220+
<div className="color-text">#009688</div>
229221
</div>
230222
<div className="color-container">
231-
<div className="color" style={{ backgroundColor: "#DA4800" }}></div>
232-
<div className="color-text">#DA4800</div>
223+
<div className="color" style={{ backgroundColor: "#00897b" }}></div>
224+
<div className="color-text">#00897b</div>
233225
</div>
234226
<div className="color-container">
235-
<div className="color" style={{ backgroundColor: "#B33B00" }}></div>
236-
<div className="color-text">#B33B00</div>
227+
<div className="color" style={{ backgroundColor: "#00796b" }}></div>
228+
<div className="color-text">#00796b</div>
237229
</div>
238230
</div>
239231
</div>
@@ -250,23 +242,23 @@ Whether you're a part of our team, a collaborator, or an external partner, this
250242
</div>
251243
<div className="col">
252244
<div className="color-container">
253-
<div className="color" style={{ backgroundColor: "#01C3E3" }}></div>
254-
<div className="color-text">#01C3E3</div>
245+
<div className="color" style={{ backgroundColor: "#1976d2" }}></div>
246+
<div className="color-text">#1976d2</div>
255247
<div className="color-text">Information</div>
256248
</div>
257249
<div className="color-container">
258-
<div className="color" style={{ backgroundColor: "#00CD66" }}></div>
259-
<div className="color-text">#00CD66</div>
250+
<div className="color" style={{ backgroundColor: "#388e3c" }}></div>
251+
<div className="color-text">#388e3c</div>
260252
<div className="color-text">Success</div>
261253
</div>
262254
<div className="color-container">
263-
<div className="color" style={{ backgroundColor: "#FF8C00" }}></div>
264-
<div className="color-text">#FF8C00</div>
255+
<div className="color" style={{ backgroundColor: "#ef6c00" }}></div>
256+
<div className="color-text">#ef6c00</div>
265257
<div className="color-text">Warning</div>
266258
</div>
267259
<div className="color-container">
268-
<div className="color" style={{ backgroundColor: "#FF4649" }}></div>
269-
<div className="color-text">#FF4649</div>
260+
<div className="color" style={{ backgroundColor: "#d84315" }}></div>
261+
<div className="color-text">#d84315</div>
270262
<div className="color-text">Danger</div>
271263
</div>
272264
</div>
@@ -368,9 +360,9 @@ env = Environment(loader=loader)
368360
### Code block with a title
369361

370362
```python title="/src/conf.py"
371-
project = u'conda-forge'
372-
copyright = u'2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
373-
author = u'conda-forge'
363+
project = 'conda-forge'
364+
copyright = '2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
365+
author = 'conda-forge'
374366
```
375367

376368
---
@@ -480,3 +472,9 @@ Additional Figma file for colors and components
480472
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fc7CHCElI13imGMWzTct1ss%2FConda-forge-website-redesign%3Ftype%3Ddesign%26node-id%3D10%253A831%26mode%3Ddesign%26t%3Do71HVpua0grT8shW-1"
481473
allowfullscreen
482474
></iframe>
475+
476+
---
477+
478+
## Sources
479+
480+
Most CSS redefinitions are done in `src/css/custom.css`. Check for `--ifm-*` variables in the `:root` nodes.

0 commit comments

Comments
 (0)