Here’s the style guide I whipped up for this task: Website Design System.
Any feedback is welcomed!
Here is my spin on this project hope you enjoy/ find it useful!!
feel free to take a look at the other stuff on my profile too, its the previous projects on the fullstack development course i have done so far.
Any feed back will help massively!!!
All the best
J.F Web Studio
I like this alot its very well presented, easy to navigate my only suggestion is to add the font sizes you intend to use through out the site to keep consistency… (I can see you have sort of done this in the text styles but just pop the size in pixels next to them to clarify the actual size, not everyone wants to have to inspect the page to find them )
Other than that yours is a perfect representation of a design system!
Hey gais, check out mine below. Appreciate any feedback
Thanks for the feedback! That’s a good idea, I probably should have done that. Next time!
Hey is there any chance you could publish it live to GitHub pages and post the link?
What ive done is on my github its not as pretty as yours but its a basic example of the detail you could go in to https://joshua-mcfield99.github.io/Design-System/
Hey ladies and gentlemen!
I’ve finished this project, though i think i didn’t strictly follow the script.
It’s a cross over design, as it’s not just about aesthetic but also functionality. It’s been uploaded to my website, as i’m using it for this entire course, until i’m able to create a masterpiece for myself!
Hi here is a link to my very basic style guide. It was also my first time using gist. I am not entirely sure how others made a previewable page- perhaps that was separate from gist. thanks for any feed back
Here is my website style guide. I added a few features such as topic menus at the top and a resource list at the end of each section that provides links to
- example color schemes
- color scheme generators
- example font and style combinations
- web accessibility contrast checkers
- Web design examples and ideas
View the web page at
Feedback is appreciated.
Hi Aidan, I like the effects in the header title. It gives the page a fresh/unique appearance. Also, the layout is inviting (not cluttered with lots of text); hence, I wanted to look through the page as soon as I opened it. Nice work!
Hi, like the layout. In some cases the test is difficult to read given the font and background color (not enough contrast). See contrast checker WebAIM: Contrast Checker
Hi chip! I’m liking the style guide, nice and detailed withsome cool little layout techniques in there! Good job!
Hi everyone !
I want to share my style guide project with you. I am learning web development since 2 months and I used HTML and CSS. I made 3 rows of threes differents typographies, 3 rows of color charts circles and a section about-me. I sticked a nav bar at the top.
Thanks for your feedback, I give you the links of my github and my site and three pictures in this post.
Have a nice day and have fun with coding !
Yeah, I wanted these to be intentionally subtle, but its probably a little TOO subtle.
This is my attempt at building a Website Design System.
You can view the page at:
and here is the link to the repo:
Feedback is appreciated especially design-wise.
Nice Work! Looks like you put some time into this project. I like your use of menus and separation of color, fonts, styles, and text html and css files. I found this helpful. One suggestion, I wasn’t sure how to get back to your submenus on each page without scrolling to bottom or top of page; hence, a “back to submenu” option might be helpful at the end of each section within a page that takes the user back to the sub menu.
Beautiful Site! and really informative!
Thank you so much!!!
Thank you so much for the suggestion. I’ll definitely add 'back to submenu" functionality.