The Mark
Every site in the fleet is a gold C with exactly one character beside it. The hub keeps the bare C and no character — that is what makes it the parent rather than one more tool. All 38 are generated and never hand-drawn: marks/marks.py in this repo draws them, deploy.py copies each to the paths its site actually looks for one at, and verify.py follows every site’s own <link rel=icon> and asserts the bytes at the end of it are that site’s own mark.
- Bare ring
- r 34.81 · stroke 16.38
- Lettered ring
- r 25.38 · stroke 11.94
- Character box
- x 69.71–93.00
- Grid
- 6 × 10 · module 3.88
- Stem
- 2 modules · 7.76
- Ink
- #eab308 on transparency
dcm’s E and topo’s T — and both come out byte-identical from the generator, so it cannot quietly redraw a logo already in circulation.The character is a bitmap on a 6 × 10 grid of half-modules, stems two modules wide. Three columns — the module the shipped E and T are drawn on — is too coarse to keep an alphabet apart: on it A, K and M each sit one cell from H. Halving the module fixes that while leaving those two marks unchanged. Diagonals are stepped rather than drawn, because at 32px a stepped module stays crisp where a hairline diagonal turns to porridge.
- Red Hat Display 900
- 77 / 700 = 0.11
- This character
- 7.76 / 38.82 = 0.20
- The ring’s own arc
- 11.94 / 62.7 = 0.19
dcm is E for Editor, which is what keeps it off the D pile; media is a play triangle because M cannot be drawn six columns wide, its vee having no room to narrow; and cybercity is Y, unclaimed and sitting in its own name. law is the weakest glyph in the set — the box is three stems wide, so anything needing two separated uprights reads as one mass with a slot cut in it.Color Tokens
One accent — Sharp Gold #eab308 — on a near-black stack. Everything else is a neutral or a translucent tint of the accent. Click a swatch to copy its value.
--text-sec is #a3a3a3, for secondary prose; --text-muted is #8a8a8a, for labels. Many sites used --text-muted for #a3a3a3 and --text-dim for #8a8a8a: a site that moves to carino-ui.css renames them, and never redefines a token declared there.carino-ui.css (behaviour in carino-ui.js). Carino-Systems/propagate.sh copies both into each site, the way it copies the navbar; a site links them before its own stylesheet.Typography
Red Hat Display (900, uppercase) for headings, IBM Plex Sans for body, IBM Plex Mono for data, labels and chips. The brand wordmark is a gold gradient over Red Hat Display. Sizes come from the type scale — thirteen --fs-* tokens, nothing in between. Three rules: --fs-micro is the floor (no UI text below 0.6rem, ever); the body base is 15–16px; heroes are always fluid (clamp()). Decorative glyphs — watermark numerals, emoji, SVG-canvas labels — may size freely.
Buttons
Outline by default; hover reveals the accent. Primary is a solid gold fill. Toggle buttons fill gold when active (module / template pattern). Icon buttons invert on hover.
Tabs
Underline tabs for switching panels within a view. The active tab carries the accent underline.
Form Controls
Dark elevated fields with a gold focus ring. Checkboxes and switches use the accent. All inputs are mono for alignment with the data they hold.
Alerts & Status Messages
Translucent tinted boxes in the three semantic colors. Inline code and bold use a warm highlight.
networkd applies both.Badges, Chips & Status
The app-tag chip (navbar — an <a href="./"> that reloads the app, while the gradient Carino wordmark beside it links to the hub at carino.systems), the clock timezone chip, semantic pills, and the live status dot with its pulse, and the AI Bloat Certified seal that heads a project page.
Cards & Panels
Cards lift and glow gold on hover. Panels use a large Red Hat Display title with a ghosted numeral.
Dropdown / Diagnostics
The status toggle opens a diagnostics panel — label/value rows grouped under muted section headers. Used for the navbar status menu and app info panels.
Tables
Mono, hairline-separated rows with an uppercase muted header. Rows tint gold on hover.
Code
Dark elevated block, mono, with a subtle accent for keys and muted comments.
# netplan — dual-stack ethernet network: version: 2 ethernets: eth0: dhcp4: true dhcp4-overrides: route-metric: 100
Loading & Progress
A gold ring spinner, a determinate progress bar, and the EKG heartbeat used for long copy/transfer operations.
Slice Menu
The module chooser of a Suite and the module grid of a Learning site. Slices widen with a gold glow on hover; once a module is open the menu becomes a 44px bar fixed at the top of the page. Shown here in a frame.
#module, with extra parameters after & (#edit&sample=ct). CarinoUI.slices({ menu, onRoute }) in carino-ui.js follows hashchange, marks the active slice and keeps body.state-overview and body.state-module in step, so Back, bookmarks and shared links open the right module. When every module works on the same file (dcm, Media), pass collapsed: true so the bar sits above the drop area from the start.#sha2/stage-3, #learn/lab. onRoute receives it as params.path, and the module id is what comes before the first slash..slice-menu › .slice[data-id] (.s-num, .s-text, .s-blurb), .collapsed. Reference: Asobi, Learn.Toast Notifications
Transient, top-right status messages in the four semantic tints. Fixed and hidden by default; add .show to reveal, then remove it after a timeout.
.toast-rack preview wrapper; in use, a single .toast is fixed to the top-right and toggled with .show. Reference: Desk, Metadata.Navbar Action Portal
Apps don't build their own top bar — they mark their controls with data-carino-actions and carino-navbar.js relocates the real DOM node into the navbar's right cluster. Ids and handlers survive the move; the emptied data-carino-strip wrapper is removed. Relocated controls use the compact 32px .cs-btn recipe.
<!-- the navbar script moves the inner div into .cn-right at mount --> <header data-carino-strip> <div data-carino-actions> <button class="cs-btn" id="undoBtn">Undo</button> <button class="cs-btn" id="exportBtn">Export</button> </div> </header> <script src="carino-navbar.js" data-app="MyApp" data-repo="MyRepo" defer></script>
data-carino-actions marker the script auto-absorbs a leftover body > header.cs-header. Reference: carino-navbar.js (relocateActions), consumer markup in Time/index.html and Hardware/index.html; SoftwareCatalog shows the explicit-marker pattern.data-app is the tag beside the brand; data-repo is the repository the GitHub button opens — set it whenever the repo name differs from the tag (it falls back to data-app). The right cluster is ordered by CSS, not by DOM position, because four scripts insert into it independently. Read it inwards from the right edge: 4 GitHub and LinkedIn, always last · 3 language, immediately beside them · 2 status · 1 the app's own controls, furthest from the edge.data-priority="1" to keep it in the bar; without a mark, the first .btn-primary stays. The real nodes move, so ids, handlers and #carinoNav .cn-actions … rules keep working..cs-menu in the navbar: a .cs-btn with aria-haspopup opens its .cs-menu-panel (hidden with the hidden attribute), and carino-ui.js wires every menu on the page, so a page never adds its own toggle. Folded into the navbar’s ⋯ menu, the items show there directly. .cs-btn.primary is the one filled control: the page’s main action, marked data-priority="1"; data-priority="2" keeps a second control (a Live page’s source badge) while there is room, and folds before the first.Dropzone
The drag-and-drop file input: dashed hairline at rest, gold glow while a file hovers, solid green once one lands. Drag anything over the first zone to see the live state.
Modal & Scrim
A centered card over a blurred dark scrim. The scrim closes on click, the card doesn't; toggle the whole thing with the hidden attribute on .modal-scrim.
Command Block
A pitch-black terminal card for copyable shell commands — green output, gold prompt, and a floating copy button that reuses the page-wide copy mechanics.
$ curl -fsSL https://setup.carino.systems/run.sh | bash
$ netplan try --timeout 30.band to the .terminal-wrapper and the Copy button gets its own strip at every width, as it does on phones.Workspace Shell
The chrome of every Tool and every Suite module: a 340px settings rail on the left that scrolls on its own, beside a fluid work pane. At 900px and below the rail becomes a drawer, opened by a [data-ws-toggle] button. Shown here in a frame.
Runs in your browser. Nothing you add here is uploaded.
.ws-rail-foot. Every output goes in one Export menu in the navbar through data-carino-actions, never in the rail. Classes: .ws › .ws-rail (+ .ws-rail-foot) and .ws-pane; .ws-toggle; .col. Load carino-ui.js for the drawer. Reference: Metadata, Topo, Netplan.Key Caps & Shortcut Legend
Small mono key caps for keyboard hints, with an accent variant for the active or featured binding. Compose them into a legend strip near the canvas they act on.
Day/Night World Map
The fleet's world-map canvas: slate ocean, olive land, and a translucent night veil whose edge is the real solar terminator. Gold is reserved for interactive geography — a glowing dot with an outlined mono label for a pinned city, small pale dots for everything else — and a floating mono legend sits bottom-right. The base palette is deliberately muted so the gold reads on both the day and night halves.
Data Viz
Primitives for dashboards and monitoring apps: gains use --ok green, losses --err red, and gold stays the interactive/brand accent. All numerics use tabular-nums via .num. First adopted by Stocks (stocks.carino.systems). Sparkline and detail charts are drawn dependency-free (inline SVG / <canvas> reading tokens via getComputedStyle) — no chart library.
.stat-tile (KPI), .delta.up/.down/.flat (signed change chip), .spark (SVG micro-chart, direction classes tint it), .rangebar (low→high with marker), .rule-row (.switch + condition + remove), .live-chip (data-freshness), plus the .num tabular-nums utility and the body.privacy-on .amount { filter: blur() } screenshot-safe utility.THIS BROWSER or DEVICE CLOCK as the source. Classes: .live-chip (.live .delayed .stale .err .paused .sample), .fresh (.stale .err .paused), .is-stale with .stale-note, and the .data-foot source line.Finance / Currency
Composite finance components introduced by Currency (currency.carino.systems). Each composes the Data-Viz primitives above — the .spark micro-chart and .delta chip — into two higher-level cards: the FX trend card (flag · pair · human rate · strength sparkline · window delta, where the series is the target's strength vs base so line colour and delta agree) and the news item (a headline link whose left border is tinted by article tone). A mover tile summarises the biggest gainer/loser over the window.
.fx-card (.fx-top → .fx-flag/.fx-pair/.fx-name, .fx-rate, .fx-spark wrapping a .spark, .fx-foot with a .delta), .mover tile (.mv-l/.mv-v/.mv-code/.mv-pct), and .news-item (.news-title + .news-src; .pos/.neg tint the left border by tone, with an optional .news-tone chip). Trade values use .stat-tile + the two-line <canvas> chart. All keyless: ECB/Frankfurter, GDELT, World Bank.Section Animations
One ambient loop per category in the fleet registry, used as a band under a section’s cards on the hub. They are a mark, not a control: nothing here responds to the pointer, and none of them ever finish. The Medical EKG is the original — it is the Carino PACS splash — and the other seven were drawn to sit beside it.
carino-anim.css (motion) and carino-anim.js (geometry). Drop both in, then el.innerHTML = CarinoAnim.svg('medical') — or copy a rendered <svg> straight out of this page and paste it, which needs the stylesheet alone. Ids match the tag ids in the hub’s assets/json/tools.json, so a section finds its animation by name.stroke-dashoffset, transform and opacity and nothing else — these sit under a grid that measures itself, so anything that triggers layout is out — and it must hold a legible still under prefers-reduced-motion rather than vanishing. Give every dashed shape a pathLength so the CSS can state a real length instead of guessing at the geometry.Landing Hero
The gold-C hero that opens a landing page: the hub, a Product, a Reference site, a Learning overview. Reference: dicom.carino.systems. It is anchored to the top, and every size grows with the height a screen has beyond 900px, so a laptop and a tall monitor both look composed.
One look across every site.
Copy it, don’t redraw it.
Carino Branding holds the tokens and components every Carino site is built from.
- Starting a site? Link carino-ui.css and the page already looks like the fleet.
- Not sure where a control goes? The page types say which blocks a page has.
34 sections · 8 page types · reviewed 2026-10
aria-hidden, still under reduced motion, removed on phones. A Product adds its systems line (.sys-line: version · systems · licence) above its install buttons; a Reference site puts its counts and reviewed date in .lh-stats..landing-hero › .lh-wrap › .lh-mark (img.mark, optional svg.lh-motif), h1 with .gold, .lh-lede, .lh-situations, .lh-stats or .sys-line, .lh-actions. The mark is the site’s own logo.svg.Short Hero
A tool’s empty state. It sits inside the work pane, never as a band above it, and leaves as soon as there is work. It holds the one input target, example chips as a second way in, and the privacy line. Reference: Metadata and Topo.
See what a file says
about itself.
Drop a photo, a PDF or a song to read and edit its hidden details.
Runs in your browser. Nothing you add here is uploaded.
Password
Make a strong password and send it safely.
<h1> per page, naming the job in plain words, not the product in capitals. The lede is two lines at most. Every tool has example chips or an “Open the example” link, and sample data says it is sample. Tools that always open with content (Desk, Netplan, Password, Aldis, Teleprompter) use .rail-head at the top of the rail instead..short-hero › img.mark, h1, .sh-lede, .sh-input, .examples (.ex-label + button.chip-tag), .privacy-line. Compact form: .short-hero.rail-head.Privacy Line
One sentence, the same on every site, saying where the visitor’s things go. It must be literally true, so a page that contacts anything names it in the same line.
Runs in your browser. Nothing you add here is uploaded.
Runs in your browser. Nothing you add here is uploaded. Exchange rates come from frankfurter.app; nothing you type is sent.
Runs in your browser. Nothing you add here is uploaded. In Chrome, speech is recognised by Google’s servers unless the on-device pack is installed.
Progress is saved in this browser only. No account, nothing sent anywhere.
Your answers stay in this link and this browser. Nothing is sent anywhere.
.pl-also. Where a page sends nothing at all, back the claim with a meta CSP that limits connect-src, as Password does.Filter Chips
A Reference page’s first control: a sticky bar of facet chips with the number of entries shown. One choice per facet, and clicking a chosen chip clears it. Reference: Law.
.fchips › .fchip-lbl, button.fchip (.active or aria-pressed="true"), .fchip-sep, .fchip.clear, .fchips-count.Entry Card & Source Line
The dense card of a Reference page. Every entry ends in a source line: the publisher’s domain, a link, and the month it was last checked.
The federal gazette of record: laws, decrees and regulations take effect when published here.
The official gazette, published by the National Printing Bureau every weekday.
The federal gazette; a consolidated legislation portal is listed beside it as a secondary source.
url and an updated date, checked by tools/validate.py and tools/linkcheck.py (copy Law’s). The source line reads that date; an entry with no source is not published..card.entry › .e-title, .e-sub, .e-desc (two lines), .e-badges (.pill), .src-line (a + .src-date). Details open in a Modal with a #id link.Lab & Progress
Learning pages end every topic in something to try. An inline lab sits at the stage it teaches; the step player walks an algorithm one step at a time. Reference: Learn (inline labs) and Hash (step player).
One round of SHA-256
Step through how one word of the message is mixed into the state.
localStorage['<site>.<module>'] as a list of finished stages, every read and write in try/catch, with Export and Import as a JSON file — the only way to move it without an account. Every module, stage and lab is linkable: #module, #module/stage-3, #module/lab..lab › .lab-kicker, h3, .lab-blurb, .lab-mount or .step-player (.sp-controls, .sp-count, .sp-stage); .progress-pill. A lab that fails to start shows an .alert inside its box; the reading still works.Play Controls
Games and ambient pieces share one stage and one set of keys, so a visitor who knows one knows them all. The stage takes every pixel under the navbar; help and pause open in a Modal.
body.play-body (a full-height column), .play-stage (canvas, wall or board), .play-dock (optional, built from .cs-btn). Three kinds: Canvas (CyberCity, Jellyfish), Wall (MusicGrid), Board (Asobi’s games).data-immersive to the carino-navbar.js script tag: the bar slides away in fullscreen or after 3 seconds idle (data-immersive="5000" for 5), and comes back at the top edge, on keyboard focus or on Esc. On touch screens it hides only in fullscreen. It fires carino:navbar with {hidden}.Page Types
Every Carino site is one page, and every page is one of eight types. The type fixes the layout: the blocks it must have, in order, the ones it may add, and the ones it never has. A site declares its type in Carino-Systems/baseline/sites.json as "type"; "also" names a second type whose blocks it borrows.
carino-navbar.js), the gold-C mark, and the head, robots, sitemap and 404 that baseline/apply.py writes, so no card lists them. The thin bar at the top of each sketch is the navbar. A linked block opens the component it is built from."also" lets a site borrow another type’s blocks: Asobi is play with "also": "suite" because its games sit behind a slice menu. The main type’s Never line still applies. A ninth type is added here first, then in sites.json."standalone": true) follow the Product layout but keep their own icon, and skip the Carino navbar and translations.