My Website Style Guide
updated on 29 Nov 2024
Colors
Primary Blue
#1d3557
Secondary Blue
#457B9D
Sky Blue
#4a88c6
Light Blue
#c0e9fc
Typography
Lato
Regular: The quick brown fox jumps over the lazy dog
Bold: The quick brown fox jumps over the lazy dog
Italic: The quick brown fox jumps over the lazy dog
Raleway
Regular: The quick brown fox jumps over the lazy dog
Bold: The quick brown fox jumps over the lazy dog
Italic: The quick brown fox jumps over the lazy dog
Caveat
Regular: The quick brown fox jumps over the lazy dog
Bold: The quick brown fox jumps over the lazy dog
Italic: The quick brown fox jumps over the lazy dog
Text Styles
Heading 1
font-lato font-bold text-3xl sm:text-3xl md:text-4xl text-[#1d3557]
Heading 2
font-lato font-semibold text-2xl sm:text-3xl text-[#1d3557]
Heading 3
font-lato font-semibold text-xl sm:text-2xl text-[#1d3557]
Body Text
font-lato text-lg sm:text-xl
font-raleway font-medium text-lg md:text-xl text-[#457B9D] hover:bg-[#c0e9fc]
Blockquote Text Style
font-caveat text-2xl sm:text-3xl md:text-3xl text-center italic
Spacing
Main Content Padding:
- Mobile: px-4 (1rem)
- Tablet: md:px-8 (2rem)
- Desktop: lg:px-16 (4rem)
- Large Desktop: xl:px-32 (8rem)
Vertical Spacing:
- Between Sections: space-y-12 (3rem)
- Between Elements: space-y-6 (1.5rem)
- Small Gaps: space-y-4 (1rem)
Components
Buttons
Classes: w-[200px] h-12 rounded-2xl bg-white text-sky-blue font-raleway font-semibold text-lg shadow-lg hover:bg-white hover:text-secondary hover:shadow-lg hover:shadow-slate-500 transition-all duration-300 ease-in-out hover:-translate-y-1
Navigation
Link Classes: relative p-2 font-raleway font-medium text-lg md:text-xl text-[#457B9D] hover:bg-[#c0e9fc]
Active Link Additional Class: bg-[#c0e9fc]
Cards
Card Title
Card description text goes here
Additional information
Container: projects mb-8 p-5 bg-white rounded-lg shadow-lg
Title: text-xl sm:text-2xl md:text-3xl lg:text-3xl font-bold font-raleway text-[#1d3557] hover:text-[#457B9D]
Description: text-lg sm:text-xl md:text-2xl text-[#457B9D] mt-2 font-normal font-lato
Info: text-base sm:text-lg md:text-xl text-gray-600 mt-4 font-light font-raleway
Form Elements
Label: text-lg font-raleway font-semibold text-gray-700
Input: w-full px-4 py-2 text-md relative cursor-text rounded-md text-gray-700 font-normal font-raleway border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#457B9D]
Classes: w-full h-12 outline-none cursor-pointer px-4 py-2 text-lg font-raleway font-light text-gray-700 rounded-md appearance-none
Container: group inline-flex items-center justify-start px-3.5 py-1.5 border...
Checkbox: mr-2 peer appearance-none h-5 w-5 border...
Label: text-left font-raleway peer-checked:text-secondary peer-checked:font-medium