Colors · BluKavantUI

COLOR HAS A JOB

Start with meaning. Then choose a color.

Use a neutral foundation for the work, an accent for the main action and semantic colors for conditions and outcomes.

BackgroundSurfaceRaised content

Surfaces establish depth

Use the background, surface and raised-surface tokens. Keep reading areas calm and use borders to separate related regions.

--bluui-surface

Emphasis guides the task

Reserve the filled primary treatment for the main action in a group. Supporting actions can use an outlined or quieter treatment.

ComponentColor: Primary

Status explains a condition

Keep the meaning stable. Pair color with a label so the state remains clear without seeing the color.

Success · Warning · Danger

Design in both appearances.

Switch Light / Dark / System in the header. The examples below use the current theme. Prefer semantic tokens to hard-coded colors, and check the actual foreground and background together.

Color gives actions emphasis and makes state easier to recognize. Use the 19 shared ComponentColor choices for component intent, and foundational tokens for surfaces and custom composition.

Color always works with a label.

Use words such as “Saved”, “Pending”, or “Failed” to explain status. A green or red surface alone is not enough. Contrast values below describe the displayed foreground/background pair.

FOUNDATIONAL PALETTE

The tokens behind the interface

These are the shared BluUITheme values for the current appearance. Choose Light, Dark, or System in the header. Presets use Ant Design filled colors; status badges use solid colors.

Use semantic roles

Primary identifies the main action. Default and Secondary support it. Success, Warning, and Danger communicate outcomes and conditions.

Check the actual pairing

Contrast depends on both foreground and background. Target at least 4.5:1 for normal text and 3:1 for large text. Verify focus, borders, and states separately.