01 – Color Swatches
Blue
#009DDA
Blue Lite
#00B8FF
Blue Dark
#005C80
Dark Blue
#002856
Dark Blue Lite
#004799
Dark Blue Dark
#001226
Dark Green
#789C4A
Dark Green Lite
#9FC74F
Dark Green Dark
#39471C
Green
#8DC63F
Green Lite
#B6FF51
Green Dark
#5B8029
Grass
#00BB9A
Grass Lite
#00E6BD
Grass Dark
#008069
XLN Dark
#67675D
XLN Dark #2
#33332E
XLN Dark #3
#99998B
Yellow
#DEC506
Yellow Lite
#FFE207
Yellow Dark
#807103
Red
#A30827
Red Lite
#CC0B30
Red Dark
#4D0412
Rust Red
#c55036
Rust Red Lite
#E65D3F
Rust Red Dark
#803423
Slate
#4B6B6B
Slate Lite
#8FCCCC
Slate Dark
#243333
Brown
#3D2A18
Brown Lite
#A67241
Brown Dark
#1A120A
Black
#000000
XLN Black
#2b2b2b
Very Dark Gray
#2b2d42
White Gradient
Lite Blue
Gradient
Grass
Green
Gradient
Grass Green
Dark Gradient
Green
Gradient
Green
Dark Gradient
Yellow
Gradient
Yellow Dark Gradient
Red
Gradient
Red
Dark Gradient
Blue
Gradient
Blue
Dark Gradient
Gray
Gradient
Gray Dark Gradient
02 – Headings & Paragraphs
H1 – Default
Lorem Ipsum
H1 – Lite
Lorem Ipsum
H1 – Medium
Lorem Ipsum
H1 – Demi
Lorem Ipsum
H1 – Bold
Lorem Ipsum
H1 – Heavy
Lorem Ipsum
H1 – Display
Lorem Ipsum
H1 – Condensed
Lorem Ipsum
H2 – Default
Lorem Ipsum
H2 – Lite
Lorem Ipsum
H2 – Medium
Lorem Ipsum
H2 – Demi
Lorem Ipsum
H2 – Bold
Lorem Ipsum
H2 – Heavy
Lorem Ipsum
H2 – Display
Lorem Ipsum
H2 – Condensed
Lorem Ipsum
H3 – Default
Lorem Ipsum
H3 – Lite
Lorem Ipsum
H3 – Medium
Lorem Ipsum
H3 – Demi
Lorem Ipsum
H3 – Bold
Lorem Ipsum
H3 – Heavy
Lorem Ipsum
H3 – Display
Lorem Ipsum
H3 – Condensed
Lorem Ipsum
H4 – Default
Lorem Ipsum
H4 – Lite
Lorem Ipsum
H4 – Medium
Lorem Ipsum
H4 – Demi
Lorem Ipsum
H4 – Bold
Lorem Ipsum
H4 – Heavy
Lorem Ipsum
H4 – Display
Lorem Ipsum
H4 – Condensed
Lorem Ipsum
H5 – Default
Lorem Ipsum
H5 – Lite
Lorem Ipsum
H5 – Medium
Lorem Ipsum
H5 – Demi
Lorem Ipsum
H5 – Bold
Lorem Ipsum
H5 – Heavy
Lorem Ipsum
H5 – Display
Lorem Ipsum
H5 – Condensed
Lorem Ipsum
H6 – Default
Lorem Ipsum
H6 – Lite
Lorem Ipsum
H6 – Medium
Lorem Ipsum
H6 – Demi
Lorem Ipsum
H6 – Bold
Lorem Ipsum
H6 – Heavy
Lorem Ipsum
H6 – Display
Lorem Ipsum
H6 – Condensed
Lorem Ipsum
Default Paragraph Text — XL North is a specialty chemical division of Textile Rubber and Chemical Company. XL North’s primary focus is to provide state of the art chemical technology to the flooring maintenance and concrete surface prep industries. From carpet to hard surfaces, XL North develops and markets innovative, proven, effective and environmentally responsible floor cleaning, maintenance, and surface prep products.
Small Paragraph Text — XL North is a specialty chemical division of Textile Rubber and Chemical Company. XL North’s primary focus is to provide state of the art chemical technology to the flooring maintenance and concrete surface prep industries. From carpet to hard surfaces, XL North develops and markets innovative, proven, effective and environmentally responsible floor cleaning, maintenance, and surface prep products.
Large Paragraph Text — XL North is a specialty chemical division of Textile Rubber and Chemical Company. XL North’s primary focus is to provide state of the art chemical technology to the flooring maintenance and concrete surface prep industries. From carpet to hard surfaces, XL North develops and markets innovative, proven, effective and environmentally responsible floor cleaning, maintenance, and surface prep products.
Extra Large Paragraph Text — XL North is a specialty chemical division of Textile Rubber and Chemical Company. XL North’s primary focus is to provide state of the art chemical technology to the flooring maintenance and concrete surface prep industries. From carpet to hard surfaces, XL North develops and markets innovative, proven, effective and environmentally responsible floor cleaning, maintenance, and surface prep products.
03 – List Styles
Default List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna acplacerat vestibulum lectus mauris ultrices eros in. Portalorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitaeturpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Numbered List Style
- Felis eget velit aliquet sagittis id consectetur purus.
- Egestas sed sed risus pretium quam vulputate dignissim.
- Convallis posuere morbi leo urna molestie at elementum.
- Vitae congue eu consequat ac felis donec.
- Elementum tempus egestas sed sed risus.
- Quis enim lobortis scelerisque fermentum dui faucibus in. Scelerisque felis imperdiet proin fermentum. Lorem donecmassa sapien faucibus et.
- Sed viverra tellus in hac habitasse platea dictumst.
Check List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Circle List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Square List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
Arrow List Style
- Nibh cras pulvinar mattis nunc sed blandit libero.
- Porttitor rhoncus dolor purus non enim praesent.
- Hac habitasse platea dictumst quisque sagittis purus.
- Luctus accumsan tortor posuere ac ut.
- Molestie nunc non blandit massa enim nec dui. Magna ac placerat vestibulum lectus mauris ultrices eros in. Porta lorem mollis aliquam ut porttitor leo a diam.
- Mauris in aliquam sem fringilla ut morbi tincidunt. Vitae turpis massa sed elementum tempus egestas sed.
- Gravida arcu ac tortor dignissim convallis aenean et tortor.
04 – Button Styles
Default Button Style
Compact Button Style
Secondary Button Style
Primary Button Style
Tabbed Content #1
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #2
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #3
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
Tabbed Content #4
Tabbed content paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut arcu eros. Nam arcu nisl, ultricies ac mauris vel, bibendum iaculis metus. In hac habitasse platea dictumst.
- Tabbed content list item one
- Tabbed content list item two
- Tabbed content list item three
- Tabbed content list item four
04 – Line Icon Style