Themes

UIF themes can be used by setting theme config in file tailwind.config.ts

Colors

paintone
neutral
50
#f2f2f2
100
#d6d6d6
200
#c2c2c2
300
#a6a6a6
400
#959595
500
#7a7a7a
600
#6f6f6f
700
#575757
800
#434343
900
#333333
primary
Default(500)
#ed2e7c
50
#fdeaf2
100
#f9bed6
200
#F79FC3
300
#f373a7
400
#f15896
500
#ed2e7c
600
#d82a71
700
#a82158
800
#821944
900
#641334
secondary
Default(500)
#21296e
50
#e9eaf1
100
#babdd2
200
#999DBC
300
#6a709e
400
#4d548b
500
#21296e
600
#1e2564
700
#171d4e
800
#12173d
900
#0e112e
tertiary
Default(500)
#ff5c36
50
#ffefeb
100
#ffccc1
200
#ffb4a3
300
#ff9278
400
#ff7d5e
500
#ff5c36
600
#e85431
700
#b54126
800
#8c331e
900
#6b2717
success
Default(500)
#22c55e
50
#e9f9ef
100
#baedcd
200
#99e4b5
300
#6bd893
400
#4ed17e
500
#22c55e
600
#1fb356
700
#188c43
800
#136c34
900
#0e5327
error
Default(500)
#EF4444
50
#fdecec
100
#fac5c5
200
#f8a9a9
300
#f48282
400
#f26969
500
#EF4444
600
#d93e3e
700
#aa3030
800
#832525
900
#641d1d
accent
Default
#00FF85

Typography

Noto Sans JP
Poppins
Prompt
Font Family

Font family that supports Thai, English, and Japanese content.

Prompt
font-prompt
300
font-light
ลุงบุญมีระลึกชาติ
400
font-normal
ลุงบุญมีระลึกชาติ
500
font-medium
ลุงบุญมีระลึกชาติ
600
font-semibold
ลุงบุญมีระลึกชาติ
700
font-bold
ลุงบุญมีระลึกชาติ
Poppins
font-poppins
300
font-light
Uncle Boonmee Who Can Recall His Past Lives
400
font-normal
Uncle Boonmee Who Can Recall His Past Lives
500
font-medium
Uncle Boonmee Who Can Recall His Past Lives
600
font-semibold
Uncle Boonmee Who Can Recall His Past Lives
700
font-bold
Uncle Boonmee Who Can Recall His Past Lives
Noto Sans JP
font-noto-sans-jp
300
font-light
ブンミおじさんの森
400
font-normal
ブンミおじさんの森
500
font-medium
ブンミおじさんの森
600
font-semibold
ブンミおじさんの森
700
font-bold
ブンミおじさんの森
Font Sizes

Font size display is responsive for desktop and mobile.

h1
Desktop
font-size: 96px
line-height: 112px

ลุงบุญมีระลึกชาติ

Mobile
font-size: 60px
line-height: 72px

ลุงบุญมีระลึกชาติ

h2
Desktop
font-size: 60px
line-height: 72px

ลุงบุญมีระลึกชาติ

Mobile
font-size: 48px
line-height: 56px

ลุงบุญมีระลึกชาติ

h3
Desktop
font-size: 48px
line-height: 56px

ลุงบุญมีระลึกชาติ

Mobile
font-size: 34px
line-height: 42px

ลุงบุญมีระลึกชาติ

h4
Desktop
font-size: 34px
line-height: 42px
ลุงบุญมีระลึกชาติ
Mobile
font-size: 24px
line-height: 32px
ลุงบุญมีระลึกชาติ
h5
Desktop
font-size: 24px
line-height: 32px
ลุงบุญมีระลึกชาติ
Mobile
font-size: 20px
line-height: 30px
ลุงบุญมีระลึกชาติ
h6
Desktop
font-size: 20px
line-height: 30px
ลุงบุญมีระลึกชาติ
Mobile
font-size: 18px
line-height: 24px
ลุงบุญมีระลึกชาติ
Sub Head 1
text-sh-1
Desktop, Mobile
font-size: 34px
line-height: 42px

ลุงบุญมีระลึกชาติ

Sub Head 2
text-sh-1
Desktop, Mobile
font-size: 24px
line-height: 32px

ลุงบุญมีระลึกชาติ

Body 1
text-b-1
Desktop, Mobile
font-size: 16px
line-height: 24px

ลุงบุญมีระลึกชาติ

Body 2
text-b-2
Desktop, Mobile
font-size: 14px
line-height: 20px

ลุงบุญมีระลึกชาติ

Body 3
text-b-3
Desktop, Mobile
font-size: 12px
line-height: 18px

ลุงบุญมีระลึกชาติ

Botton
text-btn
Desktop, Mobile
font-size: 16px
line-height: 24px

ลุงบุญมีระลึกชาติ

Caption
text-caption
Desktop, Mobile
font-size: 14px
line-height: normal

ลุงบุญมีระลึกชาติ

Overline
text-overline
Desktop, Mobile
font-size: 12px
line-height: normal

ลุงบุญมีระลึกชาติ

Screens sizes

There are a total of 6 screen sizes for the responsive website. The default design includes 3 sizes:
Small Mobile, Tablet and Small Desktop. However, customers have the option to add or reduce sizes according to their preferences.

Default
Small Mobile (0-479px)
smobile-only:
screen size is less than equal to 479px
Mobile (480-767px)
mobile-only:
mobile:
mobile-only:
Only mobile (480-767px)
mobile:
Screen size 0-767px
Default
Tablet (768-1023px)
tablet-only:
tablet:
tablet-only:
Only tablet (768-1023px)
tablet:
Screen size 0-1023px
Default
Desktop (1024-1439px)
desktop-only:
desktop:
desktop-only:
Only desktop (1024-1439px)
desktop:
Screen size 0-1439px
Large Desktop (1440-1889px)
desktop-only:
desktop:
l-desktop-only:
Only large desktop (1440-1889px)
l-desktop:
Screen size 0-1889px
Extra large Desktop (1890px and up)
xl-desktop:
xl-desktop:

Screen padding

Utilities Class
.screen-padding

Distance between content and display edge, affecting the left and right sides equally. It will adjust the distance responsively according to the screen size automatically.

class="screen-padding"

padding 16px - Small Mobile (s-mobile:), Mobile (mobile:)

padding 32px - Tablet (tablet:)

padding 48px - Small Desktop (s-desktop:)

padding 96px - Large Desktop (l-desktop:), Extra large Desktop (xl-desktop:)

Small Mobile, Mobile

16px padding-left, padding-right

Tablet

32px padding-left, padding-right

Desktop

48px padding-left, padding-right

Large Desktop, Extra large Desktop

96px padding-left, padding-right

Border Radius

rounded-2 (2px)

rounded-4 (4px)

rounded-6 (6px)

rounded-8 (8px)

rounded-10 (10px)

rounded-12 (12px)

rounded-16 (16px)

rounded-20 (20px)

rounded-24 (24px)

rounded-28 (28px)

rounded-32 (32px)

rounded-36 (36px)

rounded-40 (40px)

rounded-44 (44px)

rounded-48 (48px)

rounded (default)

rounded-full (9999px)