FTSP Style Guide
Color Palette
Primary
Hex: #194084
RGB (25, 64, 132)
Dark Cornflower Blue
Secondary
Hex: #025959
RGB (2, 89, 89)
Midnight Green (Eagle Green)
Tertiary
Hex: #80BFBF
RGB (128, 191, 191)
Moonstone Blue
Highlight Color
Hex: #008080
RGB (0, 128, 128)
Teal
Header Font
Hex: #333333
RGB (51, 51, 51)
Dark Charcoal
Body Font
Hex: #000000
RGB (0, 0, 0)
Black
Typography
Heading 1
Inter / 36px, 5.5vw + 1rem, 60px (clamp)
Heading 2
Inter / 32px, 3.2vw + 0.9rem, 48px (clamp)
Heading 3
Inter / 26px, 2.7vw + 0.6rem, 40px (clamp)
Heading 4
Inter / 22px, 2.2vw + 0.35rem, 32px (clamp)
Body text:
Lorem ipsum In blandit quis erat sed hendrerit. Mauris blandit nec magna sed mattis. Curabitur feugiat vestibulum porta. Duis quis ex sollicitudin neque elementum tempus. Vestibulum ultricies malesuada elit,vitae fringilla enim lobortis vel. Duis ante odio, egestas id lectus quis, convallis pulvinar ex.Maecenas at lobortis urna. Donec ipsum eros, egestas et iaculis vel, aliquam eu lorem.Cras a lectus nisl. Pellentesque ac scelerisque eros. Sed at mi libero.Cras feugiat porttitor malesuada. Ut dignissim, velit eu vulputate porta, enim magna porttitor eros,vel pulvinar massa lacus a leo. Etiam non molestie diam. Nunc at nunc et sapien sollicitudin efficitur.
Poppins / 17px, 1.1vw + 0.55rem, 20px(clamp)
This is an internal link
This is an external link
Poppins / 17px, 1.1vw + 0.55rem, 20px(clamp)
List Styles:
Ordered List:
- Lorem ipsum Etiam egestas diam et justo tincidunt, id gravida risus tincidunt
- Etiam maximus turpis in vestibulum aliquet
- Pellentesque pharetra velit vel eros fermentum lobortis
Unordered List:
- Lorem ipsum Etiam egestas diam et justo tincidunt, id gravida risus tincidunt
- Etiam maximus turpis in vestibulum aliquet
- Pellentesque pharetra velit vel eros fermentum lobortis
- Curabitur vehicula, ex ut suscipit dapibus, libero turpis porta sem, eu cursus sapien purus viverra lectus. Aliquam facilisis ante tortor. Sed fermentum lobortis metus, quis gravida nunc laoreet sit amet. Vestibulum lacus sapien, iaculis id magna sed, vehicula sollicitudin enim. Aliquam tristique, nisl ut consectetur dictum, mauris turpis sagittis nisi, vel tincidunt nisi diam ut felis.
Button Samples
Call-to-Action Samples
Call-to-Action Title
Lorem ipsum In blandit quis erat sed hendrerit. Mauris blandit nec magna sed mattis. Curabitur feugiat vestibulum porta. Duis quis ex sollicitudin neque elementum tempus.
Call-to-Action Title
Lorem ipsum In blandit quis erat sed hendrerit. Mauris blandit nec magna sed mattis. Curabitur feugiat vestibulum porta. Duis quis ex sollicitudin neque elementum tempus.
Icon Card Samples