mirror of https://github.com/zooai/design.git synced 2026-10-30 14:50:04 +00:00

Files

T

zooqueen cef8f7f1c6 fix(zoo): real 6-color palette (was monochrome) — yellow/magenta/cyan/green/red/blue

The fork's colors.css was still Hanzo monochrome with renamed comments. Rewrite
it as Zoo's actual brand: the six colors from brand.json as CSS vars, --primary
= yellow, --accent = magenta, focus ring + state colors brand-true, near-black
ground. Fix the docs/prompts that still described a monochrome/opacity-ladder
aesthetic — Zoo is loud, color is the point.

2026-07-24 22:54:03 -07:00

2.4 KiB

Raw Permalink Blame History

Rules — do / don't

The checklist. Grep it before you ship a Zoo surface. Every "don't" maps to a token or pattern that makes the "do" trivial.

Color

Do	Don't
Use `--background`, `--foreground`, `--surface-card`, the `--white-*` ladder.	Write a raw hex, `rgb()`, or `hsl()` in a component.
Rank by opacity (`--white-80` > `--white-40`).	Invent an off-ladder step (12%, 37%).
Add a hue only for `--state-error`, `--state-online`, `--state-success`, chrome dots, or a third-party logo.	Color a button, gradient, or hero for decoration.
Design the dark surface first.	Treat light as primary.

Type

Do	Don't
Use `--font-sans` / `--font-mono` and the `--type-*` roles.	Add a third typeface or a raw `font-size` in px.
Sentence case for headings and buttons.	ALL CAPS bodies or Title Case Buttons (eyebrows excepted).

Layout & spacing

Do	Don't
Constrain to `--container-max` / `--container-prose`; pad with `--gutter*`.	Let content run full-bleed edge to edge.
Space on the `--space-*` ramp.	Hardcode `padding: 13px`.
Remove an element when it feels crowded.	Shrink the spacing to cram more in.

Components

Do	Don't
One primary (white) action per view; everything else outline or ghost.	Two competing primary buttons.
Plain `<a>` / `<Link>` with className, or the shipped `<Button>`.	`<Button asChild>` — it breaks the build under React 18 strict children.
Elevation as a hairline border + `--shadow-floating` only when floating.	Drop shadows on flat, in-flow cards.

Motion

Do	Don't
Fade + `--entry-rise`, `zoo-fade-up`, CSS-only hovers.	Springs, bounce, parallax, autoplay carousels.
Honor `prefers-reduced-motion`.	Animate a transform on hover.

Accessibility (non-negotiable)

Do	Don't
Keep every body/background pair at WCAG AA, 16px.	Ship `--white-30` text as body copy.
Keep focus visible via `--ring`.	`outline: none` without a replacement ring.
Make dialogs/menus Tab-reachable and Escape-closable.	Trap keyboard users.
Give every `<img>` alt text; mark decorative SVG `aria-hidden`.	Leave images unlabeled.

The one test

six-color, true black, white type, color only as state. If the screenshot would look at home on zoo.ngo, it passes. If it looks like a generic SaaS template, it fails.

2.4 KiB Raw Permalink Blame History