- A place to test out color and font ideas for your next web development project
- Input the colors you want to change in hex code format and hit
Swap Theme
Use the following link to visit this style guide: Following Link
Insert below code into the top of your CSS file and replace te hex codes with your own
:root { /* fonts */ --ff: 'Nunito', sans-serif; /* border radius */ --border-radius: 0.4rem; --border-radius-form: 0.25rem; /* font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* border weights */ --line-2: 0.125rem; --line-4: 1.25rem; /* bg */ --col-bg: #254643; /* element bg */ --col-surface: #316d69; /* one level up */ --col-surface2: #498884; /* primary colors */ --col-p-200: #f5efc6; --col-p-500: #e7d76f; --col-p-700: #dbca57; /* secondary colors */ --col-s-200: #c6e6f5; --col-s-500: #6fbfe7; --col-s-700: #57afdb; /* text colors */ --col-on-surface: #cbd0e6; --col-on-primary: #1a1b26; --col-on-secondary: #1a1b26; }