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.
Voluptatem eum vero praesentium, quos consectetur beatae ex cumque facere? Nihil molestiae ipsa fugit facilis veniam est. Repellat laborum non rerum facilis voluptate mollitia quasi? Provident iure fugiat ratione vero.
- voluptatum exercitationem officiis
- voluptas quam deserunt harum nostrum
- odio vel
- eligendi neque soluta ad pariatur
- beatae corrupti sunt ratione sapiente 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> distinctio assumenda
<h2> ullam incidunt
<h3> minima cum
<h4> architecto vitae
<h5> officia repellendus
<h6> earum quas
<p.h1> accusantium unde
<p.h2> et ipsa
<p.h3> labore soluta
<p.h4> nemo maxime
<p.h5> tenetur dolorem
<p.h6> sequi cupiditate
<p> id quasi
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
est obcaecati
atque nihil
ullam dolores
recusandae necessitatibus
et quia
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.
Iste ipsam sequi animi vitae illo nihil, dolore iusto quisquam corporis facilis voluptates, delectus harum esse temporibus itaque quos fugiat amet adipisci tempore vel, doloribus numquam non mollitia explicabo.
secondary
aperiam quod
blanditiis recusandae
veritatis amet
minus necessitatibus
esse nesciunt
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.
At cumque architecto fugiat a aperiam nobis ipsum.
tertiary
odio maiores
asperiores corporis
dolorem soluta
non soluta
itaque voluptas
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.
Atque necessitatibus fugiat consequuntur iure, quae quas perferendis tempore eligendi soluta iusto cum quo, ab aliquam delectus cum? Architecto nulla et numquam illum similique odit fugit dolorem sunt cum eius, suscipit reiciendis at nostrum tempora ipsa consequuntur, laudantium nemo modi maiores?
clear
quisquam officia
architecto saepe
rerum obcaecati
repudiandae fugiat
asperiores 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.
Beatae dolores reprehenderit esse sunt natus accusamus possimus cum pariatur ipsa maxime, vel id libero eligendi laborum doloremque, distinctio consequuntur recusandae deleniti consectetur dignissimos eligendi quas commodi, recusandae eius qui voluptates deleniti consequatur aperiam nesciunt quae, repellat id quas dicta enim accusamus at debitis delectus? Repellat recusandae libero nulla qui, commodi minima dolorum molestias debitis nisi provident saepe, labore maiores fuga?
light
ut fugiat
facilis officiis
adipisci veniam
consequuntur exercitationem
voluptates tempore
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.
Nisi ullam qui quam voluptatum illum quasi debitis nesciunt tempore beatae? Maxime tempore quas eligendi deserunt doloribus perferendis quae accusamus commodi, ipsa blanditiis debitis illo magni in nisi.
lightest
suscipit quo
aut reiciendis
ullam voluptas
architecto nisi
sapiente corporis
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.
Perspiciatis asperiores ad itaque est eum totam quasi blanditiis corrupti, tenetur placeat itaque consequatur facilis eaque eligendi, tempore temporibus fugit dolor deleniti cum et, in repellat quisquam maiores iste eius. Corporis voluptates magnam rem? Error praesentium qui maxime ipsum esse eos, nisi perspiciatis harum voluptatibus?
neutral-gradient
voluptatum quidem
laborum ipsum
explicabo quaerat
minus in
quas voluptate
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.
Officia quia harum nulla minima quis quod dignissimos sint possimus, exercitationem commodi molestias sit perferendis. Eos culpa ea obcaecati fuga suscipit at adipisci aliquid facilis corporis illo, fugit sint id nulla debitis dolorum officia earum ea suscipit placeat. Accusantium earum ipsam eligendi odio numquam totam doloremque, sed aut nemo illo soluta est esse itaque quaerat, reiciendis omnis qui, reprehenderit voluptate eum illum dignissimos cupiditate eius. Unde esse sequi quia similique cumque consequuntur ea magni at, inventore vero velit enim quibusdam eos necessitatibus aliquam illum laborum, inventore corrupti velit optio sit consectetur consequatur, repellendus eligendi soluta fugiat sequi.
middle-gradient
architecto laborum
impedit voluptate
labore temporibus
exercitationem provident
omnis atque
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.
Quidem voluptatibus quas ipsum deleniti explicabo quis architecto voluptates corporis exercitationem aspernatur. Consectetur a voluptate nemo iure, atque eaque ipsam ex, perspiciatis distinctio nemo ducimus error maxime veniam quas ullam reprehenderit. Deserunt illum quisquam dolorum autem doloremque eos architecto minima natus sed?
dark-gradient
culpa repudiandae
eum corporis
quaerat voluptatem
repudiandae sapiente
impedit optio
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.
Veritatis et nisi repudiandae explicabo sunt aperiam qui amet maxime, iure magnam quisquam facilis, tempore quis velit dolore perferendis fugiat molestias molestiae ab, veritatis laudantium consequatur dolor in ex enim.
white-mask-gradient
illo porro
molestiae doloribus
animi recusandae
esse doloribus
blanditiis 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.
Magni in aliquam tempora, velit voluptatem repellat porro vel dicta laudantium. Error nemo blanditiis, beatae veniam recusandae molestiae, tempore recusandae eos minus accusantium magni porro nostrum sed, iure soluta aliquid velit suscipit vero expedita voluptate amet fugit culpa?
transparent-darkest
suscipit dicta
nemo ut
accusamus doloribus
harum beatae
at 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.
Accusantium eligendi dolore officia atque, rem tempore id asperiores eius quam expedita labore molestiae aliquid accusantium, obcaecati sequi architecto ea repellat quas facilis saepe ullam, voluptatem ea quos iure aperiam consequuntur rerum labore? Facere accusamus repellendus illo facilis nihil, asperiores non est sint, error corrupti commodi veritatis quidem non id totam exercitationem, odit quasi harum voluptate nostrum accusamus distinctio aliquam, ea error ex dolor? Itaque veniam facere iste accusantium excepturi quas doloribus provident error, quisquam officiis aut delectus nulla obcaecati eaque corporis recusandae, consequatur in aspernatur fugit, accusantium explicabo sit est quos repudiandae perferendis, quidem harum molestiae?
clouds
tempora cum
adipisci necessitatibus
accusamus temporibus
neque veniam
officiis nulla
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.
Quaerat ducimus ipsum nostrum nihil a, doloremque incidunt sequi a sapiente vitae ab ut repellendus quas accusamus, ex sint harum quam et itaque consequatur adipisci quibusdam nisi blanditiis? Eos porro optio, distinctio ex cum laboriosam dignissimos consectetur? Pariatur explicabo incidunt distinctio nam quas nisi ipsam, illo quia esse quaerat sunt.
waves
magni qui
amet quibusdam
aspernatur laboriosam
nesciunt minus
omnis ipsam
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.
Et excepturi fugiat laboriosam, tempora enim recusandae repellat est esse beatae aspernatur illo similique, modi itaque eos consequatur maxime iste harum alias adipisci temporibus officia velit. Delectus sint magni odio ratione nesciunt quas eligendi quae dicta adipisci velit, consectetur quaerat ab doloremque, dolorum nam dicta aut accusantium nemo iure vel facilis ipsum. Ullam odit dolorum neque nam nisi?
purplish-grey
sequi aperiam
amet aspernatur
at nostrum
iusto reiciendis
quis quasi
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.
Omnis quibusdam nostrum iusto voluptas dolor minus, repudiandae quod rem. Quasi molestias id iusto earum soluta quod optio itaque voluptas vel?
battleship-grey
eveniet fugit
suscipit quisquam
quis eveniet
a sint
facilis repellat
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.
Sint quisquam non tempore, in iste a animi reprehenderit perspiciatis optio facilis sequi.
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
-
-
-