/* ========================================================================== Insilico interactive report — design tokens Palette, neutrals, card and connector specs are taken from the 2024 ISM Design Kit (COLORS slide 29, Boxes and Connectors slides 45-46). Type is Inter, the face the PandaOmics Agent and inClinico Agent both ship, with the kit's Arial as the fallback. Values marked EXTRAPOLATED are not in the kit and are documented in METHOD.md. ========================================================================== */ :root { /* --- Brand primaries, exactly as published in the kit ------------------ */ --ism-green: #00A607; /* Insilico Medicine */ --ism-green-tint: #BAFFBD; --panda-teal: #01CB83; /* PandaOmics */ --panda-teal-tint: #C2FFE9; --bio-olive: #82AC3D; /* Biology42 */ --bio-olive-tint: #E7F0D6; --chem-blue: #0E8CFF; /* Chemistry42 */ --chem-blue-tint: #CFE8FF; --med-purple: #583BA8; /* Medicine42 */ --med-purple-tint: #DCD5F0; /* --- Kit neutrals ------------------------------------------------------ */ --rule: #E8E8E8; /* kit: card and box outlines, 0.75pt */ --connector: #C3C3C3; /* kit: all arrows and lines */ /* --- Reading surface --------------------------------------------------- White, like the products and the kit's slides. Cards separate from the page by the kit outline rather than by a tinted ground. */ --paper: #FFFFFF; --paper-sunk: #F4F6F4; /* wells, table zebra, inactive chips (EXTRAPOLATED) */ --card: #FFFFFF; /* kit node card fill */ /* --- Ink ramp (EXTRAPOLATED from the kit's #000000 on white) ----------- */ --ink: #101418; /* body text */ --ink-strong: #000000; /* kit value, display headings */ --ink-2: #333B42; /* secondary prose */ --ink-3: #5C666E; /* captions, labels, metadata */ --ink-4: #878F96; /* disabled, axis ticks */ /* --- Accent ------------------------------------------------------------ The brand green is the page's structural colour, as it is across every Insilico product: the masthead mark, section icons, eyebrows, links, active navigation and metric accents all take it. #00A607 on white is about 3.0:1, below the 4.5:1 needed for text, so wherever the accent carries words it darkens to --accent-ink; fills, marks and rules use the exact brand value. Because green also means "supports" in the evidence vocabulary below, every evidence judgement on the page is carried by a labelled chip — words first, colour second — so a green link and a green verdict cannot be confused by a reader who can read. */ --accent: var(--ism-green); --accent-ink: #046B08; /* 6.0:1 on white */ --accent-wash: #EFFAEF; --accent-tint: var(--ism-green-tint); /* --- Evidence direction ------------------------------------------------- Two hues carry judgement on this page and no more: the brand green, which in Insilico materials *is* the affirmative mark, and a claret against it (EXTRAPOLATED; the kit has no red). Every use of either carries a text label; the colour is reinforcement, never the sole carrier. Caution and flag are graphite, and that is a decision rather than a shortage of colours. They used to be an amber #9A6B12 and a wine #8C2F4E, which put four saturated hues on a page whose brand has one, and two of them appeared nowhere in the company's palette. Worse, the page never printed a key: a reader met a mustard rule and a wine rule side by side with nothing anywhere to say which was the more serious, so the colour was decoration wearing the clothes of information. They are also not directions. Supports and opposes say which way the evidence points; caution and flag say how hard to look at it, which is a degree and reads better as weight than as hue. So the two are one colour at two values — flag darker than caution — and the word beside them does the naming, as it already did. A page that runs nine of these now reads as a page with two opinions and some grey, which is what it is. */ --supports: var(--ism-green); --supports-ink: #046B08; --supports-wash: #EFFAEF; --opposes: #B3271E; --opposes-wash: #FCEFED; --caution: #6B6257; /* warm graphite, 5.9:1 on white */ --caution-wash: #F5F4F2; /* "The same grey, darker" is what the block above promises and what this line did not deliver. It was #3F4448, which is a cool grey — blue is its strongest channel — while caution above it is warm, with red strongest. On most of the page they are far enough apart that nobody could compare them, but the method section stacks a caution note directly above a flag note, and the reader met a brown bar and a blue-black one: two colours reading as two different meanings, over two headings that name no direction and so leave the colour to say it alone. Now literally the same hue and saturation as caution at a lower value (H 33°, S 10%, L 38% → 25%), which is the ramp the comment describes: one grey, twice, darker for the more serious of the two. 10.2:1 on white, so it also gains a little contrast over the colour it replaces. */ --flag: #464039; /* the same grey as caution, darker */ --flag-wash: #F3F2EF; /* and its wash follows it out of the blues */ --neutral-mark: #878F96; /* --- Categorical data: the product palette ------------------------------ Series take the kit's product primaries — Chemistry42 blue, PandaOmics teal, Medicine42 purple, Biology42 olive — which is how an Insilico chart is coloured. The brand green itself is not a series: it belongs to the chrome and to "supports", and a data series must not borrow either. */ --cat-1: #0E8CFF; --cat-2: #583BA8; --cat-3: #01CB83; --cat-4: var(--connector); --series-a: #0E8CFF; /* Chemistry42 blue */ --series-b: #01CB83; /* PandaOmics teal */ --series-c: #583BA8; /* Medicine42 purple */ --series-d: #82AC3D; /* Biology42 olive */ /* --- Tier scale, used by the indication charts -------------------------- A tier is a rank and the rank is an endorsement, so the scale is the brand green ordered by depth: Tier 1 darkest, Tier 4 the connector grey the kit already uses for "nothing to say". Depth survives greyscale and colour-blindness where hue does not. The steps are wide on purpose. They were #046B08, #00A607 and #5FBE63, three values within about a third of the lightness range, and at the 5.5px the scatter draws its points at they were one colour: a chart whose whole subject is which tier a disease falls in showed thirty-eight dots and no tiers. Ordering by depth only works if the reader can see the depth, so tier 1 is now nearly black-green, tier 3 nearly white-green, and the brand value sits between them. */ --tier-1: #02360A; --tier-2: #00A607; --tier-3: #9BDC9E; --tier-4: var(--connector); /* --- Development stage -------------------------------------------------- Phase 3 is further along than Phase 1, not better news, so stage wears the Chemistry42 blue (darkened to carry text), never the green. */ --stage-ink: #0A62BE; --stage-wash: #E9F4FF; /* --- Strength ramps ------------------------------------------------------ Confidence is not a direction, so the ramp carries no hue: filled dark, filled light, outline. It survives black-and-white printing. */ --strength-hi-ink: var(--ink-strong); --strength-hi-wash: #E5E8EA; --strength-mid-ink: var(--ink-2); --strength-mid-wash: var(--paper-sunk); /* --- Interface chrome ---------------------------------------------------- Links and active states are brand green, dark enough for text. The focus ring is azure so the browser's position marker never looks like a claim or a link. */ --link: var(--accent-ink); --link-wash: var(--accent-wash); --link-tint: var(--ism-green-tint); --focus: #0B57A8; /* --- Type ---------------------------------------------------------------- Inter is the typeface the PandaOmics Agent and inClinico Agent both ship; the kit's Arial is the metric-compatible fallback. One family for display, text and data — hierarchy is carried by size and weight, numerals go tabular via font-variant-numeric where they line up in columns. */ --font-display: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-text: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-data: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --step--2: 0.75rem; /* 12px — figure ticks, footnote marks */ --step--1: 0.875rem; /* 14px — captions, table cells, rail */ --step-0: 1rem; /* 16px — body */ --step-1: 1.1875rem; /* 19px — lead paragraph, h4 */ --step-2: 1.5rem; /* 24px — h3 */ --step-3: 2rem; /* 32px — h2 */ --step-4: 2.75rem; /* 44px — h1 */ --step-5: 3.75rem; /* 60px — display numbers */ --lh-tight: 1.08; --lh-snug: 1.32; --lh-body: 1.6; --measure: 70ch; /* --- Space, on a 4px base --------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* --- Card and connector geometry, from the kit ------------------------- */ --card-radius: 10px; --card-border: 1px solid var(--rule); --port-size: 7px; /* kit: 0.08in ellipse port at connector joins */ /* --- Motion. Transform and opacity only, so nothing triggers layout. --- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; /* Entrances get their own curve, and the difference between it and `--ease-out` above is the difference between a thing arriving and a thing drifting. `--ease-out` is close to a quadratic: it spends the middle of its run still visibly moving, which is right for a hover state covering three pixels and wrong for an entrance covering fourteen, where it reads as the page catching up with itself. This one is near-exponential — most of the distance is gone in the first third and the rest is a settle — so an element that travels further does not take longer to feel finished. */ --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); /* For a mark growing out of an axis. It differs from the entrance curve above by launching more slowly: at a seventh of the way through it is 0.192 of the distance behind — 77px on a 400px bar — and it does not catch up until about three quarters through. That is the right shape for something whose length is the reading, because a bar that is 49% grown after a twentieth of its duration has not been drawn so much as revealed, and the eye reads the final length without ever having watched it accumulate. The `1.02` control point looks like an overshoot and is not one. The curve peaks at 1.000028 — 0.015 of a pixel on the widest bar in this report — so nothing on this page ever exceeds its own value. That is the correct outcome and it must stay the correct outcome. For scale, a control point of 1.20 gives a real 1.25% overshoot and 1.30 gives 3.0%; at 3% the median fold-change chart draws a bar reading 0.50 out to 0.515 and pulls it back. A figure that states the wrong number for even one frame is indefensible in a report somebody forwards, so this is a floor, not a preference: a measured length must never exceed its own value. */ --ease-mark: cubic-bezier(0.32, 1.02, 0.36, 1); /* Entrance durations. Both are longer than the interface durations above and shorter than the 420ms the old blanket fade used, which is the wrong shape twice over: too slow for a block, and far too fast for a chart with fifty marks to place. Motion is only legible when its length matches how much there is to see. */ --dur-enter: 320ms; --dur-mark: 520ms; /* How far apart two things in the same group start. Below about 40ms a sequence reads as one simultaneous event with a soft edge; above about 90ms the reader is waiting for the last of it. 55ms sits in the middle of that window, which is where a step wants to be: four steps of a method are four things, and the reader should be able to count them. */ --stagger: 55ms; /* Deliberately below that window, and the two numbers are not in disagreement — they answer different questions. A chart's marks are not a list of things to be counted one at a time; forty bars arriving as forty separate events is a queue, and the reader stops reading the chart and starts waiting for it. At 26ms a row of marks reads as a single wipe with direction, which is the only thing the sequence needs to carry. The sub-threshold value is the point, not an oversight. */ --stagger-mark: 26ms; --rail-w: 216px; --shell-max: 1320px; } /* Reduced motion zeroes the clocks rather than unpicking the rules, so every transition and every keyframe still runs — instantly. That is deliberate: a rule switched off has to be switched off correctly in every one of the thirty-odd places it appears, and one missed leaves a reader who asked for stillness watching the only thing on the page that still moves. A duration of zero cannot be got wrong. The one thing a zero duration does not stop is a keyframe with a delay, which would still hold its first frame for the length of the delay. The stagger steps go to zero here for that reason, not for tidiness. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-enter: 0ms; --dur-mark: 0ms; --stagger: 0ms; --stagger-mark: 0ms; } }