Signature
The motion and detail that make a screen read as Zynactra. Precise and engineered, with heat.
Themes set the colors and shapes. The signature is how a Zynactra screen behaves: things draw along lines, slide and clip. They never bounce, zoom or blur. Heat appears only where the brand budget allows it: focus, progress and the active place.
The Zynactra theme wears it. Switch themes in the sidebar to compare: the parts marked every theme stay, the rest are the signature.
Lines that draw
Focus draws in. A 2px heat line draws along the bottom of a text field from its start edge. The border darkens at once, so focus never waits on the animation.
Tabs slide. The active marker of line tabs slides to the tab you pick. Every theme.
The active place draws in. The active sidebar item's heat bar grows from its center.
Corner ticks
Four square brackets mark the card or item you're on, like registration marks on a drawing: muted on hover, ink when selected, heat on keyboard focus. On rounded themes they sit just inside the corner curve. Selected means data-selected, aria-selected="true", aria-current, or a checked radio or checkbox inside a choice card (a <label> wrapping the Card).
Shutters, not zooms
Menus, popovers, selects, comboboxes and hover cards open with a square clip reveal from the edge nearest their trigger. Dialogs rise a few pixels into place. Closing stays a quick fade.
The heat moves
On hover, the brand button's fill shifts toward its hot end. Every color it shows is one of the fill's own, so the text keeps the contrast the theme was checked for. Hover Deploy project above.
Row marker
A 2px line marks the table row under the pointer and, in ink, the selected rows. Try the data table pattern.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Every theme
These ship in every theme, signature or not.
Indeterminate progress travels instead of looking full (Progress).
Rolling numbers for stats (Number Ticker).
Toast countdown: a 2px line runs out with the toast's timer and pauses when the timer does (Toast).
Accessibility
- Motion never carries meaning. Selected, active and focused are all visible in a still frame. The animation only shows the change.
- Reduced motion: with reduce motion on, nothing travels, rolls, slides or clips. Focus lines, markers and ticks appear at once, overlays only fade, and indeterminate progress pulses. This applies to every theme's overlays, not only the signature.
- Forced colors (Windows high contrast) drops gradients, custom colors and box-shadow focus rings. In every theme, any focused control gets a 2px system
Highlightoutline, and ticks, markers, progress and the countdown switch to system colors. - Screen readers get plain values: the number ticker's reels and the countdown line are hidden from them.
For theme authors
A theme opts in with one flag in packages/tokens/src/themes/registry.json:
{ "name": "harbor", "label": "Harbor", "structure": "vega", "signature": true }The next build scopes the signature to the theme as themes/<name>/signature.css, between its structure and its personality, so personality.css can still tune any of it. The signature uses semantic tokens only (--zy-brand-gradient, --zy-border-strong, --zy-text, the motion tokens), so it takes on the theme's own colors. Every theme without the flag, including new ones, is untouched.
The source is packages/ui/src/styles/signature.css. Keyframes and registered properties it needs live in core.css, because they can't be scoped to a theme.