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