freecodecamp/design-style-guide

Design Style Guide

Design Style Guide

Style guide for freeCodeCamp.org's Design System

design-style-guide's Issues

Use master branch for GitHub Pages

GitHub now allows using the master branch as the source for GitHub Pages.

https://github.com/blog/2228-simpler-github-pages-publishing

I think using this would make sense for this repo. /cc @QuincyLarson

The Style Guide seems still use former favicon

While the former green logo seems to have disappeared from the main site, it seems to be paradoxically still used as favicons for the Style Guide page. I suppose using this shortcut icons could be just an oversight because otherwise it would seem a bit strange...

Give elements a clear focus outline

Hi, I hope it's okay to raise an issue here. I asked on the contributor forum if this page can be worked on, and it was recommended to open an issue to suggest improvements. Let me know what you think :)

Description
The Design Style Guide webpage currently does not meet accessibility standards. To ensure freeCodeCamp can be enjoyed by all, I would like to work on the following improvement:

Focus visibility for easy keyboard navigation.
WCAG 2.4.7 Focus Visible
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Reproduction steps
Steps to reproduce the behaviour:

1. Go to https://design-style-guide.freecodecamp.org/
2. Use the Tab Key to navigate through all interactive elements
3. See the lack of outline

Expected behaviour
Each focusable element shows a clear outline when in focus. A clear outline is defined as at least 2px thick and with at least 3:1 contrast ratio: https://w3c.github.io/wcag/understanding/focus-visible-enhanced.html

Suggested Design
A 3px white solid outline with a 3px outline-offset as can be seen in the screenshot below.

Screenshot of suggested focus indication

Acceptance criteria
Given A user navigates the web using a keyboard
When they read through the freeCodeCamp Design Style Guide
Then the clear focus indication lets them know which element they are currently on.

Add code editor typeface to style guide

The font is Ubuntu mono. Here's the full information:

I submitted freeCodeCamp to brandcolors.net

I submitted the following colors to brandcolors.net
006400, FF9C2A, FF4025, 3949AB, EFEFEF

It will take a while for the issue to be processed, so please let me know which colors are more dominant and represent the brand freeCodeCamp.

Typography Section

You need to include the following fonts:
Logo: SaxMono http://www.dafont.com/saxmono.font

@haydmills I can submit a pull request with the changes if you want 😄

Update meta tags

Our favicons and possibly other meta tags are out of date. They can be brought up to date to look like this: https://github.com/freeCodeCamp/about/blob/master/index.html