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.
46 lines
1.5 KiB
CSS
46 lines
1.5 KiB
CSS
/* Spacing: the 4px Tailwind ramp is what ships. The golden-ratio ramp below is
|
|
declared in zoo.ngo's tailwind.config.ts (legacy v3 config, kept for
|
|
reference) — use it for editorial layouts, not for component padding. */
|
|
:root{
|
|
--space-0:0;
|
|
--space-1:0.25rem;
|
|
--space-2:0.5rem;
|
|
--space-3:0.75rem;
|
|
--space-4:1rem;
|
|
--space-5:1.25rem;
|
|
--space-6:1.5rem;
|
|
--space-8:2rem;
|
|
--space-10:2.5rem;
|
|
--space-12:3rem;
|
|
--space-14:3.5rem;
|
|
--space-16:4rem;
|
|
--space-20:5rem;
|
|
--space-24:6rem;
|
|
--space-32:8rem;
|
|
|
|
/* golden ramp (φ) — zoo.ngo tailwind.config.ts */
|
|
--golden-1:0.25rem;
|
|
--golden-2:0.405rem;
|
|
--golden-3:0.654rem;
|
|
--golden-4:1.059rem;
|
|
--golden-5:1.713rem;
|
|
--golden-6:2.772rem;
|
|
--golden-7:4.487rem;
|
|
--golden-8:7.26rem;
|
|
--golden-9:11.749rem;
|
|
--golden-split:38.2% 61.8%; /* @kind other */
|
|
|
|
/* layout rules (DESIGN.md §1.3) */
|
|
--container-max:80rem; /* max-w-7xl — grids */
|
|
--container-prose:48rem; /* max-w-3xl — centered text */
|
|
--container-wide:72rem; /* max-w-6xl — landing sections */
|
|
--gutter:1rem; /* px-4 */
|
|
--gutter-sm:1.5rem; /* sm:px-6 */
|
|
--gutter-lg:2rem; /* lg:px-8 */
|
|
--section-y:4rem; /* py-16 — content sections */
|
|
--section-y-lg:6rem; /* py-24 — landing sections */
|
|
--hero-y:5rem; /* py-20 … */
|
|
--hero-y-lg:8rem; /* … lg:py-32 */
|
|
--header-height:4rem;
|
|
}
|