TinyRack
Design tokens, typography, and spacing — V1
#131416
Background
--color-bg
Page / canvas background
#282b2f
Panels
--color-panel
Cards, sidebars, drawers
#b7bcc2
Text
--color-text
Body copy, labels
#4797ff
Accent
--color-accent
CTAs, active states, selection
Buttons
Panel
NETWORKING
TP-Link TL-SG108E
8-port managed gigabit switch · 1U
Rack Slot (placeholder)
Conventions every device profile's frontSvg / rearSvg must follow. Keeps the rack canvas visually coherent across the library. See port icons for connector glyphs.
Canvas — viewBox 300×66 for 1U, 300×132 for 2U. SVG root sets fill="none" stroke="#B7BCC2" stroke-width="1.5".
Chassis — background rect x=1 y=1 w=298 h=64 rx=2 fill="#1A1D20" (1U), followed by 4 corner screw holes at cx∈{8,292} cy∈{8,58} r=2, then the outline stroke rect on top.
Label — model name Space Mono 7px at x=25 y=37, manufacturer 5px fill-opacity="0.4" at y=47. Placed in left zone (x<100) so port area is clear.
Power LED — filled circle cx=18 cy=11 r=2 fill="#22C55E" fill-opacity="0.5". Applied to every device that has power (skip blanks, patch panel, powerboard).
Activity LEDs — for networking devices with port banks: one circle per port at cy=11 r=1.5, fill-opacity="0.4", cx centred over each port glyph.
Port numbers — small font-size="5" text-anchor="middle" labels at y=57 below each port for switches and patch panels.
Ports — always reference symbols from /icons/ports.svg via <use>; never inline port shapes in device SVGs.
Reference — TP-Link TL-SG108E (front) — hover ports
Source: /static/icons/ports.svg. Reference from a device illustration via <use href="/icons/ports.svg#port-rj45"/>. All glyphs use currentColor so the wrapping <g class="tinyrack-port"> can recolour them on hover or focus.
RJ-45 speed/PoE convention
The RJ-45 connector is physically identical at every speed (1/2.5/10/25 GbE) and PoE level — the difference lives on the device label, not in the connector shape. We use one shared port-rj45 glyph for every Ethernet jack, with speed and PoE shown as overlays revealed on hover/focus. The same applies to SFP / SFP+. To indicate PoE, draw port-poe-overlay on top of the RJ-45 within the same tinyrack-port group.
Network
RJ-45
port-rj45
RJ-45 console
port-rj45-console
SFP
port-sfp
SFP+
port-sfp-plus
PoE overlay
port-poe-overlay
I/O
USB Type-A
port-usb-a
USB Type-C / TB3-4
port-usb-c
Display
HDMI
port-hdmi
Mini-HDMI
port-mini-hdmi
DisplayPort
port-displayport
VGA
port-vga
Audio
3.5mm TRS
port-audio-3-5mm
Power
DC barrel
port-dc-barrel
IEC C14 inlet (kettle)
port-iec-c14
IEC C13 outlet (kettle)
port-iec-c13
Mains — AU/NZ
port-mains-au
Mains — EU (Schuko)
port-mains-eu
Mains — US (NEMA 5-15)
port-mains-us
Mains — UK (BS 1363)
port-mains-uk
Other
Antenna stub
port-antenna-sma
GPIO 40-pin header
port-gpio-header
microSD slot
port-microsd-slot
Hover demo — RJ-45 with speed + PoE badges
Hover the ports below. The badges (speed in mono text, lightning bolt for PoE) only appear when the port is hovered or focused. At rest the canvas reads as clean line-work.
Embedding in a device profile
<g class="tinyrack-port" data-speed="2.5g" data-poe>
<!-- Transparent hit-rect — required for Firefox (bounding-box is unreliable). -->
<rect class="tinyrack-port-hit" x="100" y="6" width="14" height="36" />
<use href="/icons/ports.svg#port-rj45" x="100" y="10" width="11" height="24" />
<g class="tinyrack-port-overlay">
<!-- PoE overlay: centre over port (port cx=105.5, overlay w=6 → x=102.5) -->
<use href="/icons/ports.svg#port-poe-overlay" x="102.5" y="6" width="6" height="6" />
<text x="105.5" y="40" font-family="Space Mono" font-size="3.5" fill="currentColor">2.5G</text>
</g>
</g>