Design System

Color

Neutral

Brand

Success

Info

Warning

Danger

Neutral

Brand

Success

Info

Warning

Danger

Typography

The quick brown fox jumps over the lazy dog (text-4xl)

The quick brown fox jumps over the lazy dog (text-3xl)

The quick brown fox jumps over the lazy dog (text-2xl)

The quick brown fox jumps over the lazy dog (text-xl)

The quick brown fox jumps over the lazy dog (text-lg)

The quick brown fox jumps over the lazy dog (text-base)

The quick brown fox jumps over the lazy dog (text-sm)

The quick brown fox jumps over the lazy dog (text-xs)

The quick brown fox jumps over the lazy dog (text-2xs)

The quick brown fox jumps over the lazy dog (text-4xl)

The quick brown fox jumps over the lazy dog (text-3xl)

The quick brown fox jumps over the lazy dog (text-2xl)

The quick brown fox jumps over the lazy dog (text-xl)

The quick brown fox jumps over the lazy dog (text-lg)

The quick brown fox jumps over the lazy dog (text-base)

The quick brown fox jumps over the lazy dog (text-sm)

The quick brown fox jumps over the lazy dog (text-xs)

The quick brown fox jumps over the lazy dog (text-2xs)

Heading

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Custom

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Custom

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Custom

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Custom

Text

Body0 normalBody0 mediumBody0 bold

Body1 normalBody1 mediumBody1 bold

Body2 normalBody2 mediumBody2 bold

Body3 normalBody3 mediumBody3 bold

Common Colors	DefaultSubtitleSecondarySubtle(Becomes more muted)
Special Colors	LabelPlaceholderDisabledActiveErrorSuccessInvertInherit

Body0 normalBody0 mediumBody0 bold

Body1 normalBody1 mediumBody1 bold

Body2 normalBody2 mediumBody2 bold

Body3 normalBody3 mediumBody3 bold

Common Colors	DefaultSubtitleSecondarySubtle(Becomes more muted)
Special Colors	LabelPlaceholderDisabledActiveErrorSuccessInvertInherit

Anchor

Default

Brand color on dark theme, dark + underline on light theme.

Secondary

Secondary color, emphasized color on hover.

Flat

Same color as text, underline on hover.

Unstyled

No color nor hover styles.

Normal Medium Bold

Underline

External links open in new tab by default Show warning page for external link

Default

Brand color on dark theme, dark + underline on light theme.

Secondary

Secondary color, emphasized color on hover.

Flat

Same color as text, underline on hover.

Unstyled

No color nor hover styles.

Normal Medium Bold

Underline

External links open in new tab by default Show warning page for external link

Button

Filter Button

Text Input

PasswordMinimum 6 characters

Password is too simple!

Phone number

Disabled input

Required input

Maximum length

0/10

Description in tooltip

0/100

PasswordMinimum 6 characters

Password is too simple!

Phone number

Disabled input

Required input

Maximum length

0/10

Description in tooltip

0/100

Text Area

Message

MessageMaximum of 200 characters

Enter more than 4 words please

Disabled textarea

Required textarea

Resize horizontal

Maximum length

0/10

Description in tooltip

0/100

Auto-resize

Message

MessageMaximum of 200 characters

Enter more than 4 words please

Disabled textarea

Required textarea

Resize horizontal

Maximum length

0/10

Description in tooltip

0/100

Auto-resize

Select

Framework

Checkbox

Radio Group

Typeahead

Colors

Select colors

Label is hidden

Colors

Select colors

Disabled

Select...

Colors

Red

Must select orange

Required input

Select colors

Colors

Select colors

Label is hidden

Colors

Select colors

Disabled

Select...

Colors

Red

Must select orange

Required input

Select colors

Rich Text Editor

Enter something

Tabs

Pagination

Avatar

2xl

3xl

2xl

3xl

Alert

Hey hey look here

Just wanted to get your attention. Nothing important actually.

Order completed

Your order has been placed! Please check your email for the confirmation.

Update available

A new software update is available. See what's new in version 2.0.4.

Warning!

Doing that is not advisable, you are recommended to stay away from such practices.

Errors submitting

Please try again later, or close it and forget about it.

Some normal title

Just a neutral title, don't pay too much attention to it.

Super special

This is super special and should be used sparingly.

Student discounts

Students can sign up with Projects Platform with their .edu emails to receive special rates 40% off on the pricing plans.Limited

Hey hey look here

Just wanted to get your attention. Nothing important actually.

Order completed

Your order has been placed! Please check your email for the confirmation.

Update available

A new software update is available. See what's new in version 2.0.4.

Warning!

Doing that is not advisable, you are recommended to stay away from such practices.

Errors submitting

Please try again later, or close it and forget about it.

Some normal title

Just a neutral title, don't pay too much attention to it.

Super special

This is super special and should be used sparingly.

Student discounts

Students can sign up with Projects Platform with their .edu emails to receive special rates 40% off on the pricing plans.Limited

Badge

BrandSuccessInformationWarningDangerNeutralNeutral activeSpecial

Xs with iconSmall with iconMedium with icon

BrandSuccessInformationWarningDangerNeutralNeutral activeSpecial

Xs with iconSmall with iconMedium with icon

Chip

Empty State

No Results

Try changing the filters

Oops something went wrong

Try again later, or just find an alternative

Congratulations

You have leveled up

See perks

No Results

Try changing the filters

Oops something went wrong

Try again later, or just find an alternative

Congratulations

You have leveled up

See perks

Card

Data Structures & Algorithms

“One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.”

John DoeSoftware Engineer

Custom PaddingImplement a stack data structure containing the common stack methods

Data Structures & Algorithms

“One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.”

John DoeSoftware Engineer

Custom PaddingImplement a stack data structure containing the common stack methods

Banner

This notice is going to change your life.

This smaller notice is going to change your life.

This even smaller notice is going to change your life.

This notice is going to change your life.

This smaller notice is going to change your life.

This even smaller notice is going to change your life.

This notice is going to change your life.

Accordion

Spinners

Progress Bars

Dropdown Menu

Popover

Tooltip