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` (default)	`#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 {
  DEFAULT_ORBZ_PRESET,
  ORBZ_PRESET_NAMES,
  ORBZ_PRESETS,
  type OrbzPresetName,
} from "@neongate-ai/orbz";
 
function getPreview(name: OrbzPresetName) {
  return ORBZ_PRESETS[name];
}
 
const neonGateColors = getPreview(DEFAULT_ORBZ_PRESET);

NeonGate preset name

The preset’s name is NeonGate (neongate), independent of the GitHub account that hosts Orbz. Version 1.0.1 accidentally published its API key as gojhonny; version 1.0.2 restores neongate without changing its colors. These docs use the published @neongate-ai/orbz@1.0.2 package.

DEFAULT_ORBZ_PRESET and the default preset getter return neongate. Use the canonical name in new explicit markup:


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

The deprecated gojhonny input remains accepted by preset attributes, properties, types and guards. It normalizes to neongate, including the reflected attribute and property getter. Existing compact or complete configuration objects using the old name are normalized by transformOrbzConfiguration() without mutating the input.

ORBZ_PRESET_NAMES lists the six canonical names. ORBZ_PRESETS.gojhonny remains a non-enumerable, immutable alias of ORBZ_PRESETS.neongate, so existing direct reads still work without creating a seventh picker option. Prefer DEFAULT_ORBZ_PRESET and ORBZ_PRESETS[DEFAULT_ORBZ_PRESET] when code should follow the package default. For default HTML, omit preset:


<orb-z></orb-z>

Omitting preset also lets custom colors take effect. Generate new picker options from your installed package’s ORBZ_PRESET_NAMES, and see the 1.0.2 release notes when upgrading from 1.0.1.

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	Role
`color-primary`	Dominant field color
`color-secondary`	Contrasting field and ring color
`color-accent`	Aura and supporting energy
`color-highlight`	Warm or bright highlight
`color-background`	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 same rule applies in every framework because every framework writes the same native attributes. Remove preset before writing custom colors.

Size and elevation

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


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

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.