/* --------------------------------------------------------------------------- HATCH — a second design system, alongside the first. Added 26 Aug 2026 for NEW work. The sixty pages already shipped keep the FLYING tokens in `_ds/flying-design-system-…/`; nothing here re-skins them. The two systems share a brand colour and almost nothing else. Of 184 tokens on one side and 147 on the other, exactly two names were defined by both: --ease-out different curves — FLYING (.20,.80,.20,1), HATCH (.16,1,.3,1) --gutter the same 24px, written as 1.5rem here and 24px there Both are renamed in THIS file, to `--hatch-ease-out` and `--hatch-gutter`, because the sixty pages that ship today read the other definitions. Lengths are in rem here to match the rule the rest of the build follows. `*{box-sizing:border-box}` was dropped from the original: `app.css` already sets it, and a token file should declare tokens. `test/guards.mjs` fails if the two systems ever define the same name again. Everything below is as authored, and is not edited by hand — see `docs/hatch/` for the guidelines, the component gallery and the sample screens it was published with. --------------------------------------------------------------------------- */ /* ============================================================ HATCH — design tokens v1.9 Primary #DDFF4F. Accents are translucent glass. Ink is a TEXT colour. It never fills a shape, never draws a border, and never draws a focus ring. There is no exception. Typography is specified separately and intentionally absent. ============================================================ */ :root{ /* --- Brand / primary — rationed ------------------------- */ --lime-50:#FBFFE8; --lime-100:#F5FFC4; --lime-200:#EDFFA1; --lime-300:#E9FF8C; --lime-400:#E4FF73; --lime-500:#DDFF4F; --lime-600:#D5FF26; --lime-700:#C3F200; --lime-800:#92B500; --lime-900:#5E7400; --brand:var(--lime-500); --brand-hover:var(--lime-600); --brand-edge:var(--lime-800); --brand-text:var(--lime-900); --on-lime:#1F1B24; /* text on lime — fixed in both themes */ /* Focus: a 1.5px hairline hugs the control, a 6px lime halo blooms outside it. Nothing lighter than --ring-line clears 3:1 against the halo — lime-800 is 2.2. */ --ring-line:var(--lime-900); --ring:0 0 0 1.5px var(--ring-line), 0 0 0 6px var(--brand-glow); --on-lime-2:rgba(31,27,36,.72); /* secondary text on lime */ --scrim:rgba(255,255,255,.55); --surface-modal:rgba(255,255,255,.86); --brand-glow:rgba(221,255,79,.55); /* --- Accent source hues — glass is mixed from these ------ */ --sprout-hue:143,215,99; --butter-hue:227,234,91; --mint-hue:116,224,224; --iris-hue:158,150,188; --sand-hue:198,178,166; --rose-hue:232,122,155; /* --- Glass alpha steps ---------------------------------- */ --a-wash:.14; /* large tiles, page-level washes */ --a-fill:.22; /* chips, badges, small surfaces */ --a-press:.32; /* hover and active on a glass fill */ --a-line:.42; /* borders and dividers */ /* --- Accent glass ---------------------------------------- */ --sprout-wash:rgba(var(--sprout-hue),var(--a-wash)); --sprout-fill:rgba(var(--sprout-hue),var(--a-fill)); --sprout-press:rgba(var(--sprout-hue),var(--a-press)); --sprout-line:rgba(var(--sprout-hue),var(--a-line)); --sprout-solid:rgb(var(--sprout-hue)); --sprout-deep:#3D6B22; --butter-wash:rgba(var(--butter-hue),var(--a-wash)); --butter-fill:rgba(var(--butter-hue),var(--a-fill)); --butter-press:rgba(var(--butter-hue),var(--a-press)); --butter-line:rgba(var(--butter-hue),var(--a-line)); --butter-solid:rgb(var(--butter-hue)); --butter-deep:#6B6B12; --mint-wash:rgba(var(--mint-hue),var(--a-wash)); --mint-fill:rgba(var(--mint-hue),var(--a-fill)); --mint-press:rgba(var(--mint-hue),var(--a-press)); --mint-line:rgba(var(--mint-hue),var(--a-line)); --mint-solid:rgb(var(--mint-hue)); --mint-deep:#136B6B; --iris-wash:rgba(var(--iris-hue),var(--a-wash)); --iris-fill-2:rgba(107,92,168,.20); --rose-fill-2:rgba(190,60,110,.20); --iris-fill:rgba(var(--iris-hue),var(--a-fill)); --iris-press:rgba(var(--iris-hue),var(--a-press)); --iris-line:rgba(var(--iris-hue),var(--a-line)); --iris-solid:rgb(var(--iris-hue)); --iris-deep:#453A73; --sand-wash:rgba(var(--sand-hue),var(--a-wash)); --sand-fill:rgba(var(--sand-hue),var(--a-fill)); --sand-press:rgba(var(--sand-hue),var(--a-press)); --sand-line:rgba(var(--sand-hue),var(--a-line)); --sand-solid:rgb(var(--sand-hue)); --sand-deep:#5B4E56; --rose-wash:rgba(var(--rose-hue),var(--a-wash)); --rose-fill:rgba(var(--rose-hue),var(--a-fill)); --rose-press:rgba(var(--rose-hue),var(--a-press)); --rose-line:rgba(var(--rose-hue),var(--a-line)); --rose-solid:rgb(var(--rose-hue)); --rose-deep:#8E2F4A; /* --- Neutrals (plum-cast, never grey, never brown) -------- */ --ink:#1F1B24; --ink-2:#3A3543; --ink-3:#5A5566; --ink-4:#8B8595; --ink-hue:31,27,36; --line:rgba(var(--ink-hue),.10); --line-strong:rgba(var(--ink-hue),.22); --canvas:#F7F6FA; /* --- Glass surfaces --------------------------------------- */ --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.55); --glass-sunken:rgba(var(--ink-hue),.04); --glass-hover:rgba(var(--ink-hue),.035); --glass-strong:rgba(255,255,255,.92); --brand-throw:rgba(146,181,0,.45); --glass-edge:rgba(255,255,255,.65); --blur:16px; --blur-lg:26px; --surface:rgba(255,255,255,.72); --surface-solid:#FFFFFF; /* --- Semantic — rose replaces the removed orange ---------- */ --ok:var(--sprout-deep); --ok-bg:var(--sprout-fill); --ok-line:var(--sprout-line); --warn:var(--butter-deep); --warn-bg:var(--butter-fill); --warn-line:var(--butter-line); --danger:var(--rose-deep); --danger-bg:var(--rose-fill); --danger-line:var(--rose-line); --info:var(--iris-deep); --info-bg:var(--iris-fill); --info-line:var(--iris-line); /* --- Space · 4px base ------------------------------------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px; --s-40:160px; /* --- Radius — moulded, never machined --------------------- */ --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:48px; --r-3xl:64px; --r-pill:999px; /* --- Elevation — long, soft, plum-tinted, never black ------ Blur is 2.5–3x the y-offset and alpha stays under .16, so a surface reads as floating rather than outlined. */ --sh-xs:0 2px 8px -3px rgba(var(--ink-hue),.05); --sh-sm:0 8px 28px -10px rgba(var(--ink-hue),.08), 0 2px 6px -3px rgba(var(--ink-hue),.04); --sh-md:0 18px 50px -14px rgba(var(--ink-hue),.10), 0 4px 14px -6px rgba(var(--ink-hue),.05); --sh-lg:0 34px 80px -22px rgba(var(--ink-hue),.13), 0 10px 28px -14px rgba(var(--ink-hue),.06); --sh-xl:0 54px 120px -34px rgba(var(--ink-hue),.16), 0 16px 44px -22px rgba(var(--ink-hue),.07); --sh-float:0 80px 160px -60px rgba(var(--ink-hue),.22), 0 30px 70px -40px rgba(var(--ink-hue),.10); --sh-inset:inset 0 2px 4px rgba(var(--ink-hue),.05); /* --- Texture — the hatch --------------------------------- A 45° rule fill. The second "ink" in the system: it marks the unearned, the projected and the not-yet-real. */ --hatch:repeating-linear-gradient(45deg,transparent 0 4px,rgba(var(--ink-hue),.15) 4px 5.5px); --hatch-soft:repeating-linear-gradient(45deg,transparent 0 5px,rgba(var(--ink-hue),.08) 5px 6.5px); --hatch-lime:repeating-linear-gradient(45deg,transparent 0 4px,rgba(146,181,0,.60) 4px 5.5px); /* --- Motion ------------------------------------------------ */ --dur-1:90ms; --dur-2:160ms; --dur-3:240ms; --dur-4:400ms; --ease:cubic-bezier(.2,.8,.2,1); --hatch-ease-out:cubic-bezier(.16,1,.3,1); --ease-key:cubic-bezier(.34,1.56,.64,1); /* --- Layout ------------------------------------------------ */ --max:1240px; --hatch-gutter:1.5rem; --sidebar:260px; } /* Solid fallbacks — composited values for engines without backdrop-filter */ @supports not (backdrop-filter:blur(1px)){ :root{ --glass:#FDFDFE; --glass-2:#FBFBFD; --surface:#FDFDFE; --sprout-fill:#E0EFD9; --butter-fill:#F3F3D7; --mint-fill:#DAF1F4; --iris-fill:#E3E1EC; --sand-fill:#ECE7E8; --rose-fill:#F4DBE5; --sprout-wash:#E8F2E5; --butter-wash:#F4F4E4; --mint-wash:#E5F3F6; --iris-wash:#EBE9F1; --sand-wash:#F0ECEE; --rose-wash:#F5E5ED; } } [data-theme="night"]{ /* alphas rise: a 14% wash reads as nothing over black */ --a-wash:.10; --a-fill:.16; --a-press:.24; --a-line:.34; --ink:#F2F0F6; --ink-2:#C9C5D4; --ink-3:#A19BAF; --ink-4:#7B7589; --ink-hue:0,0,0; /* shadows go true black on dark */ --canvas:#151219; --surface-solid:#221F26; --surface-modal:rgba(38,34,45,.90); --scrim:rgba(8,6,11,.62); --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.035); --glass-strong:rgba(255,255,255,.10); --glass-hover:rgba(255,255,255,.06); --glass-sunken:rgba(0,0,0,.30); --glass-edge:rgba(255,255,255,.09); --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); /* deep stops are dark — unreadable here. The solid step, added for categorical charts, is exactly the light mid-tone night needs. */ --sprout-deep:var(--sprout-solid); --butter-deep:var(--butter-solid); --mint-deep:var(--mint-solid); --iris-deep:var(--iris-solid); --sand-deep:var(--sand-solid); --rose-deep:var(--rose-solid); --brand-tint:rgba(221,255,79,.13); --brand-text:var(--lime-400); /* lime-900 is unreadable on black */ --brand-glow:rgba(221,255,79,.26); --ring-line:var(--lime-600); /* lime-900 is 1.6:1 on a dark halo */ --brand-throw:rgba(221,255,79,.30); /* the hatch inverts: rules are cut out of the dark, not drawn on light */ --hatch:repeating-linear-gradient(45deg,transparent 0 4px,rgba(255,255,255,.17) 4px 5.5px); --hatch-soft:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.09) 5px 6.5px); /* long throws need more alpha to register against a dark canvas */ --sh-xs:0 2px 8px -3px rgba(0,0,0,.40); --sh-sm:0 8px 28px -10px rgba(0,0,0,.50), 0 2px 6px -3px rgba(0,0,0,.30); --sh-md:0 18px 50px -14px rgba(0,0,0,.55), 0 4px 14px -6px rgba(0,0,0,.32); --sh-lg:0 34px 80px -22px rgba(0,0,0,.62), 0 10px 28px -14px rgba(0,0,0,.35); --sh-xl:0 54px 120px -34px rgba(0,0,0,.70), 0 16px 44px -22px rgba(0,0,0,.38); --sh-float:0 80px 160px -60px rgba(0,0,0,.80), 0 30px 70px -40px rgba(0,0,0,.45); --sh-inset:inset 0 2px 4px rgba(0,0,0,.35); } /* ---- The fill ladder ---------------------------------------- 1 lime the focus: one action, one chart series, "on" states 2 accent line 42% neutral data fills, secondary series, progress 2b accent solid categorical chart series only (source hue, full alpha) 3 accent fill 22% chips, badges, status backgrounds, tiles 4 hatch the remainder, the projected, the not-yet-real 5 raised white "you are here" - nav pills, segmented, current page 6 sunken 4% tracks, rails, table heads, code blocks Emphasis climbs toward lime. It never climbs toward black. Focus rings are --lime-900 everywhere: 5.3:1 on white, 4.7:1 on lime-500, 3.5:1 on the palest accent line. --lime-800 fails (2.4:1). ------------------------------------------------------------ */ /* ---- Controls: flat fill, compress on press, no shadow at rest ---- */ .key{ background:var(--key); color:var(--key-ink); border:1px solid var(--glass-edge); border-radius:var(--r-pill); box-shadow:none; transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .key:hover{ background:var(--key-hover); border-color:var(--line-strong); } .key:active{ transform:scale(.97); } .key:focus-visible{ outline:none; box-shadow:var(--ring); } /* The one rationed control. No border in any state; hover throws lime, not ink. */ .key--primary{ --key:var(--brand); --key-hover:var(--lime-600); --key-ink:var(--ink); border:0; padding-inline:23px; } .key--primary:hover{ box-shadow:0 12px 28px -12px var(--brand-throw); } .key--primary:focus-visible{ outline:none; box-shadow:var(--ring); } /* "You are here" - the same pill everywhere it appears */ .key--current{ background:var(--surface-solid); color:var(--ink); box-shadow:var(--sh-sm); border-color:transparent; } /* ---- The second ink: hatch fills ---- */ .hatch{ background-image:var(--hatch); } .hatch-soft{ background-image:var(--hatch-soft); } .hatch-lime{ background-color:var(--brand); background-image:var(--hatch-lime); } /* SVG equivalent, for charts: */ @media (prefers-reduced-motion:reduce){ .key,.key:active{ transform:none; transition-duration:.01ms; } } /* ---- Responsive floor ----------------------------------------- Grid and flex children need min-width:0. The default is auto, so a single wide child stops a column from ever shrinking — the most common cause of horizontal scroll on a phone. ---------------------------------------------------------------- */ .grid>*,.bento>*{min-width:0}