Foundations

The rules under every part: five brand colors and their mixes, one typeface, borders instead of shadows, a focus ring that follows the theme, and money that lines up.

Import @shineui/core/shineui.css and every name below works in your CSS, in any framework. The list holds every name a shipped element paints. Click a row to copy it.

Use the names, never the raw values. The values above are the default light theme's; dark mode and the four presets remap many of them under the same names, so code that writes the name follows. To watch a palette move, open Theming.

Text comes in three tiers: --ink for body, --ink-muted for secondary text, and --ink-faint for metadata such as timestamps and counters. Muted reads at least 7:1, faint at least 4.8:1 in light and 5.4:1 in dark, on a card, a well, the page and a raised panel, so every tier clears AA and each sits a visible step above the next. Put faint beside body ink, never beside muted text at the same size. --ink-placeholder is a field's placeholder, not a tier. The edge of a control, --control-border, and the chart axis read 3:1. Every theme, shipped or derived, holds the same floors, so a reader gets WCAG 2.1 AA without a setting.

Seventeen pages covering color, type, space, motion and brand, each rendered from the shipped stylesheet. Open a card for the full page, or start with the install steps.