Gavia UIv1.0.0

Theme builder

Choose a base theme, change colors and preview components. Copy CSS for your project or instructions for an agent.

Color scheme

Base theme

Changing the base resets colors to the selected theme. Sizes, fonts and status colors also come from that theme.

Lowercase Latin letters, digits and hyphens, up to 32 characters. Use a name different from the built-in themes.

Page background.

Card and panel backgrounds.

Backgrounds for groups, hover and disabled states.

Headings and main interface text.

Labels, hints and placeholder text.

Input and card borders, and separators.

Primary button background. Text, hover and active colors are chosen automatically.

Links, selection and keyboard focus.

Changes are saved in this browser.

Interface preview

Colors apply only to this preview.

gavia
my-gaviaTheme settings
Form example

New project

Draft

Check how the background, text and primary color work together. This form does not create or save projects.

Priority

Clicks: 0

Action variants

DoneIn progressNeeds reviewNo status
Status colors come from the base theme
Success, warning and error colors stay unchanged here.

Text contrast

The displayed pairs pass the check
  • Body text16.73:1 / 4.5:1
  • Supporting text5.70:1 / 4.5:1
  • Text on a secondary surface15.63:1 / 4.5:1
  • Primary action5.13:1 / 4.5:1
  • Primary action: hover5.84:1 / 4.5:1
  • Primary action: active6.73:1 / 4.5:1
  • Destructive action5.75:1 / 4.5:1
  • Destructive action: hover6.97:1 / 4.5:1
  • Tooltip17.61:1 / 4.5:1
  • Information message7.80:1 / 4.5:1
  • Success message5.84:1 / 4.5:1
  • Warning5.73:1 / 4.5:1
  • Error message5.04:1 / 4.5:1
  • Focus on the page4.87:1 / 3:1
  • Link on the page6.39:1 / 4.5:1
  • Focus on a secondary surface4.55:1 / 3:1
  • Text on a raised surface17.33:1 / 4.5:1
  • Supporting text on a raised surface5.90:1 / 4.5:1
  • Focus on a raised surface5.05:1 / 3:1
  • Accent text on a raised surface6.62:1 / 4.5:1
  • Accent text on a secondary surface5.97:1 / 4.5:1
  • Accent text on a selected surface5.41:1 / 4.5:1
  • Accent text on a soft surface: hover4.95:1 / 4.5:1
  • Selection mark on accent5.13:1 / 3:1

This checks contrast for several color pairs. Check accessibility of the complete interface separately. Light or dark text is chosen automatically for the primary color; you choose the link color.

Copy theme settings

Choose agent instructions, JSON settings or CSS to import into your project.

Agent instructions
Create the Gavia UI theme “my-gavia” based on “gavia” using the specification below.

Source: packages/ui-kit/tokens/source.json. Add the theme with the specified colorScheme to themes and the WlThemeName contract.

For each token, first copy themes[baseTheme] ?? value into themes[name]; this preserves a complete base snapshot, including semantic differences.

Then apply overrides only to foundation tokens and semanticBindings only to the specified primary-action semantic roles.

Keep existing themes, Wl* names and --wl-* tokens. Do not automatically substitute the selected background/primary/link colors.

Run pnpm tokens:sync and pnpm tokens:check. Check contrast and components using the new data-wl-theme name, including the Select portal.

The preview CSS contains a complete base snapshot; the JSON below contains portable source changes.

JSON specification:

{
  "schemaVersion": 1,
  "name": "my-gavia",
  "baseTheme": "gavia",
  "colorScheme": "light",
  "palette": {
    "background": "#faf9f6",
    "surface": "#fefdfb",
    "softSurface": "#eef2f3",
    "text": "#0f1a23",
    "mutedText": "#5b6470",
    "border": "#d5dfe3",
    "primary": "#3c7490",
    "link": "#3c7490"
  },
  "overrides": {},
  "semanticBindings": {}
}

Import CSS after the Gavia UI styles; set data-wl-theme on html so overlays receive your theme.