/* SIS DESIGN SYSTEM v1 · tokens * * The school's colours and measurements, and nothing that draws. Agreed 11 October 2026 by Core, * Technology and Learning Intelligence, after ten sites ended up running on copies of Technology's * stylesheet and drifting apart inside a week. * * HOW A SITE USES IT. Link this file and components.css from the pinned version, never from * "latest": * * * * * PINNING IS THE POINT. A change to v1 cannot break ten sites in the middle of a lesson, because v1 * does not change: a new look is v2 and each site moves when it chooses. LI proposed this and it is * the rule that makes the rest safe. * * THREE LAYERS, ONLY THE FIRST TWO SHARED: * tokens.css this file: colours, spacing, radii, type, the board * components.css the bar, buttons, cards, panels, menus, the scoring screens * the site layer each site's own, on top. LI's dark Lab and Technology's lesson look stay theirs. * * SIS Core, Sardinia International School. */ :root { /* red, derived */ --c-red: #af3631; --c-red-70: #c46f6a; --c-red-40: #d8a7a2; --c-red-15: #ead7d2; --c-red-on: #ffffff; /* orange, logo */ --c-orange: #c56035; --c-orange-70: #d38c6c; --c-orange-40: #e1b8a4; --c-orange-15: #edddd2; --c-orange-on: #0A0C11; /* yellow, logo */ --c-yellow: #e2a145; --c-yellow-70: #e7ba78; --c-yellow-40: #edd2aa; --c-yellow-15: #f1e7d5; --c-yellow-on: #0A0C11; /* green, logo */ --c-green: #617b30; --c-green-70: #8d9f69; --c-green-40: #b9c3a2; --c-green-15: #dee1d1; --c-green-on: #ffffff; --c-green-dark: #4d6226; /* logo dark green */ --c-green-on-light: #4d6226; /* text on a --c-green-15 tint: 5.1:1, passes AA */ /* blue, logo */ --c-blue: #244572; --c-blue-70: #627997; --c-blue-40: #a1adbc; --c-blue-15: #d5d9db; --c-blue-on: #ffffff; /* indigo, derived */ --c-indigo: #382d7b; --c-indigo-70: #70689e; --c-indigo-40: #a9a4c0; --c-indigo-15: #d8d5dd; --c-indigo-on: #ffffff; /* violet, derived */ --c-violet: #743a82; --c-violet-70: #9a72a2; --c-violet-40: #c1a9c3; --c-violet-15: #e1d7de; --c-violet-on: #ffffff; /* ── THE DOOR BLUE ───────────────────────────────────────────────────────────────────────────── DESIGN-PUPIL-PAGES.md specifies #e3e9f1 on #b7c4d6 for a set of equal choices. The components reached for --c-blue-15 and --c-blue-40, which are #d5d9db and #a1adbc: greyer, because they are tints of the logo blue rather than a blue-grey. On /student/ the doors read as grey, which Technology reported on 19 October. Named rather than reused, so a door is a door and the palette stays the palette. */ --door: #e3e9f1; --door-edge: #b7c4d6; --door-on: #244572; } /* THE TWO SCORING SYSTEMS, assigned in the confirmed order. * * Values: one tap is one point, no limit, house-point style. * Competencies: one tap is one ring, 1 to 7. The ring count IS the click count and the score. * Both use the same gesture as the behaviour circle, so a teacher learns it once and uses it * for three things. */ :root { --val-respect: var(--c-blue); --val-respect-on: var(--c-blue-on); --val-responsibility: var(--c-orange); --val-responsibility-on: var(--c-orange-on); --val-engagement: var(--c-green); --val-engagement-on: var(--c-green-on); --val-integrity: var(--c-yellow); --val-integrity-on: var(--c-yellow-on); --val-community: var(--c-indigo); --val-community-on: var(--c-indigo-on); --val-minus: #5C6B80; /* taking a point back is not a brand moment */ --comp-communication: var(--c-blue); --comp-critical: var(--c-red); --comp-autonomy: var(--c-yellow); --comp-contextual: var(--c-green); --comp-social: var(--c-indigo); --comp-research: var(--c-orange); /* An unfilled ring is the same colour at 15 per cent, so a competency at 2 of 7 still reads as * that competency rather than as a grey circle with two coloured bits. */ --ring-w: 3px; --ring-gap: 2.5px; } /* MEASUREMENTS. Shared because a card that is 12px round on one site and 8px on another reads as * two different products, and nobody can say why. */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* TOUCH. Boards are 2.5 m screens tapped by a teacher standing up, and phones are tapped by a * teacher holding one. 44px is the floor everywhere; 48 is the comfortable default. */ --tap: 48px; --tap-min: 44px; /* THE LAYERS RULE, Kiers's own and older than this package: a stacked panel takes a DIFFERENT * TONE and a TINY SHADOW. Not a border alone, which reads as a box rather than a layer. */ --layer-1: var(--panel, #EAE7DF); --layer-2: #ffffff; --shadow-1: 0 1px 2px rgba(20, 24, 31, .06); --shadow-2: 0 8px 24px rgba(20, 24, 31, .18); --type-xs: 11.5px; --type-sm: 13.5px; --type-md: 15px; --type-lg: 17px; --type-xl: 22px; --type-2xl: 28px; /* THE BIG THING: the one element a pupil came to the page for. DESIGN-PUPIL-PAGES.md's first rule is that it is the largest thing on the page, and the scale stopped at 28px, so there was nothing to use. Technology asked for it on 19 October while building the lesson page. */ --type-3xl: 40px; --lh-tight: 1.25; --lh: 1.5; --lh-loose: 1.6; --font: Barlow, "Segoe UI", system-ui, sans-serif; } /* THE BOARD, as a token rather than a fork. Technology drew this line on 11 October: the LOOK * generalises, the lesson engine's behaviour does not. B14 is 3414 x 1440 at 1.5x, so the threshold * is 2400px for "a room is reading this". * * Everything grows. Nothing new appears, and nothing private appears: what is hidden on a board is * decided by each screen, not here. */ @media (min-width: 2400px) { :root { --tap: 72px; --tap-min: 64px; --type-md: 22px; --type-lg: 26px; --type-xl: 34px; --type-2xl: 44px; --type-3xl: 64px; --sp-4: 22px; --sp-5: 32px; --sp-6: 44px; } } /* BARLOW, ONCE, with its licence beside it. Technology served a week of pages falling back to Segoe * UI because a stylesheet named Barlow and no font file existed anywhere. One copy, in one place, * that cannot drift back to Google Fonts. SIL Open Font License: fonts/OFL.txt. */ /* Barlow, self-hosted. No third-party font request: the design gate forbids a Google Fonts * link on any site, because it is a request to another company on every page load and the * licence travels with the files instead (fonts/OFL.txt). * * 20 October 2026: 600, 800 and the italics were added. Form Time used weight 800 in 179 * places and italics in 23, and was still loading Google Fonts because dropping the link * without these would have made every heading on that site visibly lighter overnight. * unicode-range is kept per subset, so a browser fetches latin-ext only when a page actually * uses a character that needs it. */ @font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/barlow-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/barlow-400i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/barlow-500i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/barlow-500i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/barlow-600i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/barlow-600i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/barlow-700i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/barlow-700i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Barlow; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-800i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-800i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── THE SURFACE TOKENS: FALLBACKS ONLY ─────────────────────────────────────────────────────────── components.css uses --panel, --line, --bg, --fg and --dim, and tokens.css defined NONE of them, so the components only worked where the host page happened to declare them. Technology found that on 19 October 2026: on /student/ the small print and the Italian were not dimmed, because gate.css has no --dim. ⚠ MY FIRST FIX BROKE LIVE LESSON PAGES. I declared them in :root, which has the same specificity as a site's own :root, so on any site that loads tokens.css AFTER its own stylesheet mine won by order. Technology's lesson panels turned white (#ffffff) where they had been beige (#EAE7DF), within an hour of Kiers approving that beige. Technology diagnosed it and proposed this fix. :where() has ZERO specificity, so these fill in only where a site defines nothing. A site that declares its own keeps them whatever the load order. A shared stylesheet must never outrank the site that adopts it: that is the whole bargain of adopting one. LIGHT ONLY, on purpose. There is no dark block here: dark is the site layer, as the note at the top of this file says. A site offering a dark style redefines these five and the components follow. Do not add a dark block here without telling every site. */ :where(:root) { --bg: #f7f6f1; /* the page behind everything */ --panel: #ffffff; /* a card or a panel sitting on the page */ --line: #dcd8cc; /* a hairline between things */ --fg: #1c2533; /* body text: near-black, never black, by Kiers's standing rule */ --dim: #5d6876; /* small print, the Italian, anything secondary */ }