MekitDIY

Neo Theme Showcase

This page is a living style guide demonstrating the components and color palette of the Neo theme. All elements are styled using Tailwind CSS utility classes defined in the theme.

Primary Palette

Light Mode

This is a standard component in light mode. It uses nb-light-bg for the background and nb-light-text for text.

Interactive elements like this link use accent colors for visibility.

Dark Mode

This is the same component in dark mode. It uses nb-dark-bg for the background and nb-dark-text for text.

This link stands out against the dark background.

Pop & Accent Colors

These vibrant colors are used for call-to-action elements, cards, tags, and other sections that need to grab the user's attention. Each has a corresponding text color for optimal contrast.

Pop Red
Text: text-text-on-pop-bright
Pop Orange
Text: text-text-on-pop-dark
Pop Yellow
Text: text-text-on-pop-dark
Pop Lime
Text: text-text-on-pop-dark
Pop Mint
Text: text-text-on-pop-dark
Pop Blue
Text: text-text-on-pop-bright
Pop Purple
Text: text-text-on-pop-bright
Pop Pink
Text: text-text-on-pop-bright
Accent Cyan
Text: text-text-on-pop-dark
Accent Teal
Text: text-text-on-pop-dark

Form Elements