Style Guide - TheFiveMemberTeam/Retrograde-DarkOrbit GitHub Wiki
This is a general style guide for the website
General
Backgrounds are dark, with the main background being black
Text is generally white
Most tags are rounded-xl
Margins and padding are usually 1:1 ratio
On hover with intractable elemtents, backgrounds should get one shade lighter. e.g. slate-700
becomes slate-600
When disabled, backgrounds get 2 shades darker and text is 2 shades lighter than the current background
Text boxes
Base background is slate-700
Shape rounded-xl
Margins are 1, padding is 2y 10x
On hover background should be slate-600
On disable: bg-slate-900 text-gray-700
Sample tailwind: bg-slate-700 text-white m-1 py-2 px-10 rounded-xl hover:bg-slate-600 disabled:bg-slate-900 placeholder:disabled:text-gray-700
Buttons
Base background is slate-900
Shape rounded-xl
On hover background should be slate-800
On disable: bg-slate-950 text-gray700
Margins are 1, padding is 2y 10x
Sample tailwind: bg-slate-900 text-white m-1 py-2 px-10 rounded-xl hover:bg-slate-800 disabled:bg-slate-950 disabled:text-gray-700