/* ============================================================================= agDiagrams.css The visual identity for the standalone SVG diagrams in diagrams/. Linked from inside each .svg file, exactly the way an HTML page links CSS: That single line is the whole point. Nothing about a diagram's appearance lives in the .svg file: it carries geometry and semantic class names only, and every colour, weight, radius and font comes from here. Change this file and every diagram in the repository changes with it, including ones drawn years earlier. ----------------------------------------------------------------------------- WHAT MAKES A SET OF DIAGRAMS LOOK PROFESSIONAL Not the palette. The palette is the easy half. What separates a designed set from an amateur one is HIERARCHY: in a good diagram most of the drawing is quiet and only the subject is at full strength. Amateur diagrams draw everything at the same weight, so the eye has nowhere to go. That is why the NEUTRALS below matter more than the colours, and why they are named for their job (ink, muted, faint, ghost) rather than numbered. Reach for them constantly. A diagram that is all ink is a diagram with no subject. The other half is consistency of the things nobody lists: one line weight doing most of the work, one corner radius, one arrowhead, one label size. Those are all set here, once. ----------------------------------------------------------------------------- THE RULE THAT MATTERS WHEN DRAWING An inline style beats a stylesheet. Inkscape writes style="fill:#000000" onto everything it draws WITHOUT BEING ASKED, and any object carrying one ignores every rule in this file - the diagram then looks exactly as if the stylesheet were not there. In Fill & Stroke, use the "?" (unset) button rather than picking a colour. ----------------------------------------------------------------------------- THE VOCABULARY IS SHARED WITH THE DEMOS agTeachingDemos.css is imported below, so a diagram on a slide and an interactive demo two slides later are drawn from one set of definitions. Its classes are all available here: materials (.ag-metal, .ag-water, .ag-brick, .ag-wood ...), arrows (.ag-heat-arrow), graphs (.ag-axis, .ag-gridline), particles (.ag-particle). Those material colours are the PHYSICS palette - a shape is grey because it is steel. The palette in this file is the SCHEMATIC palette - a box is blue because it is not the green one. Keep them apart: a diagram mixing "blue means category A" with "copper means copper" teaches the reader that colour means nothing. ========================================================================== */ @import url("agTeachingDemos.css"); /* ----------------------------------------------------------------------------- 1. THE BOX ----------------------------------------------------------------------------- Every diagram is drawn on the same canvas: viewBox="0 0 1200 675" (16:9) Not "the default", in the sense of a starting suggestion. THE box. Use it for everything unless the content is genuinely a different shape. Why 16:9: it matches the slide canvas, and at full width on A4 (160mm of text inside 25mm margins) it comes out about 90mm tall - a sensible figure that does not dominate the page. Why the same one every time: a set of diagrams that share a frame reads as a set. Vary the box per diagram and they stop looking related, however carefully the colours match. There is a second, more mechanical reason - stroke widths and font sizes are in user units, so a diagram 600 wide renders every line at double the apparent weight - but the first reason is the one that matters. A CRAMPED DRAWING IS NOT A REASON TO CHANGE THE BOX. It is almost always a reason to simplify the drawing, or to split it across two. Reaching for a taller box is the easy way out and it costs the set its consistency. ----------------------------------------------------------------------------- THE MENU Four sizes exist. The first is not first among equals - leaving it needs a reason you could say out loud, about the SHAPE of the content, not about having drawn something too big. 1200 x 675 <<< THE DEFAULT. Full slide width, or the full text width of an A4 page. Use this. 600 x 675 Half width - one side of a two-column slide. 1200 x 400 Long and thin - a timeline, a spectrum, a sequence. 600 x 1000 Tall and narrow - a vertical stack, strata, a process running down the page. THE WIDTH IS NOT A FREE CHOICE, and this is the part that catches people. It is 1200 for a diagram displayed at full width and 600 for one displayed at half width, because that is exactly what keeps the apparent line weight the same in both. Stroke widths are in user units: a 1200-wide viewBox shown in a half-width column is scaled by a half, so every line renders at half the thickness of every other diagram in the set. Matching the viewBox width to the display width is what makes a 2-unit stroke mean one thing everywhere. So: width follows where the diagram will sit. Height follows the content. The two unusual shapes are approximate on this point - a very tall diagram is limited by the height of the slide rather than its width, so it renders somewhat smaller and its lines a little finer. Live with it, or promote the important strokes to .ag-d-heavy. A NOTE ON THE HALF-WIDTH SIZE. It exists, and it should be rare. Columns render badly on a phone, where they stack and the pairing that justified them disappears; in written notes a figure wants explanation above and below it rather than beside it; and in a lecture the thing sitting next to the diagram should usually be your voice. Reach for 1200 x 675 and talk over it. ----------------------------------------------------------------------------- */ :root { /* The ground the diagram sits on. Warm off-white rather than pure white: the same drawing on #ffffff reads harder and colder, which is most of the difference between "designed" and "drawn in PowerPoint". Set this to transparent to let the host page show through - one value, every diagram, retrospectively. That is the whole reason the background is a classed rect rather than a fill attribute. */ --ag-d-ground: #faf8f4; /* Corner radius of the diagram's own ground. rx is a CSS geometry property in SVG 2, so this really does control the corners of every diagram from here - the same mechanism .ag-particle already uses to set its radius from CSS rather than from an r="" attribute. */ --ag-d-ground-radius: 14px; /* The hairline round the ground. Without it a cream box on a cream page is invisible; the card only reads because ground, border and page are three slightly different things. */ --ag-d-ground-border: #eae6df; /* Corner radius for boxes DRAWN INSIDE the diagram - the rounded rectangles that hold labels. Softer than a sharp corner, nowhere near a pill. */ --ag-d-radius: 10px; } /* The diagram's ground. First element in every file: */ .ag-d-ground { fill: var(--ag-d-ground); stroke: var(--ag-d-ground-border); stroke-width: 1px; rx: var(--ag-d-ground-radius); } /* ----------------------------------------------------------------------------- 2. NEUTRALS - THE HIERARCHY ----------------------------------------------------------------------------- The most used part of this file. Named for the job, not the lightness, because the name is the instruction: ink the subject. What the diagram is ABOUT. muted supporting structure that still needs reading. faint context. Present, not competing. ghost scaffolding, repetition, "there is more of this". hairline separators and light borders. A diagram where everything is ink has no subject. If in doubt, draw it faint and promote only what the sentence you are saying out loud refers to. ----------------------------------------------------------------------------- */ :root { --ag-d-ink: #1c2733; /* same ink as the demos framework */ --ag-d-muted: #45535f; --ag-d-faint: #93a0ab; --ag-d-ghost: #c9d1d8; --ag-d-hairline: #e4e8eb; /* Line weights. THREE, and they are not equal citizens: "regular" should carry something like nine tenths of every drawing. Heavy is for the one thing being emphasised, fine for hatching, ticks and construction. */ --ag-d-sw-fine: 1px; --ag-d-sw-regular: 2px; --ag-d-sw-heavy: 3.5px; } /* Point the shared demo variables at the diagram palette, rather than redefining .ag-line-thin and friends here. Overriding the variable keeps one definition of the rule and lets diagrams and demos share it. */ :root { --ag-c-line: var(--ag-d-ink); --ag-sw-thin: var(--ag-d-sw-fine); --ag-sw-medium: var(--ag-d-sw-regular); --ag-sw-thick: var(--ag-d-sw-heavy); } /* Each neutral does two things. On its own it strokes a shape. Stacked on a role from section 3 (class="ag-d-box ag-d-ghost", "ag-d-connector ag-d-muted") it acts like a HUE, setting --ag-d-h-base so the role paints in that grey. The second half is not optional. These rules come BEFORE the roles in the file, and a role sets its own stroke, so on a stacked element the role wins and the grey is silently ignored - every "quiet" box drew in ink, including the guide's own hierarchy example. Found 2026-09-28 drawing the cfd-workflow series. Going through the variable avoids depending on source order at all. */ .ag-d-ink { --ag-d-h-base: var(--ag-d-ink); stroke: var(--ag-d-ink); fill: none; } .ag-d-muted { --ag-d-h-base: var(--ag-d-muted); stroke: var(--ag-d-muted); fill: none; } .ag-d-faint { --ag-d-h-base: var(--ag-d-faint); stroke: var(--ag-d-faint); fill: none; } .ag-d-ghost { --ag-d-h-base: var(--ag-d-ghost); stroke: var(--ag-d-ghost); fill: none; } .ag-d-fill-ink { fill: var(--ag-d-ink); stroke: none; } .ag-d-fill-muted { fill: var(--ag-d-muted); stroke: none; } .ag-d-fill-faint { fill: var(--ag-d-faint); stroke: none; } .ag-d-fill-ghost { fill: var(--ag-d-ghost); stroke: none; } /* ----------------------------------------------------------------------------- 3. HOW COLOUR IS APPLIED - two classes, not thirty-six ----------------------------------------------------------------------------- A shape takes a ROLE class saying how it is painted, and a HUE class saying which colour to paint it: policy Two short class names instead of one long one per combination, and both are easy to type into Inkscape's XML editor. Each hue sets three variables, and the ROLES below decide which gets used: --ag-d-h-tint pale, for large fills --ag-d-h-base the colour itself, for strokes and solid shapes --ag-d-h-shade dark, for outlines on a tint and text sitting on it A tint fill with a base stroke and shade text is a combination you can use without checking the contrast every time. ----------------------------------------------------------------------------- */ /* -- Roles ----------------------------------------------------------------- */ /* A filled, outlined, rounded box - the workhorse of any schematic. */ .ag-d-box { fill: var(--ag-d-h-tint, var(--ag-d-hairline)); stroke: var(--ag-d-h-base, var(--ag-d-ink)); stroke-width: var(--ag-d-sw-regular); rx: var(--ag-d-radius); } /* The same paint as .ag-d-box, for anything that is not a rounded rectangle - circles, ellipses, polygons, free paths. Kept separate rather than dropping rx from .ag-d-box, because a rounded box is the commonest shape in a schematic and should not have to ask for its corners. */ .ag-d-shape { fill: var(--ag-d-h-tint, var(--ag-d-hairline)); stroke: var(--ag-d-h-base, var(--ag-d-ink)); stroke-width: var(--ag-d-sw-regular); } /* Solid, no outline. */ .ag-d-solid { fill: var(--ag-d-h-base, var(--ag-d-ink)); stroke: none; } /* Stroke only - connectors, rules, outlines. */ .ag-d-line { fill: none; stroke: var(--ag-d-h-base, var(--ag-d-ink)); stroke-width: var(--ag-d-sw-regular); stroke-linecap: round; stroke-linejoin: round; } /* Text in the hue (.ag-d-label-hue) is also a role, but its rule lives at the END of section 4, not here - see the note there on why its position in the file matters. */ /* Weight modifiers, stackable on any of the above. */ .ag-d-fine { stroke-width: var(--ag-d-sw-fine); } .ag-d-heavy { stroke-width: var(--ag-d-sw-heavy); } .ag-d-dashed { stroke-dasharray: 7 5; } /* -- The three core colours ------------------------------------------------ Reused constantly, and that reuse is what creates the identity. Reach for these first and only leave them when the diagram genuinely needs more. Blue, terracotta and green are deliberately muted - nothing here is a pure hue, which is most of what separates a designed palette from a default one. Violet is deliberately NOT one of the three: it belongs to the slide chrome (headings, keypoints), and diagrams competing with it would muddy both. If you would rather tie diagrams to the deck, swap one of these for the Sheffield violet - it is three lines. -------------------------------------------------------------------------- */ .ag-d-blue { --ag-d-h-tint: #dce7f3; --ag-d-h-base: #4a7ebb; --ag-d-h-shade: #2b4d78; } .ag-d-terracotta { --ag-d-h-tint: #f6e2d8; --ag-d-h-base: #c4653c; --ag-d-h-shade: #8a4527; } .ag-d-green { --ag-d-h-tint: #dcebdf; --ag-d-h-base: #5a8f63; --ag-d-h-shade: #35603d; } /* -- Highlight -------------------------------------------------------------- ONE per diagram, and it is the only thing wearing it. Its entire power is scarcity: the moment two things are pink, neither is emphasised. It is a vivid colour in an otherwise muted palette for exactly that reason, and it appears nowhere else in the system, so it can never be mistaken for a category. -------------------------------------------------------------------------- */ .ag-d-highlight { --ag-d-h-tint: #fbdcec; --ag-d-h-base: #dc2a7f; --ag-d-h-shade: #961854; } /* -- The twelve specific hues ----------------------------------------------- For DEPICTION rather than distinction: when you draw a Ferrari it has to be red, and a lemon has to be yellow. Accuracy beats consistency here, which is exactly why these are kept separate from the three core colours above. Do not use these to differentiate parts of a schematic. That is what the core three are for, and a schematic wearing eight hues has no identity. -------------------------------------------------------------------------- */ .ag-d-red { --ag-d-h-tint: #f7dcdc; --ag-d-h-base: #b83d3d; --ag-d-h-shade: #7d2626; } .ag-d-orange { --ag-d-h-tint: #fce3d0; --ag-d-h-base: #d97a2b; --ag-d-h-shade: #94501a; } .ag-d-amber { --ag-d-h-tint: #fbeecd; --ag-d-h-base: #c99a28; --ag-d-h-shade: #8a6817; } .ag-d-olive { --ag-d-h-tint: #eaecd2; --ag-d-h-base: #8a9440; --ag-d-h-shade: #5b632a; } .ag-d-lime { --ag-d-h-tint: #e2efd2; --ag-d-h-base: #6f9e42; --ag-d-h-shade: #47692a; } .ag-d-teal { --ag-d-h-tint: #d5eae8; --ag-d-h-base: #3f8c85; --ag-d-h-shade: #265c57; } .ag-d-cyan { --ag-d-h-tint: #d6e9f0; --ag-d-h-base: #3d87a6; --ag-d-h-shade: #255a70; } .ag-d-indigo { --ag-d-h-tint: #dcdff0; --ag-d-h-base: #4f5aa8; --ag-d-h-shade: #313a73; } .ag-d-violet { --ag-d-h-tint: #e4dcf0; --ag-d-h-base: #6b4f9e; --ag-d-h-shade: #432f68; } .ag-d-magenta { --ag-d-h-tint: #f2daea; --ag-d-h-base: #a2458a; --ag-d-h-shade: #6d2a5c; } .ag-d-brown { --ag-d-h-tint: #ece0d4; --ag-d-h-base: #8a6244; --ag-d-h-shade: #5c3f2b; } .ag-d-slate { --ag-d-h-tint: #e2e6ea; --ag-d-h-base: #5f7183; --ag-d-h-shade: #3c4854; } /* ----------------------------------------------------------------------------- 4. TEXT ----------------------------------------------------------------------------- One size for nearly everything. Labels on these diagrams should be quiet and small with air around them - text set large is the fastest way to make a diagram look like a poster. Sizes are in user units, which is why section 1 insists the viewBox width stays at 1200: change the width and every label changes apparent size. ----------------------------------------------------------------------------- */ :root { --ag-d-fs-label: 22px; /* the default - almost everything */ --ag-d-fs-small: 17px; /* annotations, axis ticks, asides */ --ag-d-fs-title: 28px; /* a heading INSIDE a diagram; usually unnecessary */ } svg { font-family: var(--ag-font-ui); } text { font-family: var(--ag-font-ui); font-size: var(--ag-d-fs-label); fill: var(--ag-d-ink); stroke: none; } .ag-d-label { font-size: var(--ag-d-fs-label); fill: var(--ag-d-ink); } .ag-d-label-small { font-size: var(--ag-d-fs-small); fill: var(--ag-d-muted); } .ag-d-label-title { font-size: var(--ag-d-fs-title); fill: var(--ag-d-ink); } /* Quiet text, for anything that should not compete. */ .ag-d-label-faint { fill: var(--ag-d-faint); } /* Text in the hue. Labelling a thing in the colour of the thing it names is one of the cheapest and most effective conventions available - it removes the need for a legend entirely. IT MUST STAY BELOW .ag-d-label. Both are single-class selectors, so when one element carries both (class="ag-d-label-hue ag-d-blue ag-d-label", to get the hue AND the label size) the rule LATER IN THE FILE wins the fill. This rule used to sit in section 3, above .ag-d-label, and every hue label silently rendered in ink - found 2026-09-28 when cfd-stack.svg was drawn, and it had been affecting the conservation diagrams since they were made. */ .ag-d-label-hue { fill: var(--ag-d-h-base, var(--ag-d-ink)); stroke: none; } /* Maths variables set in italic serif, the way they appear in print. */ .ag-d-math { font-family: Georgia, "Times New Roman", serif; font-style: italic; } /* ----------------------------------------------------------------------------- 5. ARROWS ----------------------------------------------------------------------------- A connector is a stroked path plus a SEPARATE filled head, rather than an SVG marker. Browsers cannot reliably recolour marker content from CSS, which would break the whole point of this file - the same reasoning already recorded for the heat arrows in agTeachingDemos.css. One head shape, one size, everywhere. Copy the polygon below and rotate it; consistent arrowheads are a surprisingly large part of looking deliberate. ----------------------------------------------------------------------------- */ .ag-d-connector { fill: none; stroke: var(--ag-d-h-base, var(--ag-d-ink)); stroke-width: var(--ag-d-sw-regular); stroke-linecap: round; } .ag-d-arrowhead { fill: var(--ag-d-h-base, var(--ag-d-ink)); stroke: none; }