Skip to content

Update color_guidelines.md #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sylentwulf81 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update color_guidelines.md #62

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions branding/color_guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,39 @@ Our logo combines two semi-circular elements that form an abstract 'S', represen

### Primary Colors

- Turquoise Blue: #86cecb ![#86cecb](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%2386cecb"/></svg>)
- Turquoise Blue: #86cecb

- Main brand color
- Use for primary UI elements
- Represents creativity and fluidity

- Deep Teal: #137a7f ![#137a7f](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23137a7f"/></svg>)
- Deep Teal: #137a7f
- Secondary brand color
- Use for important actions and depth
- Represents trust and stability

### Accent Color

- Vibrant Pink: #e12885 ![#e12885](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23e12885"/></svg>)
- Vibrant Pink: #e12885
- Use sparingly for highlights and calls-to-action
- Creates energy and excitement
- Ideal for interactive elements and important notifications

### Monochrome Colors

- Pure White: #EEEEEE ![#FFFFFF](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23FFFFFF" stroke="%23bec8d1"/></svg>)
- Pure White: #EEEEEE

- Primary background color
- Use for text on dark backgrounds
- Creates clean, open spaces

- Charcoal: #373b3e ![#373b3e](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23373b3e"/></svg>)
- Charcoal: #373b3e

- Primary text color
- Use for headings and body copy
- Creates strong contrast and readability

- Light Grey: #dbe1e6 ![#dbe1e6](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23bec8d1"/></svg>)
- Light Grey: #dbe1e6
- Secondary text color
- Use for subtle elements and backgrounds
- Creates hierarchy and depth
Expand Down