Welcome UI - Customizable design system with react

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

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

--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

--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 contribute Upgrades/olders