Helix brand assets

CSS

background: linear-gradient(
  90deg,
  #18181b,  /* charcoal */
  #3f3f46,  /* charcoal soft */
  #10b981,  /* Helix emerald */
  #059669,  /* emerald deep */
  #18181b   /* charcoal */
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Marketing-light theme only. On the dark portal canvas the gradient inverts to a lighter charcoal so it stays legible; portal hero headings should prefer solid white anyway. Not animated by default; the earlier text-shimmer animation was retired 2026-07-02.

Pattern

{/* Default: leading semantic glyph. Pick the icon that evokes
    the action - ShieldCheck (audit), Send (submit), PenLine
    (draft/talk), Sparkles (AI), Calendar (schedule), etc. */}
<button className="inline-flex items-center gap-2 ...">
  <Icon className="w-4 h-4" />
  {label}
</button>

{/* Exception: text-only nav link with trailing arrow. Reserve
    this for secondary link CTAs where the button just points
    somewhere and no domain glyph fits. */}
<a className="inline-flex items-center gap-1 ...">
  {label}
  <ArrowRight className="w-3.5 h-3.5" />
</a>

Rule: exactly one icon per button. Leading semantic glyph is the DEFAULT. Trailing arrow is the exception - if you find yourself adding it to a primary or accent button, pick a semantic icon instead. If nothing semantic fits, the label is probably too vague to be a CTA.