UI Kit

Colors

Click any swatch to copy its token name. Use it as bg-token, text-token, border-token, with optional /N alpha (e.g. bg-navy-300/50).

Neutral

white#FFFFFF
black#000000

Grey

gray-50#F2F2F0
gray-100#DCDDE4
gray-200#A3A4B5
gray-300#67697C
gray-400#4D4F60
gray-500#373946
gray-600#292A36
gray-700#20212B
gray-800#16171F
gray-900#010109

Navy

navy-100#6D99D6
navy-200#5689FF
navy-300#0971D3
navy-400#267DCB
navy-500#00478F
navy-600#3A4E82
navy-700#1D273E
navy-800#0D1A38
navy-900#070C1C

Blue

blue-50#C7C8FF
blue-100#B5B6FF
blue-200#9091FF
blue-300#6B6DFF
blue-400#4648FF
blue-500#383AD2
blue-600#2A2BA5
blue-700#1C1D77
blue-800#151661
blue-900#0E0E4A

Red

red-50#FDD8E1
red-100#FCC5D2
red-200#EC8988
red-300#E75150
red-400#D41817
red-500#C31F1E
red-600#980F0E
red-700#830D0C
red-800#670A09
red-900#3C1725

Green

green-50#E9FBF0
green-100#D3F6E0
green-200#A7EEC1
green-300#7BE5A2
green-400#A4FF3F
green-500#23D464
green-600#1CAA50
green-700#178267
green-800#0F5745
green-900#082B22

Coral

coral-50#FFE5E0
coral-100#FFD9D1
coral-200#FFCCC1
coral-300#FFB2A3
coral-400#FF9984
coral-500#FF7F65
coral-600#D86851
coral-700#B1503D
coral-800#8A3928
coral-900#632114

Rajah (gold)

rajah-50#FFF7F0
rajah-100#FEF0E1
rajah-200#FEE8D2
rajah-300#FDE0C3
rajah-400#FDD1A6
rajah-500#FCC188
rajah-600#FBB26A
rajah-700#D59455
rajah-800#AF7740
rajah-900#88592C

Kit accents

kit-dark-blue#0C152E
kit-dark-green#042E2F
kit-dark-violet#2F0B3E
kit-dark-red#3C1725
kit-light-blue#90A6FF
kit-icon-blue#3A4E82

Brand

primary#0971D3→ navy-300
secondary#D59455→ rajah-700
tertiary#178267→ green-700

State

error#D41817→ red-400
success#008000
warning#FE7329

Other

link#0971D3→ navy-300
disabled#DCDDE4→ gray-100

Typography

Headings

Heading XL/Medium -4% · .heading-xl-medium-4

The quick brown fox

Heading L/SemiBold · .heading-l-semibold

The quick brown fox

Heading L/Bold · .heading-l-bold

The quick brown fox

Heading M/Regular · .heading-m-regular

The quick brown fox

Heading M/Medium · .heading-m-medium

The quick brown fox

Heading M/SemiBold · .heading-m-semibold

The quick brown fox

Heading M/Bold · .heading-m-bold

The quick brown fox

Heading M/Bold -2% · .heading-m-bold-2

The quick brown fox

Heading S/Regular -2% · .heading-s-regular-2

The quick brown fox

Heading S/Medium -2% · .heading-s-medium-2

The quick brown fox

Heading S/SemiBold -2% · .heading-s-semibold-2

The quick brown fox

Heading S/Bold · .heading-s-bold

The quick brown fox

Heading S/Bold -2% · .heading-s-bold-2

The quick brown fox

Heading S/Bold -4% · .heading-s-bold-4

The quick brown fox

Texts

Text XL/Medium -2% · .text-xl-medium-2

The quick brown fox

Text XL/SemiBold -2% · .text-xl-semibold-2

The quick brown fox

Text XL/Bold · .text-xl-bold

The quick brown fox

Text XL/Bold -4% · .text-xl-bold-4

The quick brown fox

Text L/Regular -2% · .text-l-regular-2

The quick brown fox

Text L/Medium -2% · .text-l-medium-2

The quick brown fox

Text M/Regular · .text-m-regular

The quick brown fox

Text M/Regular -2% · .text-m-regular-2

The quick brown fox

Text M/Medium -2% · .text-m-medium-2

The quick brown fox

Text M/SemiBold -2% · .text-m-semibold-2

The quick brown fox

Text M/SemiBold -4% · .text-m-semibold-4

The quick brown fox

Text M/Bold -2% · .text-m-bold-2

The quick brown fox

Text M/Bold -4% · .text-m-bold-4

The quick brown fox

Text S/Regular -2% · .text-s-regular-2

The quick brown fox

Text S/Regular -4% · .text-s-regular-4

The quick brown fox

Text S/Medium -2% · .text-s-medium-2

The quick brown fox

Text S/Medium -4% · .text-s-medium-4

The quick brown fox

Text S/SemiBold -2% · .text-s-semibold-2

The quick brown fox

Text S/SemiBold -4% · .text-s-semibold-4

The quick brown fox

Text S/Bold -2% · .text-s-bold-2

The quick brown fox

Text S/Bold -4% · .text-s-bold-4

The quick brown fox

Text XS/Regular · .text-xs-regular

The quick brown fox

Text XS/Regular -2% · .text-xs-regular-2

The quick brown fox

Text XS/Regular -4% · .text-xs-regular-4

The quick brown fox

Text XS/Medium · .text-xs-medium

The quick brown fox

Text XS/Medium -4% · .text-xs-medium-4

The quick brown fox

Text XS/SemiBold -2% · .text-xs-semibold-2

The quick brown fox

Text XS/Bold · .text-xs-bold

The quick brown fox

Text XS/Bold -4% · .text-xs-bold-4

The quick brown fox

Text XXS/Regular · .text-xxs-regular

The quick brown fox

Text XXS/Medium · .text-xxs-medium

The quick brown fox

Buttons

Primary

Gray

Transparent

Secondary

Link

Square corners

Icons

Icon buttons — Transparent

Icon buttons — Blue

Icon buttons — Gold (gradient pill)

Icon buttons — Gold outline (square)

Icon buttons — Gold + Blue

Forms

Hover, focus and select states are live — interact with any input below to see them. Default, Filled, Error and Disabled are shown statically.

Input — email

Standard text input using the headless Input + InputTwRenderer pattern. Hover or focus the Default field to see live state styling; Filled, Error and Disabled are pre-seeded for reference.

This email is already taken.

Input — email animated

Floating-label variant via the hasLabelAnimation prop — the label sits inside the field at rest and floats above on focus or when the field has a value. Click into the empty field to watch the animation.

Input — password

Click the eye icon on any field below to toggle visibility. The "Forgot password?" link is rendered next to the label via the new labelExtra slot.

Confirm password is incorrect

Input — email or phone

Headless InputPhoneOrEmail from 360-shared-components-tw with the brand-specific InputPhoneOrEmailRender. Type an email address or a phone number (e.g. +40… or 07…) — when the value matches a phone pattern the active country flag and dial-code slide in on the left and the input strips a leading 0.

This email or phone is invalid.

Input — date

Headless InputDatePicker from 360-shared-components-tw with the brand-specific InputDatePickerRenderer wrapping react-datepicker. Click the field (or the calendar icon) to open a portal-rendered picker with Year / Month dropdowns. Label is static, matching the email input above.

Please pick a valid date of birth.

Input — phone number

Headless InputPhone from 360-shared-components-tw with the brand-specific InputPhoneRenderer. Hover or focus any field to see live states.

+40
+40
+40

Phone number is incorrect

Select

Headless Select from 360-shared-components-tw with the brand-specific SelectRenderer. Click the field to expand the dropdown — it floats absolutely below the trigger so other content doesn't shift. Click outside or pick an option to close. Each select is seeded with a default option.

Please pick a country

Select — document type

Same headless Select with DocumentTypeSelectRender — glass panel, gold selected icon, muted option thumbnails. Used on account-validation upload. The list expands in-flow (not absolutely positioned).

Please pick a document type

Checkbox

Headless Checkbox from 360-shared-components-tw with the brand-specific CheckboxRenderer. Click any item to toggle. Hover unchecked / checked items to see the gold border / reverse gradient. Disabled rows do not respond to interaction.

Radio button

Headless RadioButton from 360-shared-components-tw with the brand-specific RadioButtonRenderer. Same visual language as the Checkbox — gray ring by default, gold (#D6B281) ring on hover and when selected, with a small flat gold inner dot for the checked state. Click any option in the interactive group to switch the selection.

Interactive
Disabled (with selection)

Textarea

Headless Textarea from 360-shared-components-tw with the brand-specific TextareaRender. Shares the same form-item form-input glass surface as the single-line inputs above. min-h-60 (240px) gives the field room to breathe while still allowing the user to drag-resize vertically.

This field is required