Skip to content

Latest commit

 

History

History
45 lines (30 loc) · 2.67 KB

style-guide.md

File metadata and controls

45 lines (30 loc) · 2.67 KB

Style Guide

Branding

Please use "Disciple.Tools" or "D.T" and avoid "Disciple Tools", or "DiscipleTools" or other variants.

Logos

File Description Link
Disciple.Tools Logo Black Black logo with text Download
Disciple.Tools Logo White White logo with text Download
Icon in png format Download
Icon in svg format Download

Theme Colors

#3f729b Main color blue: #3f729b
#8BC34A Secondary color: #8BC34A
#224f72 Darker blue: #224f72
#4caf50 Success/New green: #4caf50
#00897B Action butons: #00897B

Status Colors
#4CAF50 Active: #4CAF50
#FF9800 Paused: #FF9800
#F43636 New: #F43636
#366184 other: #366184
#808080 Archived: #808080

CSS filters for svg icons.

Add this css to an icon to change its color.

To #3F729B #3F729B filter: invert(41%) sepia(42%) saturate(518%) hue-rotate(164deg) brightness(94%) contrast(100%);

To find a good filter see https://codepen.io/sosuke/pen/Pjoqqp

Use the existing dt-white-icon,dt-blue-icon anddt-green-icon classes to quitly change an icon color.

Example: <img src="settings.svg"> gives image

<img class="dt-blue-icon" src="settings.svg"> gives image