Style Guide
Primary Colors
#0F1D34
dark-1
#0D4DBB
accent-1
#00A0DD
accent-2
#007C8E
accent-3
#B5E0E6
accent-4
#9A2890
accent-5
#ffffff
light-1
#F4F4F6
light-2
Tints & Shades
#E7E8EB
dark-1-50
#B5B9C0
dark-1-100
#9197A2
dark-1-200
#5E6877
dark-1-300
#3F4A5D
dark-1-400
#0F1D34
dark-1-500 (dark-1)
#E7EDF8
accent-1-50
#B4C8EA
accent-1-100
#5C87D1
accent-1-300
#0D4DBB
accent-1-500 (accent-1)
#072A67
accent-1-800
#E6F6FC
accent-2-50
#B0E2F4
accent-2-100
#8AD3EF
accent-2-200
#54BFE8
accent-2-300
#00A0DD
accent-2-500 (accent-2)
#00729D
accent-2-700
#00435D
accent-2-900
#E8F5F7
accent-3-50
#CDEAEE
accent-3-100
#B5E0E6
accent-3-200 (accent-4)
#8AC3CB
accent-3-300
#54A7B3
accent-3-500
#007C8E
accent-3-700 (accent-3)
#005865
accent-3-900
#F5EAF4
accent-5-50
#E0BCDD
accent-5-100
#D19CCC
accent-5-200
#BB6FB5
accent-5-300
#9A2890
accent-5-500 (accent-5)
#6D1C66
accent-5-700
#41113C
accent-5-900
H1
600 – Semibold
IBM Plex Sans Condensed
48/42px
LH – 1.12
BM – 24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
H2
600 – Semibold
IBM Plex Sans Condensed
40/36px
LH – 1.2
BM – 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
H3
Semibold – 600
IBM Plex Sans Condensed
34/30px
LH – 1.2
BM – 17px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
H4
600 – Semibold
IBM Plex Sans Condensed
28/24px
LH – 1.2
BM – 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
H5
600 – Semibold
IBM Plex Sans Condensed
24/20px
LH – 1.2
BM – 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
H6
600 – Semibold
IBM Plex Sans Condensed
20px
LH – 1.2
BM – 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua.
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Tags
Body
400 – Normal
IBM Plex Sans
18px
LH – 1.4
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Pretium lorem primis senectus eros habitasse lectus scelerisque donec ultricies tortor suspendisse adipiscing leo fusce morbi volutpat pellentesque consectetur odio risus molestie curae malesuada dignissim lacus convallis eros massa mauris.
Body-XS
12px
LH – 1.3
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Mono-SM
14px
LH – 1.4
LS – 1.2px
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Body-SM
14px
LH – 1.3
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Mono
16px
LH – 1.4
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Body-MD
20/18px
LH – 1.4
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Body-LG
24/22px
LH – 1.4
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Body-XL
26/24px
LH – 1.4
BM – 16px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
Lists
400 – Normal
IBM Plex Sans
18px
Curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst penatibus mauris eros etiam praesent volutpat posuere metus fringilla ullamcorper odio sociis aliquam lacinia conubia mauris tempor etiam ultricies proin quisque.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, ncididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
Pretium lorem primis senectus eros habitasse lectus scelerisque donec ultricies tortor suspendisse adipiscing leo fusce morbi volutpat pellentesque consectetur odio risus molestie curae malesuada dignissim lacus convallis eros massa mauris.
- Lorem ipsum dolor do eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
Quote
600 – Semibold/Italic
IBM Plex Sans
24/22px
LH – 1.4
BM – 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut dolore magna aliqua. Ut enim ad minim veniam.
Bill Gates
Gravity Forms
Buttons
400 – Normal
IBM Plex Sans
Buttons
400 – Normal
IBM Plex Sans