EisnerAmper Digital Health Brand
EisnerAmper Digital Health

The brand, documented.

Everything you need to build on-brand for EisnerAmper Digital Health: the colors, type, spacing, components, and motion, pulled straight from the live site so the page you build next looks like it belongs. This guide is built in the brand's own system, so every example below is the real thing, not a mockup.

Source  the live Digital Health site Version  1.0 Self-demonstrating  hover the examples
Open the Magnetic Messaging Framework

The approved messaging framework: who EisnerAmper Digital Health is, who it's for, and how it speaks. This visual spec is its companion ... messaging first, then the look.

The system at a glance

A deep-navy editorial system with one electric accent

Dark midnight blues carry the hero and the heavy sections. A clean white and off-white stack carries the body. A single teal does almost all the accent work, with cyan as its brighter sibling for gradients only. Two typefaces split the labor: Fraunces, a light serif, speaks in the headlines; Inter handles every working job. The homepage and the AI Readiness Scorecard share the exact same tokens, fonts, and components, so they read as one brand. The feel is calm and premium, confident without being loud.

Five principles

1

One accent, used with discipline

Teal is the only color that highlights: eyebrows, the italic accent word in every headline, primary buttons, stat numbers, progress fills, hover states. Cyan supports it inside gradients but never stands alone. Gold, red, and green appear only as state signals, never decoration.

2

Serif speaks, sans works

Fraunces, set light at weight 400 and never bold, carries headlines and the one italic teal phrase per line. Inter does everything else. Size and tight tracking do the emphasis, not weight.

3

One container, one rhythm, one shape scale

Every section sits in the 1180px container with 40px gutters. Vertical space runs through a single rhythm token that tightens the whole page at the first breakpoint. Corners follow a four-step radius scale, with 16px as the default card.

4

Surface decides the ink and the border

On light bands, use the dark text stack and light-gray hairlines. On dark sections, use the white-alpha stack and faint white hairlines. Match the layer; never put a solid gray on a dark panel or a light-gray border on navy.

5

Dark sections are built, not flat

The heavy bands are full-bleed photographs sunk under a 170deg navy gradient overlay (alphas around .72 to .82), often with faint teal and cyan radial glows. That layered darkroom treatment is what makes the dark sections read as branded.

Logo, imagery & voice

The voice does the heavy lifting

One wordmark, knocked to pure white on the dark nav. No stock photography inside the content and no illustrations: the only imagery is full-bleed photographs under a navy overlay, hairline teal line icons, and client names set as type. The copy is short, blunt, and executive-grade, with one teal italic phrase per headline carrying the punch.

Logo

EisnerAmper

Master wordmark, gold #BF9C61, on light backgrounds.

EisnerAmper

On dark, it knocks to pure white via filter: brightness(0) invert(1).

