mirror of
https://github.com/zooai/design.git
synced 2026-10-30 14:50:04 +00:00
zeekay
8e572430a8
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Zoo surface — loadable and editable.
20 lines
1.2 KiB
CSS
20 lines
1.2 KiB
CSS
/* Zoo barely uses shadow: on black, elevation reads as a hairline border plus
|
|
a wide, very dark drop. Only two levels ship (Tailwind's shadow-2xl for
|
|
floating surfaces) plus the ambient radial glow used behind heroes. */
|
|
:root{
|
|
--shadow-none:none;
|
|
--shadow-floating:0 25px 50px -12px rgb(0 0 0 / .25); /* shadow-2xl: composer, dropdowns, mega panel */
|
|
--shadow-inset-hairline:inset 0 0 0 1px var(--white-10);
|
|
--ring-focus:0 0 0 2px var(--ring);
|
|
/* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
|
|
--glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
|
|
--glow-hero-blur:120px;
|
|
/* Card top-corner sheen used on the story cards. */
|
|
--sheen-card:radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%); /* @kind color */
|
|
/* Chrome text: the canonical headline gradient. Never a saturated rainbow. */
|
|
--gradient-chrome:linear-gradient(to right,#ffffff,var(--white-80),var(--white-60));
|
|
--gradient-chrome-2:linear-gradient(to right,#ffffff,var(--neutral-500));
|
|
/* Section-top protection gradient (hero overlays). */
|
|
--gradient-protect:linear-gradient(to bottom,var(--white-10),transparent);
|
|
}
|