mirror of
https://github.com/zooai/design.git
synced 2026-10-30 14:50:04 +00:00
zooqueen
cef8f7f1c6
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.
143 lines
4.8 KiB
CSS
143 lines
4.8 KiB
CSS
/* Zoo is LOUD. A bold six-color palette — yellow, magenta, cyan, green, red,
|
|
blue — each accent an equal voice, set against a near-black surface. This is
|
|
the opposite of a monochrome brand: color is the point. Semantic names match
|
|
zoo.ngo's CSS variables exactly, so code copies over 1:1.
|
|
DARK IS THE DEFAULT THEME (zoo.ngo mounts ThemeProvider defaultTheme="dark"). */
|
|
|
|
:root{
|
|
/* ——— the six brand colors (brand.json — the source of truth) ——— */
|
|
--zoo-yellow:#FCF006; /* primary — sunlight */
|
|
--zoo-magenta:#EA018E;
|
|
--zoo-cyan:#01ACF1;
|
|
--zoo-green:#00A652;
|
|
--zoo-red:#ED1C24;
|
|
--zoo-blue:#2E3192;
|
|
|
|
/* ——— base neutral ladder (surfaces + text, the quiet ground the color
|
|
sits on — near-black, not pure black) ——— */
|
|
--neutral-50:#FAFAFA;
|
|
--neutral-100:#F5F5F5;
|
|
--neutral-200:#E5E5E5;
|
|
--neutral-300:#D4D4D4;
|
|
--neutral-400:#A3A3A3;
|
|
--neutral-500:#737373;
|
|
--neutral-600:#525252;
|
|
--neutral-700:#404040;
|
|
--neutral-800:#262626;
|
|
--neutral-900:#171717;
|
|
--neutral-950:#0A0A0A;
|
|
--pure-black:#000000;
|
|
--pure-white:#FFFFFF;
|
|
/* Press-kit brand constants (public/press/zoo/README.md). */
|
|
--zoo-black:#0A0A0B;
|
|
--zoo-white:#FFFFFF;
|
|
|
|
/* ——— white opacity ladder (hairlines, glass surfaces on the dark ground) ——— */
|
|
--white-05:rgb(255 255 255 / .05);
|
|
--white-10:rgb(255 255 255 / .10);
|
|
--white-15:rgb(255 255 255 / .15);
|
|
--white-20:rgb(255 255 255 / .20);
|
|
--white-30:rgb(255 255 255 / .30);
|
|
--white-40:rgb(255 255 255 / .40);
|
|
--white-60:rgb(255 255 255 / .60);
|
|
--white-80:rgb(255 255 255 / .80);
|
|
|
|
/* ——— accent voices (equal weight; brand.json accent1/2/3) ——— */
|
|
--accent-1:var(--zoo-magenta);
|
|
--accent-2:var(--zoo-cyan);
|
|
--accent-3:var(--zoo-yellow);
|
|
|
|
/* ——— semantic aliases (dark, the default) ——— */
|
|
--background:#0A0A0B; /* near-black ground */
|
|
--foreground:#ededed;
|
|
--card:#141416;
|
|
--card-foreground:#f5f5f5;
|
|
--popover:#141416;
|
|
--popover-foreground:#f5f5f5;
|
|
--primary:var(--zoo-yellow); /* the primary accent IS a color, loudly */
|
|
--primary-foreground:#0A0A0B; /* dark type on the bright yellow */
|
|
--secondary:#1c1c1f;
|
|
--secondary-foreground:#f5f5f5;
|
|
--muted:#141416;
|
|
--muted-foreground:#8a8a8f;
|
|
--accent:var(--zoo-magenta); /* hover / active lift — a color, not gray */
|
|
--accent-foreground:#ffffff;
|
|
--destructive:var(--zoo-red);
|
|
--destructive-foreground:#ffffff;
|
|
--border:#232327;
|
|
--input:#232327;
|
|
--ring:var(--zoo-magenta); /* focus ring is brand, not neutral */
|
|
--brand:var(--zoo-yellow);
|
|
--brand-foreground:#0A0A0B;
|
|
--brand-muted:#a3a3a3;
|
|
--black:#0A0A0B;
|
|
--white:#f5f5f5;
|
|
|
|
/* ——— surface recipes (card fills across zoo.ngo) ——— */
|
|
--surface-page:var(--background);
|
|
--surface-card:rgb(23 23 26 / .5);
|
|
--surface-card-emphasis:rgb(23 23 26 / .8);
|
|
--surface-card-quiet:rgb(23 23 26 / .4);
|
|
--surface-overlay:rgb(10 10 11 / .95);
|
|
--surface-header:rgb(10 10 11 / .7);
|
|
--border-hairline:var(--neutral-800);
|
|
--border-card:var(--white-10);
|
|
--border-strong:var(--neutral-700);
|
|
|
|
/* ——— text ranks ——— */
|
|
--text-primary:var(--pure-white);
|
|
--text-secondary:var(--white-80);
|
|
--text-tertiary:var(--white-60);
|
|
--text-helper:var(--muted-foreground);
|
|
--text-disabled:var(--white-30);
|
|
|
|
/* ——— state (brand.json semantic — Zoo's own green/yellow/red) ——— */
|
|
--state-error:var(--zoo-red);
|
|
--state-error-text:#f8a0a4;
|
|
--state-error-bg:rgb(237 28 36 / .12);
|
|
--state-online:var(--zoo-green);
|
|
--state-success:var(--zoo-green);
|
|
--state-warning:var(--zoo-yellow);
|
|
--chrome-dot-red:rgb(237 28 36 / .7);
|
|
--chrome-dot-yellow:rgb(252 240 6 / .7);
|
|
--chrome-dot-green:rgb(0 166 82 / .7);
|
|
}
|
|
|
|
/* Light theme — the same tokens on a white ground; the six colors keep their
|
|
value (they read on white too). Rare: only /brand-style docs pages. */
|
|
.light{
|
|
--background:#FFFFFF;
|
|
--foreground:#0A0A0B;
|
|
--card:#FAFAFA;
|
|
--card-foreground:#0A0A0B;
|
|
--popover:#FFFFFF;
|
|
--popover-foreground:#0A0A0B;
|
|
--primary:var(--zoo-yellow);
|
|
--primary-foreground:#0A0A0B;
|
|
--secondary:#F5F5F5;
|
|
--secondary-foreground:#0A0A0B;
|
|
--muted:#F5F5F5;
|
|
--muted-foreground:#525252;
|
|
--accent:var(--zoo-magenta);
|
|
--accent-foreground:#FFFFFF;
|
|
--destructive:var(--zoo-red);
|
|
--destructive-foreground:#FFFFFF;
|
|
--border:#E5E5E5;
|
|
--input:#E5E5E5;
|
|
--ring:var(--zoo-magenta);
|
|
--black:#0A0A0B;
|
|
--white:#FFFFFF;
|
|
--surface-card:#F5F5F5;
|
|
--surface-card-emphasis:#FFFFFF;
|
|
--surface-card-quiet:#FAFAFA;
|
|
--surface-overlay:rgb(255 255 255 / .95);
|
|
--surface-header:rgb(255 255 255 / .8);
|
|
--border-hairline:var(--neutral-200);
|
|
--border-card:rgb(0 0 0 / .1);
|
|
--border-strong:var(--neutral-300);
|
|
--text-primary:var(--neutral-950);
|
|
--text-secondary:rgb(10 10 11 / .8);
|
|
--text-tertiary:rgb(10 10 11 / .6);
|
|
--text-disabled:rgb(10 10 11 / .3);
|
|
}
|