01 – Color Swatches

Astreya Orange 1
#ffe2d1

Astreya Orange 2
#ffb78b

Astreya Orange 3
#ff7d2e

Astreya Orange 4
#ff6000

Astreya Orange 5
#803000

Astreya Gray
#d9dadc

Astreya Gray 2
#a0a3a8

Astreya Gray 3
#535963

Astreya Gray 4
#2d3440

Astreya Gray 5
#1f242d

Astreya Green 1
#dbdfadf

Astreya Green 2
#a8ecb3

Astreya Green 3
#06a944

Astreya Green 4
#004101

Astreya Green 5
#002d01

Astreya Teal 1
#d2eeea

Astreya Teal 2
#8cdbe5

Astreya Teal 3
#2a7380

Astreya Teal 4
#0a3f47

Astreya Teal 5
#072c32

Astreya
Magenta 1
#fddef2

Astreya
Magenta 2
#f3b6e6

Astreya
Magenta 3
#d912ae

Astreya
Magenta 4
#65004d

Astreya
Magenta 5
#470036

Astreya
Red 1
#f3dbe0

Astreya
Red 2
#f6acb6

Astreya
Red 3
#d7153a

Astreya
Red 4
#5d0117

Astreya
Red 5
#410110

Astreya
Blue 1
#c3ebfd

Astreya
Blue 2
#4ac6f3

Astreya
Blue 3
#156bfd

Astreya
Blue 4
#012564

Astreya
Blue 5
#011a46

Astreya
Purple 1
#e6e0fd

Astreya
Purple 2
#cdc0ff

Astreya
Purple 3
#8055f3

Astreya
Purple 4
#420f70

Astreya
Purple 5
#2e0a4e

Astreya
Yellow 1
#fef4cf

Astreya
Yellow 2
#fde79b

Astreya
Yellow 3
#faaf02

Astreya
Yellow 4
#684800

Astreya
Yellow 5
#493200

Astreya
Brown 1
#ede3d7

Astreya
Brown 2
#e8d0b5

Astreya
Brown 3
#836643

Astreya
Brown 4
#523719

Astreya
Brown 5
#392611

Astreya
Gradient 1
45

Astreya
Gradient 1-1
#012564

Astreya
Gradient 1-2
#d7153a

Astreya
Gradient 1-3
#ff6000

Astreya
Gradient 1-4
#d7153a

Astreya
Gradient 2
45

Astreya
Gradient 2-1
#d7153a

Astreya
Gradient 2-2
#ff6000

Astreya
Gradient 2-3
#d7153a


02 – Headings & Paragraphs

Display


Lorem ipsum

font-size: 56 px / 3.5 rem;
line-height: 56 px / 1 rem;
letter-spacing: -1 px;

font-family: Texta Pro (Heavy)
font-weight: 900
font-color: #2d3440

H1
Lorem ipsum

font-size: 48 px / 3 rem;
line-height: 48 px / 1 rem;
letter-spacing: -1 px;

font-family: Texta Pro (Black)
font-weight: 800
font-color: #2d3440

H2
Lorem ipsum dolor sit

font-size: 40 px / 2.5 rem;
line-height: 44 px / 1.1 rem;
letter-spacing: -1 px;

font-family: Texta Pro (Black)
font-weight: 800
font-color: #2d3440

H3
Lorem ipsum dolor sit

font-size: 36 px / 2.25 rem;
line-height: 40 px / 1.1 rem;
letter-spacing: -1 px;

font-family: Texta Pro (Bold)
font-weight: 700
font-color: #2d3440

H4
Lorem ipsum dolor sit amet

font-size: 32 px / 2 rem;
line-height: 40 px / 1.125 rem;
letter-spacing: -1 px;

font-family: Texta Pro (Bold)
font-weight: 700
font-color: #2d3440

H5
Lorem ipsum dolor sit amet eiusmod

font-size: 24 px / 1.5 rem;
line-height: 30 px / 1.25 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Bold)
font-weight: 700
font-color: # 2d3440

Subhead / XLarge Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit
sed do eiusmod tempor incididunt ut labore et dolore

font-size: 21 px / 1.333 rem;
line-height: 24 px / 1.1 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Regular)
font-weight: 700
font-color: #2d3440

Large Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pellentesque diam volutpat commmodo sed egestas egestas.

font-size: 18 px / 1.125 rem;
line-height: 27 px / 1.5 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Regular)
font-weight: 500
font-color: #2d3440

Paragraph
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam
volutpat commmodo sed egestas egestas fringilla. Enim neque volutpat.

font-size: 16 px / 1 rem;
line-height: 24 px / 1.5 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Regular)
font-weight: 500
font-color: #2d3440

Caption
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commmodo
sed egestas egestas fringilla. Enim neque volutpat.

font-size: 16 px / 1 rem;
line-height: 18 px / 1.125 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Bold)
font-weight: 500
font-color: # 2d3440

Label
Title Case

font-size: 21 px / 1.333 rem;
line-height: 27 px / 1.333 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Bold)
font-weight: 700
font-color: #2d3440

Metadata
Month Date, Year (November 6, 2020)
Author Full Name (John Smith)

font-size: 16 px / 1 rem;
line-height: 18 px / 1.125 rem;
letter-spacing: 0.5 px;

text-transform: capitalize;

font-family: Texta Pro (Regular)
font-weight: 500
font-color: # 2d3440

Nav / Footer

font-size: 16 px / 1 rem;
line-height: 18 px / 1.125 rem;
letter-spacing: 0 px;

font-family: Texta Pro (Black)
font-weight: 800
font-color: #2d3440

