Main Colors
(logged in / not logged in)
-
#222222, RGB 34,34,34
-
#007E84, RGB 0,126,132
Background colors
(disabled buttons, buttons, backgrounds)
-
#EEEEEE, RGB 238,238,238, disabled buttons
-
#FFEAFC, RGB 255,234,252, buttons and backgrounds
-
#D3FFFD, RGB 211,255,253 buttons and backgrounds
Light colors
(Passive icons, notification and button borders, metadata, time-stamps)
-
#AAAAAA, RGB 170,170,170, Passive icons
-
#FF69E8, RGB 255, 105, 232, notification/button borders, metadata
-
#00D3CA, RGB 0,211,202 notification/button borders, metadata, time-stamps
Subheader colors
(Subheaders, links, visited links, icon focus)
Title colors
(and body colors)
-
#222222, RGB 34,34,34, titles, body text, icon focus
-
#690055, RGB 105,0,85, button and notification text
-
#00444A, RGB 0,68,74 titles, body text
When using color combinations the main D-CENT color must always be the dominant one. Keep the ratio at 80-20 or better, 90-10. When ratio for any reason is closer to 50/50, (eg. voting pie chart) use a lighter version of one, and a darker of the other.
The Header
Is Always Darker Than The Subheader
Magenta combinations are only for special highlights, like visited links, rather than for general purpose content / material. Unvisited links should always be in the D-CENT color: #007E84
Instead of full black, we use a #222222 / RGB 34, 34, 34 to soften the look slightly. Otherwise, feel free to use blacks and gray-scales in any combination with the other colors. For grays, the ratio can vary from 50-50 to 80-20 (gray-color). Be wary of too much black as it can easily get too heavy. For print use straight black (0,0,0,100) and keep the ratio 50-50 or ideally 20-80 black/color.
HTML
<h3>Main Colors</h3>
<h5>(logged in / not logged in)</h5>
<ul class="sg-colors title-colors">
<li>
<span class="sg-swatch" style="background: #222222;"></span>
<span class="sg-label">#222222, RGB 34,34,34</span>
</li>
<li>
<span class="sg-swatch" style="background: #007E84;"></span>
<span class="sg-label">#007E84, RGB 0,126,132</span>
</li>
</ul>
<br>
<h3>Background colors</h3>
<h5>(disabled buttons, buttons, backgrounds)</h5>
<ul class="sg-colors background-colors">
<li>
<span class="sg-swatch" style="background: #EEEEEE;"></span>
<span class="sg-label">#EEEEEE, RGB 238,238,238, disabled buttons</span>
</li>
<li>
<span class="sg-swatch" style="background: #FFEAFC;"></span>
<span class="sg-label">#FFEAFC, RGB 255,234,252, buttons and backgrounds</span>
</li>
<li>
<span class="sg-swatch" style="background: #D3FFFD;"></span>
<span class="sg-label">#D3FFFD, RGB 211,255,253 buttons and backgrounds</span>
</li>
</ul>
<br>
<h3>Light colors</h3>
<h5>(Passive icons, notification and button borders, metadata, time-stamps)</h5>
<ul class="sg-colors light-colors">
<li>
<span class="sg-swatch" style="background: #AAAAAA;"></span>
<span class="sg-label">#AAAAAA, RGB 170,170,170, Passive icons</span>
</li>
<li>
<span class="sg-swatch" style="background: #FF69E8;"></span>
<span class="sg-label">#FF69E8, RGB 255, 105, 232, notification/button borders, metadata</span>
</li>
<li>
<span class="sg-swatch" style="background: #00D3CA;"></span>
<span class="sg-label">#00D3CA, RGB 0,211,202 notification/button borders, metadata, time-stamps</span>
</li>
</ul>
<br>
<h3>Subheader colors</h3>
<h5>(Subheaders, links, visited links, icon focus)</h5>
<ul class="sg-colors subheader-colors">
<li>
<span class="sg-swatch" style="background: #666666;"></span>
<span class="sg-label">#666666, RGB 102,102,102, Subheaders</span>
</li>
<li>
<span class="sg-swatch" style="background: #9E2E8D;"></span>
<span class="sg-label">#9E2E8D, RGB 158,46,141, visited links</span>
</li>
<li>
<span class="sg-swatch" style="background: #007E84;"></span>
<span class="sg-label">#007E84, RGB 0,126,132, Subheaders, links, icon focus</span>
</li>
</ul>
<br>
<h3>Title colors</h3>
<h5>(and body colors)</h5>
<ul class="sg-colors title-colors">
<li>
<span class="sg-swatch" style="background: #222222;"></span>
<span class="sg-label">#222222, RGB 34,34,34, titles, body text, icon focus</span>
</li>
<li>
<span class="sg-swatch" style="background: #690055;"></span>
<span class="sg-label">#690055, RGB 105,0,85, button and notification text</span>
</li>
<li>
<span class="sg-swatch" style="background: #00444A;"></span>
<span class="sg-label">#00444A, RGB 0,68,74 titles, body text</span>
</li>
</ul>
<p style="color: #00444A">
When using color combinations the main D-CENT color must always be the dominant one. Keep the ratio at 80-20 or better, 90-10. When ratio for any reason is closer to 50/50, (eg. voting pie chart) use a lighter version of one, and a darker of the other.<h1 style="color:#00444A">The Header</h1> <h3 style="color: #007E84">Is Always Darker Than The Subheader</h3>
</p>
<p style="color: #00444A">
<span style="color: #FF69E8">Magenta combinations </span>are only for special highlights, like <span style="color: #9E2E8D">visited links,</span><span> rather than for general purpose content / material. </span><a href="">Unvisited links</a> should always be in the D-CENT color: #007E84
</p>
<p>
Instead of full black, we use a #222222 / RGB 34, 34, 34 to soften the look slightly. Otherwise, feel free to use blacks and gray-scales in any combination with the other colors. For grays, the ratio can vary from 50-50 to 80-20 (gray-color). Be wary of too much black as it can easily get too heavy. For print use straight black (0,0,0,100) and keep the ratio 50-50 or ideally 20-80 black/color. </span>
</p>
<style>
.sg-colors li {
width: 8em;
}
</style>