Components

Browse all available components in the Japandi UI design system.

Palette

Choose four roles and the component previews update immediately.

Palette picker

Choose colors you like!

Accent color

#D86A3B · earthy terracotta accent

Secondary color

#C9D0D2 · cool stone mist

Background color

#F7F4EF · warm winter white

Surface color

#E6E1D8 · foggy linen haze

Available colors

Tokyo Tower Orange

#D86A3B

Stockholm Snow White

#F7F4EF

Tokyo Night Blue

#1E2D3A

Stockholm Summer Light Blue

#B9D3E6

Kyoto Cedar Brown

#7A5A43

Oslo Fjord Teal

#2F6F6A

Copenhagen Sand

#D9CBB5

Helsinki Pine Green

#3E5E4B

Sapporo Frost Gray

#C9D0D2

Aarhus Slate

#4E5A62

Nara Moss

#6C7A58

Hakone Mist Gray

#E6E1D8

Buttons

As Link

Cards

Card Title

Card description goes here

Card content area

Another Card

With different content

Form Elements

Select

Textarea

Accept terms and conditions

Enable notifications

Radio Group

Option 1

Option 2

Badges & Avatars

DefaultSecondaryDestructiveOutline

CNJDAB

Alerts

Default Alert

This is a default alert message.

Destructive Alert

This is a destructive alert for errors.

Interactive Components

Tabs

Account

Make changes to your account here.

Account content goes here.

Accordion

Progress & Skeleton

Progress: 33%

Separator

Section 1

Content for section 1

Section 2

Content for section 2