/* * AIMS look and feel for Outline 1.10.1 (docs/look-and-feel.md, part 2, #62), served by * Nginx at /aims/aims.css and linked into every Outline page (nginx/intra-outline.conf). * Colours are tokens of the AIMS Design System version 4 (tokens.json version 4, SHA-256 * 0e64a043e4f709967f758d2f6b41757cb722abd482bf254e12f41a5f1cfd462e, #91; the table of * docs/look-and-feel.md), written only in the two blocks of custom properties below; the * one value outside version 4 is the Projects square (docs/look-and-feel.md, deviations). * scripts/test_aims_css.py checks the values and the contrast of the text pairs. * * Stable hooks it relies on (Outline v1.10.1 source): * :root:has(meta[name="color-scheme"][content="dark"]) app/components/PageTheme.ts * #sidebar app/components/Sidebar/Sidebar.tsx * #sidebar [aria-current="page"] app/components/Sidebar/components/NavLink.tsx * a[href*=""] span[aria-hidden="true"] svg SidebarLink.tsx (IconWrapper), one rule per collection; * an icon of the picker's library (svg.svg-inline--fa) * sits one span deeper (checked on the intranet, #62) * .ProseMirror, .notice-block, .table-wrapper shared/editor/styles/EditorStyleHelper.ts * [aria-label="Document title"] DocumentTitle.tsx (translated: English UI only) * a:not([class]), .ProseMirror-selectednode shared/styles/globals.ts, editor Styles.ts * [role="main"] app/components/Layout.tsx: the page, without the * sidebars (comments keep Outline's font) * [role="main"] h1 app/components/Heading.ts (styled.h1): every page * title (home, a collection, Drafts, Settings...) * [role="main"] form[action="/search"] input[type="search"] * app/scenes/Search/Search.tsx, * app/scenes/Search/components/SearchInput.tsx * /fonts/Inter.var.woff2, /fonts/Inter-italic.var.woff2 * Outline's own font files (200 on 2026-10-01): * the document text's Inter (#91) * [role="main"] a[aria-current="page"][href*="-/"] * app/components/Tabs/Tab.tsx (react-router NavLink): * a collection's active tab, one rule per collection * #sidebar a[href$="-"] SidebarLink.tsx: the collection's own link * (a starred collection has a second one) * !important only where Outline sets the value inline: the active sidebar item * (SidebarLink.tsx activeStyle), the collection icon fill (svg fill attribute) and the * size of a library icon (inline width and height of 16px). * A new collection needs its own square rule and its own active-collection rule below (by * its urlId); without them its icon is drawn in ink-inverse with no square and its sidebar * link is not marked on its page. */ /* Fonts: same origin; Montserrat from branding/fonts/ (versioned names, README.md there) */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-600-normal-5.3.0.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: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-ext-600-normal-5.3.0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-latin-700-normal-5.3.0.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: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-latin-ext-700-normal-5.3.0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter from Outline's own files, as the reading layer declares it (#91) */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Inter.var.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/Inter-italic.var.woff2") format("woff2"); } :root { --aims-surface-accent: #eef3fd; --aims-ink: #1b1b1b; --aims-ink-inverse: #ffffff; --aims-brand-navy: #15316e; --aims-brand-blue: #2056dd; --aims-sidebar-bar: #8a4a00; --aims-focus: #2056dd; --aims-surface-sidebar: #fbfbfd; --aims-sidebar-ink: #1b1b1b; --aims-sidebar-muted: #5b6474; --aims-sidebar-hover: #f1f4f9; --aims-sidebar-active: #eef2fb; --aims-c-projects: #0070c0; --aims-c-quality: #7030a0; --aims-c-datascience: #00755c; --aims-c-technical: #2477b4; --aims-c-meetings: #1b639c; --aims-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif; --aims-font-ui: "Inter", system-ui, sans-serif; } :root:has(meta[name="color-scheme"][content="dark"]) { --aims-surface-accent: #16213a; --aims-ink: #eef1f6; --aims-ink-inverse: #0b0f18; --aims-brand-navy: #a9c1f5; --aims-brand-blue: #8aa9ff; --aims-sidebar-bar: #f5a623; --aims-focus: #8aa9ff; --aims-surface-sidebar: #0f1420; --aims-sidebar-ink: #eef1f6; --aims-sidebar-muted: #9aa6b8; --aims-sidebar-hover: #161d2b; --aims-sidebar-active: #1a2336; --aims-c-projects: #5fa8ee; --aims-c-quality: #b47ee0; --aims-c-datascience: #3fbf9a; --aims-c-technical: #4d88b8; --aims-c-meetings: #6ea7d4; } /* Type */ /* Outline's own styles come after this sheet (styled-components inserts them later), so every page rule carries :root to outweigh them at their specificity: a (0,0,1), editor rules . h1 / a (0,1,1), notices up to (0,3,0). Inter for the editor text of the page only, a document or a collection's overview (owner decision of 2026-10-02, #91, replacing Calibri/Carlito of #65): Outline's interface, comments included, keeps Outline's own font. Montserrat in brand-navy for the headings, the document title, the page titles and the search box. */ :root [role="main"] .ProseMirror { font-family: var(--aims-font-ui); } :root .ProseMirror h1, :root .ProseMirror h2, :root .ProseMirror h3, :root .ProseMirror h4, :root [aria-label="Document title"], :root [role="main"] h1, :root [role="main"] form[action="/search"] input[type="search"] { font-family: var(--aims-font-display); color: var(--aims-brand-navy); } /* Links: Outline draws them in the accent in the light theme (shared/styles/globals.ts, theme.link); here brand-blue in both themes. Links with their own class keep theirs. */ :root a:not([class]), :root .ProseMirror a { color: var(--aims-brand-blue); } /* Selected blocks in the editor (theme.selected = Outline's accent, #2056DD since #91): the focus token, cobalt since version 4 (6.1:1 on Outline's background, 8.1:1 in the dark theme, where the accent itself would be 3.04:1). */ :root .ProseMirror .ProseMirror-selectednode { outline-color: var(--aims-focus); } :root .ProseMirror li.ProseMirror-selectednode::after { border-color: var(--aims-focus); } /* Tables: navy header rule */ :root .ProseMirror .table-wrapper table tr:first-child th, :root .ProseMirror .table-wrapper table tr:first-child td { border-bottom: 2px solid var(--aims-brand-navy); } /* Notices: the information notice in surface-accent with a navy edge; tip, warning and success keep Outline's colours, which carry their meaning. */ :root .ProseMirror .notice-block:not(.tip):not(.warning):not(.success) { background: var(--aims-surface-accent); border-left-color: var(--aims-brand-navy); color: var(--aims-ink); } /* Focus ring on page surfaces */ :focus-visible { outline: 2px solid var(--aims-focus); outline-offset: 2px; } /* Outline's own global `:focus-visible` (its accent, offset -1px) comes later in the page with the same specificity and wins: the colour is set again with a higher one, so the ring is `focus` in both themes (#166); Outline keeps its width and offset. Outline's components with a rule of their own keep their colour: the skip link (`:focus`, the accent), a highlighted menu item (its fill's colour) and a danger button (`!important`) */ :root :focus-visible { outline-color: var(--aims-focus); } /* Sidebar: drawn as the reading layer draws its own, with the same version 4 tokens, light and dark (surface-sidebar, sidebar-ink, sidebar-muted, sidebar-hover, sidebar-active with a bar); docs/look-and-feel.md, part 2, "Since #91". The active item's bar (sidebar-bar) is accent-orange-ink in the light theme (6.1:1 on sidebar-active; accent-orange would be 2.4:1) and accent-orange in the dark theme (7.8:1): owner decision of 2026-10-02 */ #sidebar { background: var(--aims-surface-sidebar); color: var(--aims-sidebar-ink); } #sidebar a, #sidebar button, #sidebar [role="button"] { color: var(--aims-sidebar-ink); } #sidebar h3, #sidebar h3 button { color: var(--aims-sidebar-muted); } /* Outline's secondary sidebar text (textTertiary, sidebarText): the sidebar's tokens only */ #sidebar span, #sidebar div { color: inherit; } #sidebar a:hover, #sidebar button:hover { background: var(--aims-sidebar-hover); } #sidebar [aria-current="page"] { color: var(--aims-sidebar-ink) !important; background: var(--aims-sidebar-active) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--aims-sidebar-bar); } /* the same colour as `:root :focus-visible` (#166), kept for the sidebar's own rules */ #sidebar :focus-visible { outline-color: var(--aims-focus); } /* Collection icons on a square of their colour (owner decision of 2026-09-24) */ #sidebar a[href^="/collection/"] span[aria-hidden="true"] svg { border-radius: 4px; transform: scale(0.8); } #sidebar a[href^="/collection/"] span[aria-hidden="true"] svg, #sidebar a[href^="/collection/"] span[aria-hidden="true"] svg * { fill: var(--aims-ink-inverse) !important; } /* A library icon is drawn 16px with no inner margin: the same 24px square as the others */ #sidebar a[href^="/collection/"] span[aria-hidden="true"] svg.svg-inline--fa { box-sizing: border-box; width: 24px !important; height: 24px !important; padding: 4px; } #sidebar a[href*="-vaL4jrO2hO"] span[aria-hidden="true"] svg { background: var(--aims-c-projects); } #sidebar a[href*="-0BeYdIo8j2"] span[aria-hidden="true"] svg { background: var(--aims-c-quality); } #sidebar a[href*="-jvN6jH5RrI"] span[aria-hidden="true"] svg { background: var(--aims-c-datascience); } #sidebar a[href*="-tzlNxORlZw"] span[aria-hidden="true"] svg { background: var(--aims-c-technical); } #sidebar a[href*="-rdbj5GEdui"] span[aria-hidden="true"] svg { background: var(--aims-c-meetings); } /* The collection being viewed: Outline marks its active tab (aria-current) but no sidebar item, so its sidebar link gets the active bar; one rule per collection, by its urlId (#65) */ :root:has([role="main"] a[aria-current="page"][href*="-vaL4jrO2hO/"]) #sidebar a[href$="-vaL4jrO2hO"], :root:has([role="main"] a[aria-current="page"][href*="-0BeYdIo8j2/"]) #sidebar a[href$="-0BeYdIo8j2"], :root:has([role="main"] a[aria-current="page"][href*="-jvN6jH5RrI/"]) #sidebar a[href$="-jvN6jH5RrI"], :root:has([role="main"] a[aria-current="page"][href*="-tzlNxORlZw/"]) #sidebar a[href$="-tzlNxORlZw"], :root:has([role="main"] a[aria-current="page"][href*="-rdbj5GEdui/"]) #sidebar a[href$="-rdbj5GEdui"] { color: var(--aims-sidebar-ink); background: var(--aims-sidebar-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--aims-sidebar-bar); }