/* ========================================================================== 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 PandaClaw and ClinicoClaw products 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 PandaClaw and ClinicoClaw products 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; --rail-w: 216px; --shell-max: 1320px; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }