Arkangel AI Design System

The visual language of Arkangel AI

The source of truth for our identity: clinical, trustworthy and modern. A neutral grayscale base, one firm orange accent and a purple family for data. Every screen in the product should feel part of this same system.

See the product

Personality

Clinical, trustworthy and modern

A premium SaaS product for healthcare professionals. Energy comes from contrast, not saturation.

Clinical and trustworthy

The grayscale base keeps medical data legible and calm. Nothing loud, nothing sterile.

Energy with a warm accent

Orange signals action: CTAs, badges and highlights. Used sparingly to create contrast.

Data in purple

The cool purple/lilac family drives data visualization and secondary accents, always with intent.

Premium SaaS

A precise, premium product for healthcare. Refined — never noisy or playful.

Typography

Two fonts, no exceptions

Archivo for all UI; Erode (serif) reserved for the editorial h1. Headings are medium weight, tight tracking and balanced — never loud.

Archivo (body & UI) · Erode (display h1). Never import Google Fonts or add new families.

Hero h1 — Erode display

Medical intelligence you can trust

Section h2 — Archivo medium

Built for clinical teams

Lead paragraph

Verified medical answers with sources, ready for real workflow.

Metric / stat

98.6%

Small label / caption

Updated with the latest evidence

Color

Neutral base, firm accent

Semantic tokens for everything (dark mode works automatically). The brand palette is reserved for CTAs, badges, highlights and data visualization.

Warm palette — primary accent

#f6ac1c

Yellowbrand-warm-100

#e58b4c

Soft orangebrand-warm-200

#ff5924

Orange — signature accentbrand-warm-300

#bc351b

Brick redbrand-warm-400

#c63844

Crimsonbrand-warm-500

Cool palette — data & secondary

#8661b6

Rich purplebrand-cool-100

#9b98d1

Muted lilacbrand-cool-200

#e5eaf2

Light bluebrand-cool-300

Other brand tokens

#005699

Resolute (route)brand-resolute

#E84C1E

Accent (CTA)brand-accent

#282828

Darkbrand-dark

#dfddeb

Lightbrand-light

Semantic tokens — use these in components

Backgroundbg-background

Foregroundtext-foreground

Primarybg-primary

Secondarybg-secondary

Mutedbg-muted

Accentbg-accent

Cardbg-card

Borderborder-border

Successbg-success

Warningbg-warning

Destructivebg-destructive

Ringring-ring

Components

shadcn first, reusable primitives

Compose over components/ui/* before building bespoke. One RainbowButton as the primary CTA per view; everything else stays calm.

Buttons / CTAs

Badges / pills

Eyebrow

Secondary

Outline

Announcement

Surfaces / cards

Card with hoverrounded-xl · border · backdrop-blur · subtle lift

Iconography — lucide-react only

Motion

Subtle, fast and purposeful

Spend the animation budget on one orchestrated page-load reveal and a single focal element. Everything else stays calm, and respects prefers-reduced-motion.

Use	Duration	Easing
Hover color/transform	`150–200ms`	`ease-in-out`
Reveal / crossfade	`300–400ms`	`ease-out / easeInOut`
Slide panels	`300ms`	`cubic-bezier(0.87,0,0.13,1)`
Ambient loops	`2s–50s`	`linear infinite`

In one line

Dominant neutral, firm accent

When in doubt, match the landing page. Semantic tokens over hex, two fonts, mandatory dark mode and restrained motion. This document wins over any generated aesthetic.

Back to the product