Styleguide
Typography
Font families
hind
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
montserrat
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Base text
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Vitae non maxime necessitatibus consequatur ratione error repellendus illo esse accusamus pariatur, totam dolor sapiente aliquid, rem officia ut veritatis, blanditiis corrupti quis harum quam. Commodi quod repudiandae, corporis quas minus deleniti deserunt alias earum, dolore odio cum dignissimos, doloribus iste repudiandae. Consequatur ducimus suscipit neque eligendi natus, atque dicta quasi labore est numquam ducimus ratione laboriosam minima, adipisci libero illo, est minus impedit ullam ipsam distinctio quidem iste exercitationem. Repudiandae quaerat suscipit, accusantium rerum libero dolore asperiores voluptates id nobis ipsum quasi voluptatum magnam.
- velit fugit delectus
- omnis pariatur nihil debitis ex
- dolore ad
- dolorem voluptatem veniam delectus aspernatur
- alias eveniet non accusamus dolorum omnis
Thickness
Hind
Extra Bold text.
Boldest text.
Bolder text.
Bold text.
Normal weight text.
Light weight text.
Lighter weight text.
Italic text.
Montserrat
Extra Bold text.
Boldest text.
Bolder text.
Bold text.
Normal weight text.
Light weight text.
Lighter weight text.
Italic text.
Sizes
<h1> pariatur consequatur
<h2> ab tempore
<h3> provident dolore
<h4> beatae aliquid
<h5> quam voluptatibus
<h6> inventore dicta
<p.h1> illum pariatur
<p.h2> corrupti illo
<p.h3> ad consectetur
<p.h4> cupiditate alias
<p.h5> mollitia quas
<p.h6> quo quidem
<p> alias enim
Palette
black
dark-grey
charcoal
slate-grey
battleship-grey
light-grey
silver
azure2
smoke
white
denim
firebrick6
grey32
grey59
grey87
purplish-grey
midnightblue
indianred3
neutral-gradient
middle-gradient
dark-gradient
white-mask-gradient
As text
.text-black: Bold, Title 4, Title 3
.text-dark-grey: Bold, Title 4, Title 3
.text-charcoal: Bold, Title 4, Title 3
.text-slate-grey: Bold, Title 4, Title 3
.text-battleship-grey: Bold, Title 4, Title 3
.text-light-grey: Bold, Title 4, Title 3
.text-silver: Bold, Title 4, Title 3
.text-azure2: Bold, Title 4, Title 3
.text-smoke: Bold, Title 4, Title 3
.text-white: Bold, Title 4, Title 3
.text-denim: Bold, Title 4, Title 3
.text-firebrick6: Bold, Title 4, Title 3
.text-grey32: Bold, Title 4, Title 3
.text-grey59: Bold, Title 4, Title 3
.text-grey87: Bold, Title 4, Title 3
.text-purplish-grey: Bold, Title 4, Title 3
.text-midnightblue: Bold, Title 4, Title 3
.text-indianred3: Bold, Title 4, Title 3
Color schemes
primary
recusandae reprehenderit
quia qui
voluptatum eveniet
at quod
numquam sapiente
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Inventore explicabo fugiat numquam repudiandae adipisci similique repellat perspiciatis, architecto magni reprehenderit, velit dolorem molestiae ipsum nam porro, sed maiores rem voluptates porro excepturi aspernatur alias doloremque asperiores, rem minima voluptate nisi numquam pariatur delectus eius vel itaque magnam. Magnam cupiditate similique architecto facilis voluptatum alias ipsam voluptatibus animi culpa, vero iure totam aperiam distinctio, totam nesciunt ullam impedit id, odio provident ratione error qui explicabo illum nemo, ea inventore neque libero ducimus quia eos a at quisquam.
secondary
atque ipsam
vitae aspernatur
id hic
sint recusandae
ad cum
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Incidunt nihil quidem nemo doloribus natus consequuntur inventore hic sunt dolorem maxime, consequuntur ipsam soluta fuga dignissimos nihil excepturi illo blanditiis ratione at, voluptatem consequatur praesentium repellendus dolores voluptas id, voluptates blanditiis enim, accusantium totam enim eum perspiciatis adipisci sequi dolores similique reiciendis blanditiis?
tertiary
maiores laboriosam
delectus sit
iure est
eligendi aspernatur
harum vel
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Voluptas molestias ad sit amet, minima aperiam cumque magni ad iusto sed maiores fugit architecto, odio voluptates reprehenderit ea doloremque nisi cumque, fuga tenetur illo expedita.
clear
commodi quidem
sunt iste
facilis repudiandae
odit officiis
sapiente expedita
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Culpa quisquam voluptas tempora? Est vel quia delectus aliquam error beatae, facilis pariatur aperiam accusantium quod alias asperiores, tempora maiores minima dolores corrupti harum sed similique ut, ut facilis maiores modi quae.
light
magni et
saepe eaque
tempore odit
repellendus quas
accusantium sint
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Sit totam sunt molestias, fugiat aspernatur quam totam aliquam placeat, eligendi totam omnis laborum veritatis, iure eaque doloremque possimus aut recusandae culpa neque architecto at sed incidunt, dolorem cumque fugit accusamus deleniti totam corrupti veritatis tempora nihil maxime? Dignissimos hic perspiciatis, accusamus impedit sint amet adipisci suscipit, in quisquam magnam eaque mollitia expedita odio quos repellendus quia porro explicabo?
lightest
nostrum rem
omnis soluta
quod laboriosam
deleniti vitae
inventore accusantium
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Consequatur impedit soluta atque quos architecto debitis placeat quo nobis saepe, pariatur enim possimus provident nam atque consectetur repudiandae mollitia hic aut, eos laudantium aliquam magni, in deserunt voluptatem laboriosam nihil exercitationem reiciendis ipsa, harum explicabo quibusdam. Saepe consectetur accusamus quaerat dolorem asperiores ex facere, vel delectus porro vitae harum libero corrupti expedita quod, nemo nam ducimus sapiente facilis alias laborum placeat, quae dolore quia, numquam dolorem tenetur a. Dolor ipsa dignissimos ipsam, unde accusantium quis, nostrum saepe corrupti nemo consequuntur obcaecati laborum rerum commodi?
neutral-gradient
culpa tenetur
nisi sunt
doloremque unde
ad cumque
consectetur vel
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Obcaecati vel cum, nobis itaque quisquam delectus repellendus repellat modi ex pariatur consequuntur officiis.
middle-gradient
minima harum
dolores fugit
corporis laudantium
ad nobis
corrupti suscipit
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Inventore corporis accusantium tenetur molestiae, adipisci ratione rem nulla, fugit quibusdam cupiditate accusamus quae, dignissimos eveniet eius culpa minima, fuga et dicta exercitationem vero. Quidem adipisci praesentium inventore deserunt, qui exercitationem eaque nam esse, qui earum impedit sunt dignissimos doloribus debitis, cum similique quis quasi corrupti vero molestias perferendis asperiores accusantium ut blanditiis? Laudantium voluptas itaque nostrum necessitatibus quam provident cumque quas? Rem doloribus nobis porro, minus consectetur voluptatem odit magni?
dark-gradient
explicabo dolorum
laboriosam ipsa
accusantium suscipit
nemo qui
vitae eveniet
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Sit et atque nisi facilis aliquam omnis voluptates? Est omnis molestias impedit, facere cum corporis beatae aperiam dolores excepturi velit error doloremque inventore, esse ipsum autem et illo voluptatum sequi incidunt voluptatem tenetur, ipsum mollitia odit ea distinctio iste magni ad sequi, iusto ullam iure officiis qui amet ut. Veniam deleniti illum dolor earum quae ea alias ratione enim autem, amet tempore ab tempora repudiandae repellat. Ea temporibus nihil nam vitae explicabo odit eum molestiae voluptate, unde quod exercitationem fuga minima aliquid, eveniet quia nam eius tempora delectus maiores ullam, autem reiciendis laboriosam debitis odit quae quidem voluptate placeat soluta quis non, aut earum suscipit et at quasi reprehenderit expedita placeat voluptatum perspiciatis?
white-mask-gradient
facilis maiores
in delectus
vel perferendis
a consequuntur
rerum repellendus
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Repellat dolorem ipsa ipsum sapiente eveniet eos minima. Natus ea optio porro quos amet dolore non obcaecati, possimus quos quibusdam perferendis libero doloribus consequatur facere at consectetur nihil alias. Deserunt eos nihil, vel necessitatibus praesentium asperiores ullam optio doloribus adipisci accusantium reprehenderit quis aspernatur, itaque fugiat similique recusandae, harum eligendi sint doloribus fuga illo?
transparent-darkest
vitae repudiandae
labore est
quae quibusdam
placeat tenetur
dolorum vero
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Laboriosam totam libero cupiditate tempore culpa, nostrum dicta ducimus beatae eum ut labore est, dolore incidunt eaque deserunt ipsam, doloribus incidunt inventore nemo esse placeat illo ipsam voluptatum nisi consequuntur nesciunt, aspernatur illum voluptas fugit in nisi.
clouds
labore similique
odio facere
nostrum dicta
debitis neque
molestiae animi
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Eius impedit voluptatibus vel obcaecati natus accusamus aliquid cum laboriosam, dicta velit laboriosam incidunt, quidem iusto quos, repellat beatae aliquam quos sapiente recusandae dolore sint facere sequi ducimus incidunt. Suscipit numquam ducimus animi odio veritatis illo quos eveniet? Dignissimos mollitia porro quos odit, ea ipsa aperiam enim perspiciatis iure praesentium laborum velit eum rem?
waves
voluptates nisi
sint possimus
assumenda praesentium
eos animi
explicabo provident
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Facilis praesentium odio vel?
purplish-grey
nisi temporibus
hic ut
fugiat saepe
quam id
quod obcaecati
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Ipsa neque nisi iusto dicta provident, possimus nam pariatur dolorem eos modi ex fuga eligendi dolor, beatae natus vel inventore veritatis voluptate odio? Dolor tenetur tempore hic dolores itaque id quod, quis in officia minus odio aut vero, odit expedita illo praesentium reiciendis quos? Sit dolorum nostrum, blanditiis ipsa aliquam animi optio.
battleship-grey
dignissimos non
iste facilis
quos quidem
quaerat nesciunt
a maiores
Suspendisse bold mauris, auctor strong pretium ac, italic eu mauris. Donec in emphased tortor. Duis small orci sit amet justo a link vestibulum. Vivamus commodo some code arcu elit.
Itaque obcaecati omnis amet ipsa dolore, sunt ea harum mollitia laudantium voluptatibus minus voluptatem, repellat adipisci ipsum repellendus sequi deleniti. Vero necessitatibus nam libero obcaecati ipsum sit perferendis, a deleniti est suscipit iste quos voluptatibus, totam nisi esse necessitatibus?
Controls
Buttons
Element support
Color scheme modifiers
Size modifiers
Form factors
Mixin combination samples
Social badges samples
Accordion
-
-
-
-
Item 1.A.a.1
-
Item 1.A.a.2
-
-
-
Item 1.A.b.1
-
Item 1.A.b.2
-
-
-
Item 1.A.c.1
-
Item 1.A.c.2
-
-
-
-
-
Item 1.B.a.1
-
Item 1.B.a.2
-
-
-
Item 1.B.b.1
-
Item 1.B.b.2
-
-
-
Item 1.B.c.1
-
Item 1.B.c.2
-
-
-
-
-
Item 1.C.a.1
-
Item 1.C.a.2
-
-
-
Item 1.C.b.1
-
Item 1.C.b.2
-
-
-
Item 1.C.c.1
-
Item 1.C.c.2
-
-
-
-
-
-
-
Item 2.A.a.1
-
Item 2.A.a.2
-
-
-
Item 2.A.b.1
-
Item 2.A.b.2
-
-
-
Item 2.A.c.1
-
Item 2.A.c.2
-
-
-
-
-
Item 2.B.a.1
-
Item 2.B.a.2
-
-
-
Item 2.B.b.1
-
Item 2.B.b.2
-
-
-
Item 2.B.c.1
-
Item 2.B.c.2
-
-
-
-
-
Item 2.C.a.1
-
Item 2.C.a.2
-
-
-
Item 2.C.b.1
-
Item 2.C.b.2
-
-
-
Item 2.C.c.1
-
Item 2.C.c.2
-
-
-
-
-
-
-
Item 3.A.a.1
-
Item 3.A.a.2
-
-
-
Item 3.A.b.1
-
Item 3.A.b.2
-
-
-
Item 3.A.c.1
-
Item 3.A.c.2
-
-
-
-
-
Item 3.B.a.1
-
Item 3.B.a.2
-
-
-
Item 3.B.b.1
-
Item 3.B.b.2
-
-
-
Item 3.B.c.1
-
Item 3.B.c.2
-
-
-
-
-
Item 3.C.a.1
-
Item 3.C.a.2
-
-
-
Item 3.C.b.1
-
Item 3.C.b.2
-
-
-
Item 3.C.c.1
-
Item 3.C.c.2
-
-
-