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.
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.
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 full-screen section chooser (Carino-Systems hub, CarinoLearn). Columns fill the viewport and expand with a radial gold glow on hover; selecting one collapses the rest to a thin bar. Shown here scaled down.
body.state-playing .slice-menu, sticky under the navbar; here it is the .collapsed modifier). Click a tab above to move the active accent.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.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 30Workspace Shell
The standard chrome for every "tool with a settings rail" app: a fixed sidebar that scrolls on its own beside a fluid content pane (min-width: 0 so it never forces overflow). Below 700px the rail stacks on top.
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.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.