Usage

  • One horizontal wordmark everywhere. No stacked or icon-only variant.
  • Gold (#BF9C61) on light backgrounds; pure white knockout on dark. Never recolor to anything else.
  • Keep clear space around it equal to the height of the pyramid mark, on all sides.
  • Minimum height about 28px in print and 40 to 44px on screen, so it stays legible.
  • Don't stretch, restyle, add effects, or drop the gold version onto a busy photo without the navy overlay.

Wordmark file

The on-site wordmark (gold, transparent PNG). For master vector and print files, EA's brand team holds the source.

Download wordmark PNG

Photography & imagery

Real healthcare, clinical, and operational moments, documentary and calm. On their own the photos run warm and busy. The brand move is the navy overlay: it cools them, unifies them, and lets text and the teal accent sit cleanly on top. Here are three of the site's actual photos, each shown raw, then treated the way we use it.

Raw

A working strategy session.

EisnerAmper Digital Health
AI is running. With or without you.

Treated

Navy overlay + teal accent. Text reads clean.

Raw

Clinical work meets digital.

The blind spot
AI is everywhere in your stack.

Treated

Same recipe, different photo. One family.

Raw

A clinician on the ground.

Built for safety
Governed in some lanes. Exposed in others.

Treated

Portrait crop, identical overlay.

The recipe

background: linear-gradient(170deg, rgba(10,22,40,.82), rgba(15,29,50,.88), rgba(21,37,64,.92)), url(photo.jpg) center / cover; /* plus faint teal & cyan radial-glow blobs in opposite corners */

Photo do & don't

  • Use real healthcare, clinical, data, and operational settings. Documentary and calm, not staged.
  • Always put the navy overlay over a photo before any text goes on it. Never set text on a raw photo.
  • Keep imagery cool and desaturated under the overlay, so the teal accent stays the brightest thing on screen.
  • Avoid bright, smiley, generic stock and all clip-art. Inside content, reach for a hairline teal line icon instead of a picture.

Voice specimens (real lines from the site)

AI is running. With or without you.

Hero. Short, declarative, slightly confrontational. Two beats, the second in teal italic.

Your AI doesn't have a maturity level. It has a spread.

Scorecard. Reframes the situation in one line, then makes it concrete.

Safe, rapid AI adoption ... one move at a time.

The tagline. Note the ellipsis as the pause beat. No em dashes anywhere in the copy.

CTAs & microcopy

Verb-first and specific: "Book a Consultation", "Get Your AI Maturity Score". Friction-removing fragments: "No marketing list. No sales calls unless you ask."

Voice rules

  • Write headlines in two beats: a flat statement, then a sharper turn wrapped in one teal italic <em>. One per headline, never stacked.
  • Use ellipses ( ... ) as the pause beat. Never use em dashes in copy.
  • Imagery is photographs under a navy overlay or hairline teal line icons (1.5 stroke, rounded caps). No inline content photos, no illustrations, no emoji.
  • Icons are teal, open-stroke, Feather/Lucide family. Decorative icons at 1.5 stroke; bump to 2 only when small and dense.
Color system

One palette, two surfaces

Defined once in :root and shared by both pages. Teal is the only brand accent. Gold, red, and green are reserved for state. Cyan is a gradient brightener, not a standalone accent.

Core & dark surfaces

Midnight
#0A1628
Primary dark background; also the ink on teal buttons.
Midnight 2
#0F1D32
Mid stop in dark gradient stacks.
Midnight 3
#152540
Deepest panel tone in dark gradients.
Navy
#1B2D4A
End stop of the 135deg dark gradient.

Teal family & cyan (the accent)

Teal
#00D4AA
The signature accent. Does almost all the highlighting.
Teal Dim
#00B894
Hover/active state of teal elements.
Teal Glow / Border
rgba(0,212,170,.15 / .25)
Hover washes, icon tiles, chip borders.
Cyan
#00E5FF
Gradient end-stop & faint glow only. Not a standalone accent.

Light surfaces & text

White
#FFFFFF
Page + card background; text on dark.
Off-White
#F4F6F8
Alternating light bands, inset panels.
Light Gray
#E8ECF0
Borders and hairline dividers on light.
Ink / Text
#1A1F2E
Primary body text on light. Then #3A4256, #6B7280, #9CA3AF.

Brand gold (from the logo)

Brand Gold
#BF9C61
The EisnerAmper wordmark gold. Logo and heritage use only, not the same as the bright alert gold below.

State colors (signal only)

Alert Gold
#FBBF24
Bright warning / alert callouts. A state signal, not the logo gold.
Wrong / Danger
#DC2626 / #FF4D4D
Cost-of-inaction, the old way, errors (#FF8A8A on dark).
Right / Good
#16A34A
The new way, positive comparison marks.
Matters Tint
#EEF8F5
Pale teal-green wash behind the reliability band.

Scorecard score ramp (1 to 4)

1 Reactive (red)2 Readiness (amber)3 Operationalized (teal)4 Defensible (cyan)

Pairing rules

  • Teal fill (#00D4AA) always pairs with midnight ink (#0A1628) on buttons, going to teal-dim on hover. Never white text on a teal button.
  • On dark, use the white-alpha text stack: 85% emphasis, 50% muted, 10% hairlines. Don't drop a solid gray onto navy.
  • Alternate white and off-white for adjacent light bands, separated by #E8ECF0 hairlines. Resist adding more grays.
  • Gold, red, green and the score ramp are state only. Never use them as decoration.
Typography

Fraunces speaks. Inter works.

Two families load on every page: Inter at weights 300 to 800, and Fraunces (optical size axis) at 300, 400, 600 plus italic. Headlines are Fraunces at weight 400, never bold. Emphasis inside a headline is one teal italic word.

The two fonts

Fraunces
Serif · headlines, the italic accent word, pull-quotes
Weights: 300, 400, 600, plus italic 300 / 400. Headlines are 400, never bold.
Free on Google Fonts
Inter
Sans · body, nav, eyebrows, buttons, stat numbers, labels
Weights: 300, 400, 500, 600, 700, 800.
Free on Google Fonts

Both load with one line (already on the live pages):

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&display=swap" rel="stylesheet">

Headline specimen

Safe, rapid AI adoption one move at a time.

Fraunces, weight 400, clamp(40px ... 64px), line-height 1.08, letter-spacing -.03em. The accent phrase is <em> in teal italic.

Type scale

Display / H1
Fraunces 400
Display
Section / H2
Fraunces 400
Section heading
Card / H3
Fraunces 400
Card title
Lead
Inter 400 / 1.7
Lead paragraph under a heading
Body
Inter 400 / 1.65
Body copy, the working default
Small
Inter 400
Small / meta / footnote
Eyebrow
Inter 700 / .18em
Eyebrow kicker
Button
Inter 600
Button label

Two number treatments: data vs verdict

98%

Hard proof metric. Inter, weight 800, tight tracking. Data.

2.8

Scorecard score readout. Fraunces, teal. A verdict.

Eyebrow & pull-quote

The signature kicker

Uppercase Inter 700 in teal, .18em tracking, with the short 24px teal dash before it. Keep the dash.

"The reliability playbook that built your reputation wasn't built for AI."

Pull-quote: Fraunces 300 italic. The lightest weight, reserved for testimonial voice.

Spacing, layout & shape

Simple on purpose: one container, one rhythm

A single 1180px centered container holds every section, with 40px side gutters that drop to 24px on small screens. Vertical rhythm runs through one --section-pad token (100px, tightening to 72px). Four corner radii, soft low shadows, hairline borders matched to the surface.

Radius scale

6px
10px
16px
24px
100px pill
circle

16px (--r-lg) is the default card corner. 100px is reserved for pills (buttons, bars, chips). 50% for circles (badges, dots, glows).

Shadows

Table rest
0 4px 24px /.06
Card hover
0 12px 40px /.08
Teal button glow
0 8px 30px teal/.3

Neutral shadows stay between .06 and .08 opacity. The only colored glow is the teal button hover. No heavy drop shadows.

Breakpoints

600px (small phone)780px (scorecard)900px (primary collapse)1180px container max
Components

One vocabulary, two surfaces

Every button builds from one base plus a single color variant. Two card families: light cards that lift on hover, and dark translucent cards that tint faint-teal. Hover the examples below ... they're live.

Buttons (hover them)

Primary Outline on dark Ghost / back Small Disabled

Pill (100px radius), 2px transparent base border so variants swap color with no layout shift. Primary lifts 2px with a teal glow on hover. Disabled strips the motion.

Primary on light Outline on light With arrow

On white/off-white sections, the secondary is the teal outline. Pick the variant by background, not by importance.

Cards

Light service card

White, solid border, lifts 4px on hover with a soft shadow and teal border. Hover it.

Dark translucent card

rgba white .04 on the photo background, faint white border, tints teal on hover. Used for problem, plan, and pillar cards.

Cost of inaction

The one card with a red left bar and coral heading. Red means stakes.

Why it matters

White panel with a 4px teal left bar. The positive counterpart to the red inaction card.

Pillar tag Eyebrow

The bordered pill is the quiz pillar tag. The eyebrow is not a pill ... it's a teal label with a leading dash.

Scorecard UI

Selected answer: teal fill, solid teal border, 1px teal ring, filled dot.
Default answer (hover me: nudges 2px right and tints teal).
Question 3 / 5

Results breakdown (bars animate)

Clinical AI
1
EHR-Embedded AI
2
Enterprise AI
3
Oversight
4

Each fill grows over .6s and is color-graded red, amber, teal, cyan by the 1 to 4 score.

Motion & animation

Restrained and confident

Two speeds. A fast, uniform lift on hover (.15s to .22s, plain ease) and a single slow fill for data reveals (.35s to .6s). Teal is the motion accent. There is no scroll-triggered motion anywhere, and only two animations ever loop. Cards rise on the Y axis, list choices nudge on the X axis, and disabled elements lose their motion entirely.

Live demos

Hover for the lift

-2px translateY + teal glow, .2s ease.

Submit spinner: spin .9s linear infinite.

Step content rises 8px and fades in over .35s.
National Health SystemsAcademic Medical CentersFederal HealthRetail PharmacyChildren's Hospitals National Health SystemsAcademic Medical CentersFederal HealthRetail PharmacyChildren's Hospitals

Client ticker stands in for a logo wall: names set as type, 28s linear loop, pauses on hover, edges faded.

Easing & duration

MotionDurationEasingWhere
Hover lift (buttons, cards).15s ... .22seaseInteractive feedback
Progress / step fade.35seaseQuiz advance, step reveal
Results score bars.6seaseData reveal (slowest)
Spinner.9slinearSubmitting state (loops)
Client ticker28s ... 32slinearAmbient marquee (loops)

No cubic-bezier, no ease-in-out, no spring. Hover feedback is snappy and uniform; data reveals are gentle; loops are mechanical.

Motion rules

  • Keep hover feedback in the .15s to .22s band with plain ease. Don't introduce ease-in-out, cubic-bezier, or spring curves.
  • Lift cards and buttons on the Y axis (translateY -1 to -4px); nudge list and option rows on the X axis (translateX 2px). Cards rise, choices slide.
  • Pair every lift with a soft shadow, never one without the other. Teal-tinted glow for the primary button, neutral for cards.
  • Use the slow fills (.35s to .6s) only for data being revealed. Don't slow hovers to match ... the speed contrast is the system.
  • Hold the line on no scroll-triggered motion. Content is present on load.
  • Strip motion from disabled states. Movement signals an actionable element.
Building static assets

For the one-pager and print

The system is screen-first, but it carries straight into a flat one-pager. A few quick calls so a static asset still reads as EisnerAmper Digital Health: