Carino Branding — Design System Reference

01

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.

02

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.

WordmarkCarino

Display / H1Heading

Display / H2Subheading

BodyThe quick brown fox jumps over the lazy dog.

SecondaryThe quick brown fox jumps over the lazy dog.

Monoconst accent = "#eab308";

LabelSection Label

03

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.

Actions

Toggle group (single-select / multi-toggle)

04

Tabs

Underline tabs for switching panels within a view. The active tab carries the accent underline.

The Overview panel is active. Tabs share a hairline baseline and shift the accent underline to the selected item.

05

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.

Text input

Select

Textarea

IPv4 IPv6

06

Alerts & Status Messages

Translucent tinted boxes in the three semantic colors. Inline code and bold use a warm highlight.

✔ No problems found. Configuration is valid.

⚠ DHCP and a static address on the same interface — networkd applies both.

YAML Error: mapping values are not allowed here (line 8).

07

Badges, Chips & Status

The app-tag chip (navbar), the clock timezone chip, semantic pills, and the live status dot with its pulse.

BRANDING LOCAL Connected Pending Refused Live Idle

08

Cards & Panels

Cards lift and glow gold on hover. Panels use a large Red Hat Display title with a ghosted numeral.

Destinations

Store-and-forward targets

02

StreamMultiviewer

Reference navbar implementation with live diagnostics and multi-stream grid.

Open →

Carino PACS

Store-only DICOM PACS with folder auto-forward and a bundled editor.

Open →

Netplan Config

Family-aware netplan generator with live validation and reference templates.

Open →

09

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.

10

Tables

Mono, hairline-separated rows with an uppercase muted header. Rows tint gold on hover.

Interface	Type	Addressing	Metric
enp1s0	ethernet	dhcp4	100
wlp2s0	wifi	dhcp4	600
br0	bridge	static	—

11

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

12

Loading & Progress

A gold ring spinner, a determinate progress bar, and the EKG heartbeat used for long copy/transfer operations.

13

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.

01

Projects

02

Systems

03

About

04

Contact

Reference: Carino-Systems/index.html (the hub) and AssemblyRoadmap (per-course routing).