Brand system · the “Signal” identity

A precision instrument for support — magical and futuristic, never crypto.

Stella.Support runs on Signal: cool graphite, a single cyan accent, hairline precision, and data that reads like a telemetry read-out. This is the current identity and supersedes the earlier violet look. Live at help.refari.work.

Download assets Full pack (.zip)

01 Positioning

The idea

Stella is the star. Signal is the instrument that finds it. The mark fuses a four-point star with a crosshair reticle — celebration and precision in one glyph. It says “an intelligent support console,” not “a landing page.”

The product should feel magical and futuristic — but it is used all day by support agents and trusted by paying B2B customers. So the futurism comes from clarity and craft, not from glow.

The one rule

Spend boldness once. One cyan accent, used sparingly — a primary action, the active state, the AI read-out. Everything else stays calm graphite. Precision is the personality.

Reference feel: Linear, Vercel, an aerospace / observatory console — confident dark done with restraint.

02 Logo — the reticle-star

A four-point star (Stella) inside a crosshair reticle (Signal). Static, precise, never a glowing orb.

On graphite cyan · primary

On light deep cyan for AA

Mono one-colour fallback

Do

Keep the reticle ring, the four N/E/S/W ticks, and the star together.
Use cyan on dark; the deep-cyan variant on light.
Give it clear space — at least the width of one tick on every side.

Don't

Add glow, orbiting satellites, particles, or a violet gradient.
Recolour the star to anything but cyan / mono.
Stretch, rotate, or drop it onto a busy image without a graphite chip.

Icon SVG Wordmark SVG All logo files ↓

03 Colour

Graphite grounds, one cyan brand accent, cool neutrals, hairline borders. Semantic colours are separate from the brand. Click a chip to copy its HEX; hover for RGB.

palette.css colours.txt tokens.json

Grounds

Brand accent — the one cyan

Text & lines

Semantic — separate from the brand

Priority ramps from calm slate (Low / Medium) to warm (High / Urgent) — only the hot ones grab attention. Status uses filled tint pills; priority uses a distinct treatment so the two never blur.

04 Typography

System-native — no web-font dependency. A neo-grotesque for the interface, a monospace for data. The signature is tabular figures: metrics read like an instrument.

Interface — sans

The quick brown fox

Inter, "Segoe UI Variable", system-ui, sans-serif
Weights 400 / 500 / 600 / 700

Data — mono, tabular

1,042 · 94% · 2.4h · #1038

ui-monospace, "JetBrains Mono", Consolas, monospace
font-variant-numeric: tabular-nums

32 / 700Dashboard

24 / 600Ticket detail

16 / 500Section heading

14 / 400Body copy and controls.

11 / 600Uppercase micro-label

05 Design language

Depth from hairlines

1px cool borders (#222A34 / #2C3540) and low shadows build depth. No neon glow, no gradient-filled text.

The graticule

A whisper-quiet blueprint grid (~2% opacity) sits behind the app — precise, static. It replaces the old aurora blur + particle canvas.

Data as telemetry

KPIs and IDs are mono + tabular. The AI read-out reads like an instrument panel, not a glowing “AI-Powered” badge.

State in form

Status = filled tint pill; priority = a level-meter / distinct treatment. Colour is never the only signal.

--color-bg-base--color-bg-surface--color-primary--color-primary-text--color-text-primary--color-border-strong--color-success--color-danger--font-mono

The whole UI is painted from CSS custom properties, so the identity is a token change that cascades. A live component reference ships in-app at /style-guide (sysadmin-only). Grab the drop-in web-starter.css.