Brand & style guide

Night sky, warm light

The lab's machines are named after stars and constellations, so the brand is a night sky with one bright star over home. Calm, technical and a little playful. This page is the reference for anything that carries the Hager Homelab name.

The mark is a constellation drawn as a house: four stars for the walls, a door, and a four-point guiding star at the roof's peak. The house is home; the stars are the servers; the gold star is the one login that ties it all together.

Hager Homelab wordmark
Primary lockupSVG PNG
Hager Homelab wordmark for light backgrounds
Lockup on lightSVG PNG
Hager Homelab mark
App icon / markSVG PNG
MonochromeSVG PNG
Mono on StarlightPNG
White monochrome mark
Mono whitePNG

All downloads

SVG is the master format; use it wherever you can. PNGs have transparent backgrounds (the app icon keeps its own dark tile) and come in three sizes.

AssetSVGPNG
Primary lockup (on dark)logo.svg600 · 1200 · 2400 px
Lockup on lightlogo-on-light.svg600 · 1200 · 2400 px
App icon / marklogo-mark.svg256 · 512 · 1024 px
Monochrome, Night 900logo-mono.svg
uses currentColor		256 · 512 · 1024 px
Monochrome, white256 · 512 · 1024 px
Social cardog.svg1200 × 630 px
Favicon & touch iconsfavicon.svg32 · 180 · 192 · 512 px

Name

Write it Hager Homelab: two words, title case. In the wordmark, "Hager" is bold and "Homelab" is medium weight in a muted tone. Short form, where space is tight: the lab. Never "HagerLab", "HHL" or "Hager Home Lab".

Logo usage

  • Clear space: keep empty space around the logo equal to the height of the guiding star (about ¼ of the mark's height).
  • Minimum size: mark 16 px (favicon), lockup 120 px wide on screen.
  • Backgrounds: full-color logo on Night 950–800. On light or busy backgrounds use the monochrome mark in Night 900 or white.

Do

  • Use the supplied SVGs.
  • Keep the gold star gold in full-color use.
  • Scale proportionally.

Don't

  • Recolor the lines or stars outside the palette.
  • Add shadows, glows, outlines or gradients.
  • Rotate, stretch or re-draw the house.
  • Put the full-color logo on photos or mid-tones.

Color

A dark-first palette. Night is the canvas, Starlight is the single warm accent for primary actions and highlights, and Aurora marks secure or interactive things: links, focus rings, VPN paths. Use gold sparingly: one primary action per view.

Brand colors

Night 950#0B1020
Dark background
Night 900#121A2F
Surfaces, light-mode text
Night 800#1C2742
Raised surfaces
Starlight 400#F5B84A
Accent (dark mode)
Starlight 600#94600F
Accent (light mode)
Aurora 400#2EC4B6
Links, focus (dark)
Aurora 600#0A766C
Links, focus (light)
Mist 100#E7ECF5
Text on dark
Mist 400#9AA6BF
Muted text on dark
Ember 400#FF7A6B
Errors, danger only

Accessibility

PairContrastUse for
Mist 100 on Night 95016.0 : 1Body text, dark
Mist 400 on Night 9507.7 : 1Secondary text, dark
Starlight 400 on Night 95010.7 : 1Accent text and buttons, dark
Night 950 on Starlight 40010.7 : 1Primary button label
Aurora 400 on Night 9508.7 : 1Links, dark
Night 900 on #F7F8FB16.3 : 1Body text, light
Aurora 600 on #F7F8FB5.2 : 1Links, light
White on Starlight 6005.3 : 1Primary button label, light

Never rely on color alone: links are underlined, secure paths are dashed as well as teal, and errors carry an icon or label.

Typography

Fast and private: the site ships no web fonts. It uses each platform's best UI face (Inter if it's installed, otherwise Segoe UI, San Francisco or Roboto) and the system monospace for code, labels and eyebrows. Headings are bold with tight tracking; mono labels are uppercase with wide tracking.

Display · 700 · −3.5%Built in the open
H2 · 700 · −2%Six layers, one repo
H3 · 700 · −1%Private access
Body · 400 · 17/1.65Every machine is described in code, and every login goes through one identity.
Eyebrow · mono 600Member guide
Code · mono 400nixos-rebuild switch --flake .#host

Components

Buttons

Primary action Secondary

One primary (Starlight) button per view. Labels are verbs: "Open the member guide", not "Click here".

Callouts

Info

Aurora border: tips and context.

Heads up

Starlight border: something to do before continuing.

Danger

Ember border: security or data loss. Use rarely.

Cards & tags

Card title

Raised surface, 14 px radius, 1 px border and a soft shadow. Content first; decoration minimal.

tagmono label

Shape & spacing

  • Radii: 8 px (inputs, code), 14 px (cards), 22 px (feature panels), fully round (tags).
  • Spacing follows a 4 px grid; page gutters are 16–32 px; content max width 1120 px, prose 760 px.
  • Motion is small and quick (≤ 150 ms lifts and fades) and is turned off for prefers-reduced-motion.

Icons & imagery

  • Icons: 24 px outline icons, 2 px stroke, round caps and joins (Lucide-style). Tint with Aurora inside a soft Aurora tile.
  • Illustrations: constellations: dots joined by thin lines, one gold star for emphasis. Flat, no gradients except a faint background glow.
  • Diagrams: rounded boxes, solid grey wires for public traffic, dashed Aurora wires for member/VPN traffic, mono uppercase zone labels.
  • Photography: avoid photos of real hardware, racks, labels or screens. They leak more than you'd think.

Voice & tone

We sound like

  • A friend who runs servers for fun: plain words, short sentences.
  • Specific about what to do, vague about what's inside.
  • Honest about limits ("invite-only", "VPN required").
  • Occasionally playful (one emoji per page, tops).

We avoid

  • Marketing fluff ("enterprise-grade", "cutting-edge").
  • Internal names, addresses, ports, hardware models or network layouts on public pages.
  • Blame in error text. Say what happened and what to try next.

Public vs. member content: public pages describe the lab's shape (layers, principles, upstream projects). Anything that would help someone map or attack it (hostnames of servers, IP ranges, versions, topology) belongs in the VPN-only member docs.

Design tokens

All colors are CSS custom properties on :root in style.css. Components use the semantic tokens, never raw hex, so light and dark themes come for free.

--bg            page background      #F7F8FB / Night 950
--bg-raised     cards, header        #FFFFFF / Night 900
--bg-sunken     alt sections, code   #EDF0F6 / #080C18
--border        hairlines            #D9DFEA / Night 700 (#2A3657)
--text          body text            Night 900 / Mist 100
--text-muted    secondary text       #4E5A73 / Mist 400
--accent        primary actions      Starlight 600 / Starlight 400
--link          links, focus         Aurora 600 / Aurora 400
--danger        errors               #C2412F / Ember 400

--radius-sm 8px   --radius 14px   --radius-lg 22px   --maxw 1120px