Style guide
Buttons
Default
Primary
Secondary
Default
Primary
Secondary
Colors
Loyal Blue
100
RGB
rgb(248, 249, 252)
HSL
hsl(225, 40%, 98%)
HEX
#F8F9FC
150
RGB
rgb(238, 241, 246)
HSL
hsl(218, 31%, 95%)
HEX
#EEF1F6
200
RGB
rgb(232, 236, 242)
HSL
hsl(216, 28%, 93%)
HEX
#E8ECF2
250
RGB
rgb(215, 219, 229)
HSL
hsl(223, 21%, 87%)
HEX
#D7DBE5
300
RGB
rgb(198, 204, 215)
HSL
hsl(219, 18%, 81%)
HEX
#C6CCD7
350
RGB
rgb(181, 188, 201)
HSL
hsl(219, 16%, 75%)
HEX
#B5BCC9
400
RGB
rgb(160, 170, 186)
HSL
hsl(217, 16%, 68%)
HEX
#A0AABA
450
RGB
rgb(138, 149, 168)
HSL
hsl(218, 15%, 60%)
HEX
#8A95A8
500
RGB
rgb(108, 122, 147)
HSL
hsl(218, 15%, 50%)
HEX
#6C7A93
550
RGB
rgb(94, 109, 135)
HSL
hsl(218, 18%, 45%)
HEX
#5E6D87
600
RGB
rgb(79, 94, 120)
HSL
hsl(218, 21%, 39%)
HEX
#4F5E78
650
RGB
rgb(62, 78, 106)
HSL
hsl(218, 26%, 33%)
HEX
#3E4E6A
700
RGB
rgb(42, 60, 90)
HSL
hsl(218, 36%, 26%)
HEX
#2A3C5A
750
RGB
rgb(25, 44, 77)
HSL
hsl(218, 51%, 20%)
HEX
#192C4D
800
RGB
rgb(16, 34, 66)
HSL
hsl(218, 61%, 16%)
HEX
#102242
850
RGB
rgb(12, 26, 49)
HSL
hsl(217, 61%, 12%)
HEX
#0C1A31
900
RGB
rgb(7, 17, 33)
HSL
hsl(217, 65%, 8%)
HEX
#071121
Loyal Blue Alt
100
RGB
rgb(247, 249, 253)
HSL
hsl(220, 60%, 98%)
HEX
#F7F9FD
150
RGB
rgb(238, 242, 251)
HSL
hsl(222, 62%, 96%)
HEX
#EEF2FB
200
RGB
rgb(221, 231, 248)
HSL
hsl(218, 66%, 92%)
HEX
#DDE7F8
250
RGB
rgb(205, 219, 244)
HSL
hsl(218, 64%, 88%)
HEX
#CDDBF4
300
RGB
rgb(179, 201, 239)
HSL
hsl(218, 65%, 82%)
HEX
#B3C9EF
350
RGB
rgb(142, 174, 230)
HSL
hsl(218, 64%, 73%)
HEX
#8EAEE6
400
RGB
rgb(118, 157, 224)
HSL
hsl(218, 63%, 67%)
HEX
#769DE0
450
RGB
rgb(88, 136, 218)
HSL
hsl(218, 64%, 60%)
HEX
#5888DA
500
RGB
rgb(54, 112, 211)
HSL
hsl(218, 64%, 52%)
HEX
#3670D3
550
RGB
rgb(39, 89, 176)
HSL
hsl(218, 64%, 42%)
HEX
#2759B0
600
RGB
rgb(35, 80, 159)
HSL
hsl(218, 64%, 38%)
HEX
#23509F
650
RGB
rgb(29, 68, 134)
HSL
hsl(218, 64%, 32%)
HEX
#1D4486
700
RGB
rgb(26, 59, 116)
HSL
hsl(218, 63%, 28%)
HEX
#1A3B74
750
RGB
rgb(22, 51, 100)
HSL
hsl(218, 64%, 24%)
HEX
#163364
800
RGB
rgb(18, 40, 79)
HSL
hsl(218, 63%, 19%)
HEX
#12284F
850
RGB
rgb(13, 30, 59)
HSL
hsl(218, 64%, 14%)
HEX
#0D1E3B
900
RGB
rgb(7, 17, 33)
HSL
hsl(217, 65%, 8%)
HEX
#071121
Future Green
100
RGB
rgb(249, 254, 246)
HSL
hsl(98, 80%, 98%)
HEX
#F9FEF6
150
RGB
rgb(237, 252, 227)
HSL
hsl(96, 81%, 94%)
HEX
#EDFCE3
200
RGB
rgb(226, 249, 210)
HSL
hsl(95, 76%, 90%)
HEX
#E2F9D2
250
RGB
rgb(211, 246, 188)
HSL
hsl(96, 76%, 85%)
HEX
#D3F6BC
300
RGB
rgb(193, 242, 161)
HSL
hsl(96, 76%, 79%)
HEX
#C1F2A1
350
RGB
rgb(173, 238, 129)
HSL
hsl(96, 76%, 72%)
HEX
#ADEE81
400
RGB
rgb(152, 234, 98)
HSL
hsl(96, 76%, 65%)
HEX
#98EA62
450
RGB
rgb(128, 230, 61)
HSL
hsl(96, 77%, 57%)
HEX
#80E63D
500
RGB
rgb(103, 220, 24)
HSL
hsl(96, 80%, 48%)
HEX
#67DC18
550
RGB
rgb(94, 202, 22)
HSL
hsl(96, 80%, 44%)
HEX
#5ECA16
600
RGB
rgb(85, 186, 18)
HSL
hsl(96, 82%, 40%)
HEX
#55BA12
650
RGB
rgb(75, 161, 18)
HSL
hsl(96, 80%, 35%)
HEX
#4BA112
700
RGB
rgb(61, 124, 19)
HSL
hsl(96, 73%, 28%)
HEX
#3D7C13
750
RGB
rgb(44, 87, 15)
HSL
hsl(96, 71%, 20%)
HEX
#2C570F
800
RGB
rgb(33, 66, 11)
HSL
hsl(96, 71%, 15%)
HEX
#21420B
850
RGB
rgb(25, 48, 8)
HSL
hsl(95, 71%, 11%)
HEX
#193008
900
RGB
rgb(13, 29, 2)
HSL
hsl(96, 87%, 6%)
HEX
#0D1D02
Future Green
100
RGB
rgb(252, 254, 245)
HSL
hsl(73, 82%, 98%)
HEX
#FCFEF5
150
RGB
rgb(245, 253, 226)
HSL
hsl(78, 87%, 94%)
HEX
#F5FDE2
200
RGB
rgb(238, 252, 207)
HSL
hsl(79, 88%, 90%)
HEX
#EEFCCF
250
RGB
rgb(231, 252, 182)
HSL
hsl(78, 92%, 85%)
HEX
#E7FCB6
300
RGB
rgb(221, 250, 153)
HSL
hsl(78, 91%, 79%)
HEX
#DDFA99
350
RGB
rgb(209, 246, 121)
HSL
hsl(78, 87%, 72%)
HEX
#D1F679
400
RGB
rgb(197, 244, 87)
HSL
hsl(78, 88%, 65%)
HEX
#C5F457
450
RGB
rgb(182, 242, 44)
HSL
hsl(78, 88%, 56%)
HEX
#B6F22C
500
RGB
rgb(166, 233, 12)
HSL
hsl(78, 90%, 48%)
HEX
#A6E90C
550
RGB
rgb(154, 210, 15)
HSL
hsl(77, 87%, 44%)
HEX
#9AD20F
600
RGB
rgb(142, 195, 9)
HSL
hsl(77, 91%, 40%)
HEX
#8EC309
650
RGB
rgb(125, 171, 7)
HSL
hsl(77, 92%, 35%)
HEX
#7DAB07
700
RGB
rgb(100, 137, 6)
HSL
hsl(77, 92%, 28%)
HEX
#648906
750
RGB
rgb(72, 96, 6)
HSL
hsl(76, 88%, 20%)
HEX
#486006
800
RGB
rgb(58, 78, 4)
HSL
hsl(76, 90%, 16%)
HEX
#3A4E04
850
RGB
rgb(43, 58, 3)
HSL
hsl(76, 90%, 12%)
HEX
#2B3A03
900
RGB
rgb(29, 39, 2)
HSL
hsl(76, 90%, 8%)
HEX
#1D2702
Typography
Aa
DM Sans
Regular
400
Medium
500
Semibold
600
The quick brown fox jumps over the lazy dog.
Heading 1
The quick brown fox jumps over the lazy dog.
Heading 2
The quick brown fox jumps over the lazy dog.
Heading 3
The quick brown fox jumps over the lazy dog.
Heading 4
The quick brown fox jumps over the lazy dog.
Heading 5
The quick brown fox jumps over the lazy dog.
Heading 6
The quick brown fox jumps over the lazy dog.
Body