Welcome UI logo
FOUNDATIONSCOMPONENTSBLOG650+
10.0.0

Menu

    • Getting started
    • How to contribute

    Theming

    • Basics

    Upgrades

    • Olders
    • V10
    • V9

Basics

Theming

Colors

Primary

Neutral

--color-neutral-10
--color-neutral-20
--color-neutral-30
--color-neutral-40
--color-neutral-50
--color-neutral-60
--color-neutral-70
--color-neutral-80
--color-neutral-90

Beige

--color-beige-10
--color-beige-20
--color-beige-30
--color-beige-40
--color-beige-50
--color-beige-60
--color-beige-70
--color-beige-80
--color-beige-90

Green

--color-green-10
--color-green-20
--color-green-30
--color-green-40
--color-green-50
--color-green-60
--color-green-70
--color-green-80
--color-green-90

Teal

--color-teal-10
--color-teal-20
--color-teal-30
--color-teal-40
--color-teal-50
--color-teal-60
--color-teal-70
--color-teal-80
--color-teal-90

Blue

--color-blue-10
--color-blue-20
--color-blue-30
--color-blue-40
--color-blue-50
--color-blue-60
--color-blue-70
--color-blue-80
--color-blue-90

Violet

--color-violet-10
--color-violet-20
--color-violet-30
--color-violet-40
--color-violet-50
--color-violet-60
--color-violet-70
--color-violet-80
--color-violet-90

Pink

--color-pink-10
--color-pink-20
--color-pink-30
--color-pink-40
--color-pink-50
--color-pink-60
--color-pink-70
--color-pink-80
--color-pink-90

Red

--color-red-10
--color-red-20
--color-red-30
--color-red-40
--color-red-50
--color-red-60
--color-red-70
--color-red-80
--color-red-90

Red Orange

--color-red-orange-10
--color-red-orange-20
--color-red-orange-30
--color-red-orange-40
--color-red-orange-50
--color-red-orange-60
--color-red-orange-70
--color-red-orange-80
--color-red-orange-90

Orange

--color-orange-10
--color-orange-20
--color-orange-30
--color-orange-40
--color-orange-50
--color-orange-60
--color-orange-70
--color-orange-80
--color-orange-90

Yellow

--color-yellow-10
--color-yellow-20
--color-yellow-30
--color-yellow-40
--color-yellow-50
--color-yellow-60
--color-yellow-70
--color-yellow-80
--color-yellow-90

Semantic

Background brand primary

--color-background-brand-primary

Background brand secondary

--color-background-brand-secondary

Spacing

You can customize the global spacing for padding and margin, top, left, right and bottom.

--spacing-2

2px

(0.125rem)

--spacing-4

4px

(0.25rem)

--spacing-8

8px

(0.5rem)

--spacing-12

12px

(0.75rem)

--spacing-16

16px

(1rem)

--spacing-24

24px

(1.5rem)

--spacing-32

32px

(2rem)

--spacing-48

48px

(3rem)

--spacing-64

64px

(4rem)

--spacing-96

96px

(6rem)

--spacing-192

192px

(12rem)

--spacing-2xs

2px

(0.125rem)

--spacing-xxs

2px

(0.125rem)

--spacing-xs

4px

(0.25rem)

--spacing-sm

8px

(0.5rem)

--spacing-md

12px

(0.75rem)

--spacing-lg

16px

(1rem)

--spacing-xl

24px

(1.5rem)

--spacing-2xl

32px

(2rem)

--spacing-xxl

32px

(2rem)

--spacing-3xl

48px

(3rem)

--spacing-4xl

64px

(4rem)

--spacing-5xl

96px

(6rem)

--spacing-6xl

128px

(8rem)

--spacing-7xl

192px

(12rem)

--spacing

1px

(0.0625rem)

--spacing-0

0

Border radius

By default, we set a border radius on components. Set the radii borders to 0 if you don't like this default. You can also configure the border width.

--radius-none

0

--radius-xs

2px

(0.125rem)

--radius-sm

4px

(0.25rem)

--radius-md

8px

(0.5rem)

--radius-lg

12px

(0.75rem)

--radius-xl

16px

(1rem)

--radius-2xl

24px

(1.5rem)

--radius-full

calc(infinity * 1px)

Breakpoint (screens)

We use values taken from this article.

--breakpoint-xs

0

--breakpoint-sm

480px

(30rem)

--breakpoint-md

736px

(46rem)

--breakpoint-lg

980px

(61.25rem)

--breakpoint-xl

1280px

(80rem)

--breakpoint-2xl

1440px

(90rem)

--breakpoint-xxl

1440px

(90rem)

--breakpoint-3xl

1620px

(101.25rem)

--breakpoint-4xl

1920px

(120rem)

Typography

We use font, font-size, font-weight, line-height and letter-spacing to customize the theme. You should use the Text component with predefined text styles where you can.

font-size

--font-size-12

12px

(0.75rem)

--font-size-14

14px

(0.875rem)

--font-size-16

16px

(1rem)

--font-size-18

18px

(1.125rem)

--font-size-20

20px

(1.25rem)

--font-size-24

24px

(1.5rem)

--font-size-32

32px

(2rem)

--font-size-36

36px

(2.25rem)

--font-size-48

48px

(3rem)

--font-size-60

60px

(3.75rem)

--font-size-72

72px

(4.5rem)

--font-size-128

128px

(8rem)

--font-size-xs

12px

(0.75rem)

--font-size-sm

14px

(0.875rem)

--font-size-md

16px

(1rem)

--font-size-lg

18px

(1.125rem)

--font-size-xl

20px

(1.25rem)

--font-size-2xl

24px

(1.5rem)

--font-size-xxl

24px

(1.5rem)

--font-size-3xl

32px

(2rem)

--font-size-4xl

36px

(2.25rem)

--font-size-5xl

48px

(3rem)

--font-size-6xl

60px

(3.75rem)

--font-size-7xl

72px

(4.5rem)

font-weight

--font-weight-regular

400

--font-weight-medium

500

--font-weight-semi-bold

600

--font-weight-bold

700

--font-weight-black

900

How to contributeUpgrades/olders

On this page

  • Colors
    • Primary
    • Semantic
  • Spacing
  • Border radius
  • Breakpoint (screens)
  • Typography
    • font-size
    • font-weight
Made with by
Welcome to the jungle logo

Documentations

  • Foundations
  • Components
  • Source code

Updates

  • Releases
  • Issues

Community

  • Github
  • Twitter
  • Medium
  • Jobs