Halosight UI Design Language

Kurt Williams

— 3 min read

Scope: Product UI/UX only (dashboards, admin, settings, forms, tables, workflows, in-product onboarding).
Out of scope: marketing landing pages, homepage hero copy, pricing page conversion layouts.

Citations: Neon Indigo, Indigo, Coral Ember, Teal, Pink, neutrals, typography, gradients, CTAs, tone definitions: see source style guide.

0) NON-NEGOTIABLES (follow these exactly)

0.1 Brand color priority (UI-first)

  • Neon Indigo + Indigo are the visual home base for interactive UI elements.
  • Teal and Pink are supporting players (sparingly).
  • Coral Ember is SPECIAL-CASE ONLY. It must never become the default “make it pop” button color as it reads as "warning."

0.2 Context (UI only)

  • This skill assumes: CONTEXT = PRODUCT_UI
  • If a request contains marketing cues (landing page, book demo, lead gen), treat that as out of scope and do not apply marketing CTA color logic here.

0.3 Do not invent colors

  • Do not introduce new hues (no “bonus purple”, violet, lavender).
  • If you need variation, use the official light/dark variants of the provided palette.
  • For non-interactive placeholder bars, dividers, and skeleton loaders: use neutral grays, not tinted indigo.

1) DESIGN TOKENS (from the style guide)

1.1 Brand colors

  • Neon Indigo (primary interactive + accents):
    Base #8B92FF (light #B3B8FF, dark #6B72E8)
  • Indigo (secondary actions + links):
    Base #5B63D6 (light #7E85E6, dark #4850B8)
  • Coral Ember (rare: destructive/urgent attention):
    Base #FF6B5A (light #FF8F82, dark #E64A37)
  • Teal (alternative secondary + highlights):
    Base #6B9DB0 (hover #8CB5C5)
  • Pink (badges + special accents):
    Base #E85D9C

1.2 Neutrals

  • Dark primary bg: #1A1D29
  • Dark secondary bg: #252A36
  • Dark tertiary: #3D4451
  • Light surfaces: #FFFFFF, #F8FAFC, #F1F5F9

1.3 Gradients (UI guidance)

  • Gradients must be subtle, nearly imperceptible.
  • Hero-style gradients should not dominate product UI surfaces.
  • Preferred UI use: subtle surface depth or headers only (never for core readability).

1.4 Typography

  • Headings: Roboto Slab (700)
  • Body: Barlow (400)
  • Scale examples:
    • H1 60px/1.1, H2 48px/1.2, H3 36px/1.2, H4 24px/1.3
    • Body: 20, 18, 16, 14 (line-height 1.5)
    • Eyebrow: 14px uppercase, letter-spacing 0.1em

2) THE CORAL RULE (PRODUCT UI STRICT)

2.1 Core principle

Coral Ember is not a primary button color in PRODUCT UI.
It is a high-urgency signal, not everyday navigation.

2.2 Allowed usage (rare)

Use Coral Ember only for:

  • Destructive and irreversible actions (Delete account, Remove workspace, Purge data)
  • Critical, urgent states requiring immediate attention (system integrity, security, billing lockout)

2.3 Forbidden usage (hard constraint)

Do not use Coral Ember for routine primary actions such as:

  • Save, Next, Create, Add, Apply, Continue, Submit, Done, Confirm (non-destructive)

Coral should feel like an alarm bell. If it appears on most screens, it’s wrong.

3) Action/CTA TYPES (UI mapping only)

The style guide uses CTA concepts. In PRODUCT UI they map like this:

  • “Marriage CTA” (primary action) → Neon Indigo
  • “Date CTA” (secondary action) → Indigo
  • “Secondary CTA” (alternative secondary) → Teal
  • Danger/Urgent CTA (rare) → Coral Ember

Implementation guidance:

  • Most screens should have one primary action (Neon Indigo) that indicates permanent state change, commit, finish etc.
  • Secondary actions should not compete with the primary:
    • Use Indigo for secondary buttons/links.
    • Use Teal sparingly for “alternate path” actions (e.g., “Go back”, “View details”).

4) UI MICROCOPY & UX WRITING (PRODUCT UI)

4.1 Voice & tone: Enterprise Punk Rock (UI flavor)

  • Brand Archetype: Maverick (subset of Outlaw)
  • Should appeal to a persona who is bold and wants to stand out.
  • Bold, direct, clear, action-oriented.
  • No corporate fluff.
  • No guilt language. No scolding.
  • “Helpful and decisive” beats “cute and chatty.”

4.2 Microcopy patterns

Buttons (1–3 words, verb-first)

  • “Save changes”, “Review draft”, “Send quote”, “Fix now”

Helper text

  • One sentence. Optional second sentence with a next step.

Errors

  • Acknowledge + fix path:
    • “That didn’t save. Try again, or check your connection.”

Form labels

  • Use plain nouns. Avoid jargon. Prefer “Billing email” over “Invoice recipient address”.

Empty states

  • Say what this area is for + one clear next step:
    • “No templates yet. Create one to reuse your best workflow.”

5) UI COLOR APPLICATION RULES (practical)

5.1 Buttons

  • Primary: Neon Indigo
  • Secondary: Indigo
  • Tertiary: text-only or neutral outline (use Indigo for emphasis)
  • Destructive: Coral Ember (rare)
  • Links: Indigo by default.
  • Focus/active rings: Neon Indigo (consistent accessibility cue).

5.3 Badges and highlights

  • Pink: special badges only (e.g., “New”, “Beta”, “Limited”)
  • Teal: informational highlights (non-urgent)
  • Coral: warnings only when severity is high

5.4 Structure and hierarchy

  • Layout hierarchy should come from spacing and type first.
  • Color is the last mile, not the scaffolding.

6) OUTPUT CHECKLIST (PRODUCT UI)

Before finalizing UI recommendations or microcopy:

  • Is Neon Indigo/Indigo dominant for interactive elements?
  • Did I avoid Coral Ember except for destructive/urgent actions?
  • Are non-interactive elements using neutrals (not tinted indigo or purple drift)?
  • Is there one clear primary action per screen?
  • Is the writing short, specific, and human?

7) QUICK UI EXAMPLES (reference, not templates)

Primary action (Neon Indigo): “Save changes”
Secondary action (Indigo): “Preview”
Danger action (Coral Ember, rare): “Delete account”
Alt secondary (Teal): “Go back”

Error: “Couldn’t sync that meeting. Retry, or check your permissions.”
Empty state: “No rules yet. Create one to automate your next step.”

Read more