Health

Brand guide

How Health should look, sound, and behave.

Spot outdated projects worth selling upgrades for, keep them secure, size sell hours for PMs, and hide inactive ones.

Purpose

Health is the internal sales + security control room for agency GitHub repos: outdated stacks worth pitching, sell-hour signals, and a hide list for inactive projects.

We are

A triage surface, worst first, expand for detail
Honest about age, EOL, and sell hours
A shared source for engineering, PMs, and sales

We are not

A marketing site or agency portfolio piece
A generic “security dashboard” SaaS skin
A place for celebration metrics or vanity charts
A timesheet or delivery-hour forecast

Audience

Engineers trust the data; PMs and commercial act on it. One brand, no “simple” vs “pro” modes.

Engineers

Need density, exact versions, alert titles, and upgrade line items. Prefer scannable mono data over explanation.

PMs & commercial

Need sell-hour estimates to price and pitch upgrades, and hide inactive projects so the list stays sellable. Prefer clarity, never soft euphemisms. Hours are pitch bands, not timesheets.

Write so an engineer trusts the data and a PM can size (and sell) without a Slack thread to engineering.

Don’t

Don’t keep inactive projects in the main list, hide them so sellable work stays obvious.

Personality

Three traits. If a screen fails one of them, it is off-brand, even if it looks “designed.”

Operational

Every view has one job. Risk first. No dashboard clutter, no competing heroes.

Precise

Status language is specific. Colour means severity, never decoration or mood.

Calm

A deep cobalt-navy field, lifted panels, sharp white ink. Colour pops only where it carries meaning. Every line and border earns its place. Motion only when work is happening.

Mark

The product is named Health, chrome uses one wide HealthLogo card (cobalt field, cyan rail, white HEALTH inside). Favicon stays a square app mark with H. No agency wordmark in the product UI.

· chrome lockup

Favicon · app mark

Logo lockup

HealthLogo, one horizontal card (default height 20px): cobalt field #0c2839 + healthy cyan left rail #33e1ff + border #244a6b + Health in white Space Mono bold uppercase tracking-wide inside the card. Shared via AppHeader and the login header. Not a square mark with a separate wordmark outside. Never “H HEALTH”, never a second Health label beside the lockup.

Clear space

Keep at least the height of the lockup free around it. Scan phase strip (when present) sits past a soft rule, never a permanent timestamp beside the brand.

Favicon

