Tech and Design

This design system leverages Next.js and is enhanced by the styling capabilities of TailwindCSS. The UI/UX design was created by Addy.chan in Figma.

Color Palette

Primary Palette

100

--color-primary-100

#E6F6FA📋

200

--color-primary-200

#C9EBF3📋

300

--color-primary-300

#A7DFEB📋

400

--color-primary-400

#81CDDF📋

500

--color-primary-500

#3EA6BE📋

600

--color-primary-600

#1E7C92📋

700

--color-primary-700

#0E5566📋

800

--color-primary-800

#072D3A📋

900

--color-primary-900

#040404📋

Secondary Palette

100

--color-secondary-100

#000608📋

200

--color-secondary-200

#000C10📋

300

--color-secondary-300

#001218📋

400

--color-secondary-400

#001820📋

500

--color-secondary-500

#001E28📋

600

--color-secondary-600

#002430📋

700

--color-secondary-700

#002A38📋

800

--color-secondary-800

#003040📋

900

--color-secondary-900

#003648📋

Accent Palette

100

--color-accent-100

#E8F2F3📋

200

--color-accent-200

#D1E5E7📋

300

--color-accent-300

#B9D8DB📋

400

--color-accent-400

#8CBCC1📋

500

--color-accent-500

#242F32📋

600

--color-accent-600

#1C2528📋

700

--color-accent-700

#141B1D📋

800

--color-accent-800

#0C1012📋

900

--color-accent-900

#040506📋