Appearance

Orbz offers two mutually exclusive appearance modes:

select one built-in preset; or
omit preset and provide any of the five color-* attributes.

There is no palette attribute or property. The public name is preset.

Built-in presets

Preset	Primary	Secondary	Accent	Highlight	Core
`neongate`	`#6C5CFF`	`#00E9FF`	`#FF4DDE`	`#FFB07A`	`#14142B`
`periwinkle`	`#6667AB`	`#8FB8FF`	`#E66FA9`	`#F3ECFF`	`#111226`
`magenta`	`#BB2649`	`#F06A82`	`#29B8A6`	`#FFDCE4`	`#250A12`
`peach`	`#FFBE98`	`#FF8F70`	`#D987A3`	`#FFF0E7`	`#2A1516`
`mocha`	`#A47864`	`#D3A17E`	`#7FA18F`	`#F2E2D7`	`#211613`
`ivory`	`#F0EEE9`	`#AFC7D3`	`#C8B3D4`	`#FFFFFF`	`#171A20`


<orb-z preset="periwinkle"></orb-z>

NeonGate is the default appearance. This remains true when the preset attribute is absent, which lets custom mode inherit NeonGate colors for any custom color you do not provide.

Use the exported names and values when building a picker:


import {
  ORBZ_PRESET_NAMES,
  ORBZ_PRESETS,
  type OrbzPresetName,
} from "@neongate-ai/orbz";
 
function getPreview(name: OrbzPresetName) {
  return ORBZ_PRESETS[name];
}

Custom palette

Remove or omit preset, then set one or more valid CSS colors:


<orb-z
  color-primary="#7C3AED"
  color-secondary="#22D3EE"
  color-accent="#F472B6"
  color-highlight="#FDE68A"
  color-background="#09090B"
></orb-z>

Attribute	React prop	Role
`color-primary`	`colorPrimary`	Dominant field color
`color-secondary`	`colorSecondary`	Contrasting field and ring color
`color-accent`	`colorAccent`	Aura and supporting energy
`color-highlight`	`colorHighlight`	Warm or bright highlight
`color-background`	`colorBackground`	Sphere core color

Custom colors are partial. Missing values inherit the default NeonGate color, so a one-color adjustment is valid:


<orb-z color-accent="#FF6B35"></orb-z>

Preset wins on conflict

Do not provide preset and custom colors at the same time. If both appear at runtime, Orbz applies the preset, ignores the custom colors, and reports a console error that lists the conflicting attributes.


<!-- Invalid: preset wins and color-primary is ignored. -->
<orb-z preset="mocha" color-primary="#7C3AED"></orb-z>

The custom attributes remain on the host. If you later remove preset, they become active. A color editor should therefore switch modes explicitly:


const orb = document.querySelector("orb-z");
 
orb?.removeAttribute("preset");
orb?.setAttribute("color-primary", "#7C3AED");

The React adapter models the same rule as a TypeScript union. A valid props object is either preset mode or custom-color mode, never both:


import {
  Orbz,
  type OrbzCustomColorOptions,
  type OrbzPresetOptions,
} from "@neongate-ai/orbz/react";
 
const branded = {
  colorPrimary: "#7C3AED",
  colorSecondary: "#22D3EE",
} satisfies OrbzCustomColorOptions;
 
const builtIn = {
  preset: "neongate",
} satisfies OrbzPresetOptions;
 
export function Presence({ custom }: { custom: boolean }) {
  return <Orbz {...(custom ? branded : builtIn)} />;
}

Size and elevation

size controls both width and height. In HTML, pass a CSS length. Through the JavaScript property or React adapter, a positive number is interpreted as pixels.


<orb-z size="18rem" elevated></orb-z>


<Orbz size={300} elevated />

elevated adds a centered, rounded shadow around the sphere. It is a standard boolean attribute: presence means true. elevated="false" is still enabled; remove the attribute or assign the property false to disable it.

What is intentionally not customizable

Internal CSS variables, selectors, layers, and Shadow DOM parts are private. They are not a supported theming API. The documented attributes are the stable contract, which keeps appearance consistent across frameworks and leaves Orbz free to improve its rendering internally.