Pagination
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
(Current page #f18a00)

font-size: 21 px / 1.333 rem;
line-height: 27 px / 1.333 rem;
letter-spacing: 20 px;

font-family: Texta Pro (Regular)
font-weight: 500
font-color: #2d3440


03 – List Styles

Bullet 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

  1. Felis eget velit aliquet sagittis id consectetur purus.
  2. Egestas sed sed risus pretium quam vulputate dignissim.
  3. Convallis posuere morbi leo urna molestie at elementum.
    • Vitae congue eu consequat ac felis donec.
    • Elementum tempus egestas sed sed risus.
  4. Quis enim lobortis scelerisque fermentum dui faucibus in. Scelerisque felis imperdiet proin fermentum. Lorem donecmassa sapien faucibus et.
  5. 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.


04 – Button Styles

Default Button Style

Compact Button Style

Secondary Button Style


05 – Tabs

Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas nibh mauris, in mattis turpis fermentum non. Fusce ullamcorper venenatis pellentesque. Vivamus tincidunt dui sit amet neque vulputate, nec vestibulum nibh commodo. Etiam id elit lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur tincidunt neque, vitae tempor magna vehicula sed. In hendrerit, nisi id viverra pretium, ipsum quam tincidunt eros, et porttitor ipsum magna at turpis. Nam fringilla nec magna eget porttitor. Vivamus eu ullamcorper elit. Cras sagittis tincidunt pharetra. Proin facilisis, risus in vulputate egestas, enim orci aliquam est, sit amet sagittis purus tortor et mauris. Morbi porta tempus mauris, a ultricies leo feugiat et. Nunc hendrerit tellus magna, quis faucibus augue facilisis non.

Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas nibh mauris, in mattis turpis fermentum non. Fusce ullamcorper venenatis pellentesque. Vivamus tincidunt dui sit amet neque vulputate, nec vestibulum nibh commodo. Etiam id elit lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur tincidunt neque, vitae tempor magna vehicula sed. In hendrerit, nisi id viverra pretium, ipsum quam tincidunt eros, et porttitor ipsum magna at turpis. Nam fringilla nec magna eget porttitor. Vivamus eu ullamcorper elit. Cras sagittis tincidunt pharetra. Proin facilisis, risus in vulputate egestas, enim orci aliquam est, sit amet sagittis purus tortor et mauris. Morbi porta tempus mauris, a ultricies leo feugiat et. Nunc hendrerit tellus magna, quis faucibus augue facilisis non.

Unique Value

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas nibh mauris, in mattis turpis fermentum non. Fusce ullamcorper venenatis pellentesque. Vivamus tincidunt dui sit amet neque vulputate, nec vestibulum nibh commodo. Etiam id elit lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur tincidunt neque, vitae tempor magna vehicula sed. In hendrerit, nisi id viverra pretium, ipsum quam tincidunt eros, et porttitor ipsum magna at turpis. Nam fringilla nec magna eget porttitor. Vivamus eu ullamcorper elit. Cras sagittis tincidunt pharetra. Proin facilisis, risus in vulputate egestas, enim orci aliquam est, sit amet sagittis purus tortor et mauris. Morbi porta tempus mauris, a ultricies leo feugiat et. Nunc hendrerit tellus magna, quis faucibus augue facilisis non.


04 – Line Icon Style

  • icon-add0xe800
  • icon-align-left0xe801
  • icon-align-center0xe802
  • icon-apps-alt0xe803
  • icon-apps0xe804
  • icon-arrow-down-circle0xe805
  • icon-align-right0xe806
  • icon-arrow-down0xe807
  • icon-arrow-left-bottom0xe808
  • icon-arrow-left-circle0xe809
  • icon-arrow-left-top0xe80a
  • icon-arrow-right-bottom0xe80b
  • icon-arrow-left0xe80c
  • icon-arrow-right-circle0xe80d
  • icon-arrow-right-top0xe80e
  • icon-arrow-up-circle0xe80f
  • icon-arrow-right0xe810
  • icon-arrow-up0xe811
  • icon-back-left0xe812
  • icon-back-alt0xe813
  • icon-back-right0xe814
  • icon-checkbox-intermediate0xe815
  • icon-cancel0xe816
  • icon-checkbox0xe817
  • icon-chevron-down0xe818
  • icon-chevron-left0xe819
  • icon-chevron-right0xe81a
  • icon-chevron-up0xe81b
  • icon-circle0xe81c
  • icon-direction-left0xe81d
  • icon-direction-right0xe81e
  • icon-download0xe81f
  • icon-ellypsis-vertical0xe820
  • icon-ellypsis0xe821
  • icon-hamburger0xe822
  • icon-happy-face0xe823
  • icon-next-alt0xe824
  • icon-ok-circle0xe825
  • icon-ok0xe826
  • icon-play0xe827
  • icon-plus0xe828
  • icon-previous-alt0xe829
  • icon-radio-button-selected0xe82a
  • icon-radio-button0xe82b
  • icon-redo0xe82c
  • icon-rectangle0xe82d
  • icon-refresh0xe82e
  • icon-remove0xe82f
  • icon-stats0xe830
  • icon-return0xe831
  • icon-turn-left0xe832
  • icon-video0xe833
  • icon-turn-right0xe834
  • icon-undo0xe835
  • icon-chevrons-down0xe836
  • icon-chevrons-up0xe837
  • icon-chevrons-left0xe838
  • icon-chevrons-right0xe839
  • icon-search0xe83a
  • icon-twitter0xf309
  • icon-facebook0xf30c
  • icon-linkedin0xf318

Far and away the best prize that life offers is the chance to work hard at work worth doing.”

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices neque ornare aenean. Enim nulla aliquet porttitor lacus luctus. Ac ut consequat semper viverra nam libero justo laoreet.