amplication / docs

Amplication docs
https://docs.amplication.com
Apache License 2.0
17 stars 62 forks source link

Update: Amplication's Docs Typography and Colors #366

Open dericksozo opened 1 year ago

dericksozo commented 1 year ago

I got on a call with Alex Bass and we discussed how to improve the documentation website's design to improve the user experience.

He suggested the following changes:

Alex feedback:

Make it darker color (grey color) on things that are not clicked or highlighted.

Replace the purple with white, so when you click or hover it becomes white (links)

All hyper links should be (#53DBEE) 

---

Text that is not highlighted - B7BAC7‏
Text that active - FFFFFF
Hyper link iside the contant - 53DBEE

373D57 - bg
text - B7BAC7
Text - #FFF

---

Let's make sure everything is the same size and same font

Top menu 14px

Poppins

---

We don't need to use the purple at all for the text.
 It's

Right Sidebar:

Text that is not highlighted - B7BAC7‏
Text that active - FFFFFF
Hyper link iside the contant - 53DBEE

Left Navbar is navigation
Right is fast navigation

Right should have the same values as the left (which is white and grey )

For breadcrumbs:

darker grey for everything until you get to the actual active page, which should be white...

Remove the darker grey background color for the breadcrumbs...

menu on the left should be 14px...

menu on the right should be 12px

----

אלכס בס‎3:21 PM
D3D4DC
אלכס בס‎3:23 PM
B7BAC7
53DBEE
אלכס בס‎3:25 PM
Text that is not highlighted - B7BAC7‏
Text that active - FFFFFF
Hyper link iside the contant - 53DBEE‏‎
You3:27 PM
##22273c
אלכס בס‎3:28 PM
373D57 - bg
text - B7BAC7
*timestamp*
אלכס בס‎3:31 PM
top menu - 14 px same font  - font poppins
You3:32 PM
header background-color: #15192c
אלכס בס‎3:35 PM
right menu should have the color style of the left
אני11:25
Text that is not highlighted - B7BAC7‏
Text that active - FFFFFF
Hyper link iside the contant - 53DBEE‏‏‎
אלכס בס‎3:39 PM
breadcrumbs 
Current link - FFFFFF
papa link  - B7BAC7‏
icon - B7BAC7‏‎
no need in current link bg wrap
אלכס בס‎3:44 PM
side menu left -14px
fast nav on right - 12px
middle contant :
H1 - 32px semi bold
inner contant:
Title - 18px semi bold
text - 14px  regular color D3D4DC
line hight - 1.25rem (for inner content)

Make sure the arrow is around 14px. Should be tinier.

אלכס בס‎3:48 PM
left menu arrow should be smaller
14px
אלכס בס‎3:51 PM
bg of scroll bar - 15192C
scroll stick - 373D57
dericksozo commented 11 months ago

I'm taking care of this Issue in PR #424.