Sketchucation Styleguide

This styleguide is a resource for creators and developers that provides a common language around Sketchucation’s UI patterns. We use it to maintain modular front-end code and visual consistency across the website and services.

Color Palettes

Primary color palette

Default

#353b48

Primary

#00a8ff

Info

#9c88ff

Success

#4cd137

Warning

#fbc531

Danger

#e84118

Default Dark

#2f3640

Primary Dark

#0097e6

Info Dark

#8c7ae6

Success Dark

#44bd32

Warning Dark

#e1b12c

Danger Dark

#c23616

Secondary color palette

Muted

#f5f6fa

Grey

#7f8fa6

Blue

#487eb0

Navy

#273c75

Muted Dark

#dcdde1

Grey Dark

#718093

Blue Dark

#40739e

Navy Dark

#192a56

Color palette with icons

Primary

 

Info

 

Warning

 

Buttons

Pick your style

Pick your size

Pick your color

Pick your social style


Inputs

Checkboxes, Radios & Toggles

Selects & Dropdowns

Textarea and Badges

Default Primary Success Info Warning Danger

Progress bars and Pagination

Sliders

Navigation Tabs

Horizontal tabs with text

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Horizontal tabs with icons

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Navigation Pills

Horizontal pills with text

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Horizontal pills with icons

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Vertical pills with text

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Vertical pills with icons

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis reiciendis fugit doloribus maxime? Ea adipisci neque id repellendus error mollitia amet similique at optio debitis! Dolor, autem sunt?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos nobis sit, voluptate itaque dolorum cumque quasi perferendis alias expedita earum, reprehenderit nam tenetur placeat.

Lorem, ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque recusandae rerum explicabo neque sunt odit dolor vel iste laboriosam quis, deleniti ratione sit ea quos animi praesentium blanditiis laborum aliquam consectetur debitis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque iure magni enim eius necessitatibus fugit perspiciatis quaerat!

Lorem ipsum dolor sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, dolorem? Expedita, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur rerum incidunt, dolore dolorum voluptas doloribus perspiciatis in. Eveniet id corporis cum hic error pariatur explicabo ipsa odit. Inventore, amet!

Notifications

Standard alerts

Dismissable alerts

Pre-footer areas

Connect with us on your favourite social platform

Thank you for your support!

Subscribe to our Newsletter

Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.