Color Palette

A comprehensive color system for the Poyraz UI kit, designed for consistency, accessibility, and beautiful user interfaces in both light and dark modes.

Background Colors

Primary background colors for light and dark themes.

Light Background
#ffffff

Primary light background

Dark Background
#121212

Primary dark background

Neutral Colors

The foundation of the design system. Used for text, borders, backgrounds, and UI elements.

neutral-50
#fafafa
neutral-100
#f5f5f5
neutral-200
#e5e5e5
neutral-300
#d4d4d4
neutral-400
#a3a3a3
neutral-500
#737373
neutral-600
#525252
neutral-700
#404040
neutral-800
#262626
neutral-900
#171717

Semantic Colors

Colors with specific meanings for success, error, and warning states.

green-500
#22c55e

Success states

green-600
#16a34a

Success hover

red-500
#ef4444

Error states

red-600
#dc2626

Error hover

Text Colors

Typography color system for different text hierarchies and contexts.

Primary Heading
Main titles and headings
text-neutral-800 dark:text-neutral-100
Secondary Heading
Section titles
text-neutral-700 dark:text-neutral-200
Body Text
Main content text
text-neutral-600 dark:text-neutral-400
Muted Text
Helper text and captions
text-neutral-500 dark:text-neutral-500

Button Color System

Color variations for different button states and variants.

Primary Button

Main call-to-action buttons

Light Mode:
bg-neutral-900 text-neutral-100 hover:bg-neutral-800
Dark Mode:
dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200

Secondary Button

Secondary actions

Light Mode:
bg-neutral-50/20 text-neutral-700 border-neutral-200 hover:bg-neutral-100
Dark Mode:
dark:bg-neutral-900/20 dark:text-neutral-300 dark:border-neutral-800 dark:hover:bg-neutral-800

Outline Button

Less prominent actions

Light Mode:
bg-transparent text-neutral-700 border-neutral-200 hover:bg-neutral-50/20
Dark Mode:
dark:text-neutral-300 dark:border-neutral-800 dark:hover:bg-neutral-900/20

Ghost Button

Minimal actions

Light Mode:
bg-transparent text-neutral-600 hover:bg-neutral-50/20 hover:text-neutral-700
Dark Mode:
dark:text-neutral-400 dark:hover:bg-neutral-900/20 dark:hover:text-neutral-300

Gradient Button

Special highlight actions

Light Mode:
bg-gradient-to-r from-neutral-800 to-neutral-600 text-neutral-100 hover:from-neutral-700 hover:to-neutral-500
Dark Mode:
dark:from-neutral-200 dark:to-neutral-400 dark:text-neutral-900 dark:hover:from-neutral-100 dark:hover:to-neutral-300

Toast Notification Colors

Color system for toast notifications and feedback messages.

Default Toast

Background: rgb(220 220 220)
Text: rgb(38 38 38)
Border: #e5e7eb

Success Toast

Background: rgb(34 197 94)
Text: #fff
Border: rgb(22 163 74)

Error Toast

Background: rgb(239 68 68)
Text: #fff
Border: rgb(220 38 38)

Usage Guidelines

Accessibility First

All color combinations meet WCAG AA contrast requirements for optimal readability

Consistent System

Use semantic colors consistently across the application for better user experience