Principles

Rules 3 to 6 hold in every theme. Rules 1 and 2 describe the Zynactra house theme; other themes bring their own shape and palette, but never break the rest.

1. Square by default

Every corner is 0. Every radius in the theme resolves to 0, so even rounded-lg is square. Circles only mean "one of many" (the radio dot) or motion (the ripple).

2. Warm neutrals do the work

Bone (#F3F0EA) and Obsidian (#0D0C0B) carry most of every screen. Color is earned, never used to fill space.

3. Heat marks energy

The brand gradient, called heat in the Zynactra theme, shows where things move forward. That is the whole list, in every theme:

• the primary action: <Button variant="brand">, one per view;
• progress: progress bars, slider ranges, step lines;
• focus: the focus ring (in Zynactra, a 2px heat line under the field);
• the active place: the active tab, the active sidebar item;
• the brand rule: one 2px line at the top of a screen.

4. Ink marks state

Checked, on, selected and current use primary (ink in Zynactra), not the brand gradient. That keeps the brand rare enough to mean something.

5. Lines before shadows

Structure comes from 1px borders. Shadows are only for things that float above the page: menus, popovers, dialogs, toasts.

6. Mono for machines

JetBrains Mono for eyebrows, numbers, IDs, dates, code and shortcuts. Instrument Sans for everything a person reads.

Governance

• Tokens only. Use semantic utilities (bg-surface, text-muted-foreground, border-border). Never a hex value, never an arbitrary color.
• Compose, don't fork. Build product UI out of @zynactra/ui components. If one can't do what you need, propose a change here instead of copying it into your app.
• Brand changes happen here. Products get them by bumping @zynactra/ui.