Documentation
Changelog
Help Center
← Back to all posts

Define a new color palette with tailwind css

  1. Define a new color palette with "tailwind css" Define a palette with: primary, secondary, neutral, status (success, error, warning, info).

  • Check contrast (accessibility) with WCAG tools.

  • Use consistent scales (e.g. 100–900) for each color.

  1. Coloring elements Assign colors by state: default, hover, active, disabled.

  • Standardize: buttons, texts, input, alert, badge.

  • Use design tokens to maintain consistency.

  1. Light/dark theme Create two sets of colors (e.g. --bg, --text, --border).

  • Avoid pure black/white: use soft grays.

  • Test readability and visual comfort in both themes.

Domain
General
Action
refactor
Department
Design

Please authenticate to join the conversation.

Upvoters
Status

Completed

Board
🛂

Ui Ux Audit

Date

11 months ago

Author

Daniele Cosentino

Subscribe to post

Get notified by email when there are changes.