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.
Default
Primary
Info
Success
Warning
Danger
Default Dark
Primary Dark
Info Dark
Success Dark
Warning Dark
Danger Dark
Muted
Grey
Blue
Navy
Muted Dark
Grey Dark
Blue Dark
Navy Dark
Primary
Info
Warning
Pick your style
Pick your size
Pick your color
Pick your social style
Pick your style
Horizontal tabs with text
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, 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 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 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, 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 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 text
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, 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 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 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, 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 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 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, 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 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 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, 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 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!
Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.