Style Guide

Colors

Brand

Constellation

Sky

Glacier

Azure

Amber

Celestial

Blush

Sun Ray

Hues

Gray
25
50
75
100
150
200
300
400
500
600
700
800
900
950
1000
Plain Gray
25
50
75
100
150
200
300
400
500
600
700
800
900
950
1000
Sky
25
50
75
100
200
300
400
500
600
700
800
900
950
Azure
25
50
100
200
300
400
500
600
700
800
900
950
Success
25
50
100
200
300
400
500
600
700
800
900
950
Error
25
50
100
200
300
400
500
600
700
800
900
950
Glacier
25
50
75
100
200
300
400
500
600
700
800
900
950
Lavender
25
50
100
200
300
400
500
600
700
800
900
950
Blush
25
50
100
200
300
400
500
600
700
800
900
950
Celestial
25
50
100
200
300
400
500
600
700
800
900
950
Amber
25
50
100
200
300
400
500
600
700
800
900
950
Sun Ray
25
50
100
200
300
400
500
600
700
800
900
950

Typography

extraLargeText7The quick brown fox jumps over the lazy dog.
extraLargeText6The quick brown fox jumps over the lazy dog.
extraLargeText5The quick brown fox jumps over the lazy dog.
extraLargeText4The quick brown fox jumps over the lazy dog.
extraLargeText3The quick brown fox jumps over the lazy dog.
extraLargeText2The quick brown fox jumps over the lazy dog.
extraLargeTextThe quick brown fox jumps over the lazy dog.
largeTextThe quick brown fox jumps over the lazy dog.
mediumTextThe quick brown fox jumps over the lazy dog.
smallTextThe quick brown fox jumps over the lazy dog.
extraSmallTextThe quick brown fox jumps over the lazy dog.

Weights

extraBoldTextThe quick brown fox jumps over the lazy dog.
boldTextThe quick brown fox jumps over the lazy dog.
semiBoldTextThe quick brown fox jumps over the lazy dog.
mediumWeightTextThe quick brown fox jumps over the lazy dog.
normalWeightTextThe quick brown fox jumps over the lazy dog.

Wisq Icons

Sizes

xs
sm
md
default
lg
xl

2358 total icons across 19 categories. Click to copy name. Showing max 200.

Buttons

Loaders

Loading
Upload progress65%

Step progress (3 of 5)

Avatars

AC
AC
AC
AC
AC
AC
BM
Carol Williams
DP
EK

Popovers & Tooltips

Dialogs

Toggles

Default

Disabled

Checkbox

Indeterminate

Disabled

Radio

Disabled

Dropdowns

Single Select

Searchable

Multi-select

Tabs

Active tab: overview

Desolation

No results found

Try adjusting your search or filter to find what you're looking for.

Banners & Badges

Status Pills

ActiveErrorWarningInfoDraft

Badges

Pill Color

GrayAzureAmberGlacierSuccessErrorLavenderCelestialBlushConstellation

Pill Outline

GrayAzureAmberGlacierSuccessErrorLavenderCelestialBlushConstellation

Tag Color

GrayAzureAmberGlacierSuccessErrorLavenderCelestialBlushConstellation

Sizes

SmallMediumLargeSmallMediumLargeSmallMediumLarge

With Icons

LeadingLeadingTrailingTrailing

With Dot

AzureSuccessErrorLavender

Removable

Remove meRemove meRemove meWith icon

Banners

Info

This is an informational message with helpful context.

Dismissible Warning

Click the X to dismiss this banner.

Error

Something went wrong. Please try again.

Success

Your changes have been saved.

Form Elements

DefaultDisabled
Text Input
Text Input (Error)

This field is required

0/50

Text Area