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
- 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.
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