Square cobalt tile (#0c2839) + one full-height left rail in healthy / brand cyan #33e1ff + geometric H in near-white. Files: app/icon.svg, app/apple-icon.svg. Favicon cannot hold the full HEALTH word, keep the square app mark separate. No emoji. Same hex as healthy project status so mark and severity match.

Use HealthLogo once in chrome (HEALTH inside the wide card); keep the square H monogram for tabs and the login hero mark.

Don’t

Don’t put HEALTH outside the card, duplicate Health beside the lockup, theme the logo tile away from cobalt, or glue a timestamp to the brand cluster.

Colour

A deep cobalt-navy field with lifted panels carries the calm; sharp white ink does the reading. Colour is signal, not decoration, a vivid aqua-cyan for identity and healthy, punchy severity hues for crit / high / mod. Colour pops where it earns it, no rainbow floods, no accents that mean nothing.

Surfaces & borders

#071a2b

Page, deep cobalt-navy field (panels lift above it)

surface

#0c2839

Cards, inputs, sticky chrome, lifted cobalt panel

surface-alt

#143650

Hover states, one step lifted cobalt

ancient

#0a2333

Reserved deep neutral (caption, not row wash)

border

#244a6b

Borders, dividers, hairline whisper on dark

dot

rgba(255,255,255,0.03)

Background dot pattern (reserved)

Brand

brand

#33e1ff

Health identity cyan, focus, active chrome

brand-bg

rgba(51,225,255,0.16)

Soft brand wash (rare)

Text on surface

text-1

#ffffff

Primary on surface, sharp white ink (AAA, 15.2:1 on surface)

text-2

#b3cde4

Secondary body on surface, cool light blue (AAA, 9.3:1 on surface)

text-3

#93aec6

Labels, muted legends, verified AA (6.6:1 on surface, 5.3:1 on healthy tile)

Text on field

on-bg

#ffffff

Titles / primary on page bg, sharp white ink

on-bg-muted

#b3cde4

Leads, loading, secondary on bg

on-bg-subtle

#93aec6

Kickers, captions on bg

Emphasis (restrained)

accent-ink

#d0e4f7

Cool ink emphasis, quiet lit detail, not a colour punch

accent-green

#33e1ff

Vivid aqua-cyan, echoes the mark / healthy; the one accent

accent-stone

#93aec6

Blue-grey stone, softest neutral emphasis (AA on bg/surface/surface-alt)

Severity

crit

#ff7284

Critical alerts, EOL, hot rose-red (rail + bold label); AA as text on its wash (4.65:1)

high

#ff9d3d

High severity, unsupported runtime, vivid cobalt orange (pops AAA on dark)

mod

#ffc933

Moderate, EOL soon, vivid cobalt yellow (pops AAA on dark)

low

#93aec6

Low-severity alert counts, blue-grey stone (AA everywhere, incl. tile washes)

healthy

#33e1ff

Clear, supported, vivid aqua-cyan (Health identity)

Meaning

One card-edge severity rail + coloured status text. A neutral card carries no rail. Never a second severity rail inside Upgrade or Posture.

Not alone

Colour never carries meaning alone, pair with a label (EOL, Critical, High). Do not use a severity hue as a hover accent on Refresh or other ordinary chrome.

Use the vivid aqua-cyan for focus, healthy status, and the mark rail; sharp white ink for type; let the punchy severity hues pop for crit / high / mod signal (rails, labels, Overview tiles).

Don’t

Don’t paint row washes or add colour that means nothing, punch is signal, not ornament. Fun ≠ rainbow floods or glass.

Typography

Space Mono only. Monospace-first is the voice, technical, uniform, scannable. Four roles; weight and case do the rest.

Title

16px · text-title

AO-Package-Component

Project names

Body

14px · text-body

AO-Package-Component

Default UI text; bold + tabular for lit data (versions, euros, counts)

13px · text-ui

AO-Package-Component

Nav, filters, buttons, section labels; regular for secondary captions

Caption

12px · text-caption

AO-Package-Component

Status, dimension labels, timestamps, hours, kbd; regular when not a label

Bold for titles, chrome, and lit values. Specimens live in bordered frames with air, not lined tables.

Don’t

Don’t invent sizes, use font-medium, or run samples flush against hairlines.

Layout & geometry

Geometry is part of brand. Sharp, flat, spaced, considered surfaces that breathe, with nothing on them that hasn’t earned its place.

Corners

Radius none except status dots. No marketing rounds.

Spacing

8pt grid. 4px half-step only when density requires it. Breathing room is brand, generous padding and gaps so panels and tiles can breathe; prefer white space between cards over stacked borders. Never pack flush to edges or leave sparse-to-broken voids.

Depth

Page bg → card surface. No shadows, glass, or elevation theatre.

Lines, borders, colour, only when they earn it

Every hairline, divider, wash, and accent must earn its place with structure, hierarchy, or meaning. Keep the panel border that defines a card on the cobalt field, the continuous gutters that calm the expanded table, and the severity rail that signals. Drop anything that only decorates, no registration ticks, no chrome end marks, no lead rules, no rail on a neutral tile.

Breathing room

Space is the primary material. Prefer generous padding and gap-4 stacks so panels and controls can breathe. Dense for scan data; never sparse-to-broken voids.

Specimens

Brand and design-system demos use the same bordered SpecimenFrame atoms, equal chrome for tokens, type, and rules.

Chrome

Shared max-w-6xl chrome on every screen. Desktop: h-14: Health left; nav + logout right. Mobile: brand + logout on row one; primary nav wraps alone below, never mix prefs into the nav wrap or clip. Report language EN|NL lives on Upgrade (Copy / Slack), not the header. Filters: quiet surface-alt when active. Refresh is icon + text next to search, same h-10, vertically centered, no box. Hide ⌘K below sm. Action icons are sharp strokes beside labels (ui-icons), not emoji, not icon-only for sell/hide/share (logout may be icon-only in chrome).

Targets

Primary controls ≥ min-h-11 (44px). Quiet :focus-visible, inset on fields, not a thick outer frame. Action buttons use bordered surface + hover surface-alt, never ink-black invert.

Voice & writing

Sound like a careful operator: short, specific, no theatre. If it could be a Slack emoji reaction, it does not belong here.

Prefer

EOL · 11y
Needs attention
Major upgrade (security ended)
Long past EOL
Supported · Clear · Done
Sell hours

Avoid

Critical!!! / emoji alarms
Your projects are on fire
Awesome security wins
Ancient / legacy vibes
Raw enums as labels (done)
Tooling or IDE brand names in UI

Case

Uppercase for dimension and status micro-labels (Runtime, Security, EOL). Sentence case for values and actions (Done, Refresh, Needs attention). Technical titles, repo and Dependabot package names, always lowercase via formatProjectTitle.

Numbers

Tabular nums for versions, hours, euros, ages. Prefer compact age (“11y 12mo”) over long prose.

Naming

Use the repo / package name as the title, lowercase display only; do not rewrite or “pretty” it. Product labels (PHP, Laravel) stay official. Canonical casing kept for links and APIs.

Length

Prefer the shortest true label. Cut adjectives that do not change a decision.

Hours

Say sell hours / pitch band when clarifying, not timesheet forecasts.

Obvious

Never narrate structure the layout already shows.

Motion

Motion is feedback, not personality. If nothing is happening, the UI is still.

Allowed

Scan sweep, phase blink, list reveal after refresh, card expand/collapse, a one-shot confirm on copy / Slack, and the segmented preference slide (segment-slide), only when they communicate work in progress, arrival of data, a completed action, or a chrome preference change. Report copy and € amounts update instantly.

Reduced motion

Honor prefers-reduced-motion: static sweep bar; no blink, reveal, expand, confirm, or segment slide / press / icon engage.

Forbidden

Decorative parallax, bounce, continuous ambient loops, or motion that delays reading status. If nothing is happening, the UI is still.

Accessibility

Accessibility is brand integrity. A beautiful signal that only some people can use is a failed signal.

Contrast

Primary text on surface meets WCAG AA. Field copy on page bg uses on-bg*. Muted text is for secondary detail, never the only carrier of critical status.

Not colour alone

Severity always includes a text label. Accent rails reinforce; they do not replace words.

Keyboard

Full path without a pointer. Visible focus. Expand/collapse and filters are operable from the keyboard.

Targets

Primary hit areas ≥ min-h-11. Dense lists may use min-h-9 secondary rows, never tiny icon-only risk controls.

Design principles

Behaviour over decoration. These seven keep the control room calm and usable.

Clarity

Risk-first list. One job per view. Readable status text.

Deference

Quiet chrome. Content on surface. UI stays out of the way.

Depth

Layering only, page to surface. No glass, no elevation theatre.

Breathing room

Generous whitespace. Calm density, never packed edge-to-edge or sparse-to-broken.

Consistency

Tokens, sharp geometry, same controls and chrome on every screen.

Feedback

Focus rings, scan phases, copy/share confirmation.

User control

Explicit Refresh. Filters. Expandable detail on demand.

Out of brand

If it looks like default AI SaaS, agency moodboards, or a security product ad, it is wrong.

Never

Gradients, glassmorphism, soft multi-layer shadows
Rounded marketing cards, pill clusters, floating badges
Filled severity washes on rows or filters
Colour, borders, lines, or dividers that carry no meaning
Registration ticks, HUD marks, or diagrammatic chrome
Vivid neon accents or cockpit theatre
Emoji, hype, or alarmist punctuation in product UI
A second typeface or “friendly” sans takeover
Decorative motion; ignoring reduced-motion
Nested severity rails or card-in-card outlines
Stoplight / multi-colour mark rail (mark is one cyan bar)
Stuck icon + label, tighter than gap-3 (12px)
Packed panels, content flush to edges or stacked cages instead of breathing room
Agency wordmark or product names prefixed with the agency brand
Naming agent tooling or IDE brands in shipped UI