HealthMe
Internal design reference

HealthMe brand guidelines

The single source of truth for designing every HealthMe interface — web, admin, and mobile. Grounded in FRONTEND.md and implemented in @healthme/ui.

Target aesthetic: calm, trust-forward, premium — inspired by Linear, Stripe, and Notion. Clean surfaces, restrained color, thoughtful hierarchy.

§1 · Core philosophy

Build systems, not screens

HealthMe UI must feel like one cohesive product. Reuse components, spacing, typography, and interaction patterns across every surface.

  • Build systems, not isolated screens — every UI belongs to one design system.
  • Component-first development: primitives → shared → feature → page sections.
  • Neutral-heavy interfaces with brand color reserved for CTAs and highlights.
  • One primary action per section; secondary actions use outline or ghost variants.
  • Mobile-first layouts that scale up with flex, grid, and stacking — not breakpoint chaos.
  • Design for real content: empty states, long names, errors, loading, and missing images.
  • Accessibility is mandatory: semantic HTML, keyboard nav, contrast, labels, focus states.
  • Motion is intentional and fast (150–300ms) — guide attention, never decorate.

§8–9 · Color

Color palette

One primary teal, one warm rose accent, neutral surfaces, and semantic status colors. Brand hues are for CTAs and highlights — not backgrounds.

Brand

Primary

--primary

hsl(184 90% 32%)

Primary CTAs, links, focus rings, key metrics

Accent

--accent

hsl(347 77% 50%)

Sparingly — highlights, secondary emphasis, alerts

Surfaces & neutrals

Background

--background

hsl(0 0% 100%)

Page canvas

Card

--card

hsl(0 0% 100%)

Grouped content, panels

Secondary

--secondary

hsl(210 20% 96%)

Subtle fills, hover states

Muted

--muted

hsl(210 20% 96%)

Disabled areas, secondary text backgrounds

Semantic

Success

--success

hsl(152 60% 36%)

Verified, funded, positive trends

Warning

--warning

hsl(33 92% 48%)

Pending review, caution

Destructive

--destructive

hsl(0 72% 51%)

Errors, cancellations, destructive actions

Info

--info

hsl(205 90% 44%)

Informational badges, tips

§6–7 · Typography

Type system

Inter is the sole typeface. Use the strict scale below — never pick arbitrary sizes. Hierarchy comes from size, weight, spacing, and contrast.

Inter

Primary font via next/font

Weights: 400, 500, 600, 700
Caption and metadatatext-xs
Secondary body, labels, table cellstext-sm
Default body copytext-base
Lead paragraphs and emphasistext-lg
Section subheadingstext-xl
Page section titlestext-2xl
Marketing headlinestext-4xl
Hero headlinestext-5xl

§10–12 · Spacing & layout

Spacing & containers

All spacing uses multiples of 4 or 8. When a screen feels crowded, increase spacing before changing colors.

p-2 / gap-2

8px

p-4 / gap-4

16px

p-6 / gap-6

24px

p-8 / gap-8

32px

max-w-3xl

Long-form copy, settings, articles

max-w-5xl

Component previews, focused tools

max-w-7xl

Marketing pages, dashboards, tables

§4–5 · Components

Component library

Default to @healthme/ui (shadcn-based) before building custom UI. Customize variants to match HealthMe — never ship default template aesthetics.

Buttons

One dominant action per section: use default or accent for primary, outline or ghost for secondary.

Badges

Soft semantic tints for status — never overpower surrounding content.

DefaultNeutralSuccessWarningErrorInfoOutline

Form inputs

Cards & domain

Total raised
₦2.75M12%

Funding progress

States

Never leave dead space — every data surface needs empty, loading, and error states.

No campaigns yet

Verified campaigns will appear here once live.

§19–21 · Motion

Animation

Motion guides attention and communicates state. Keep it fast, smooth, and subtle.

150ms

Fast

Hovers, micro-interactions

200ms

Base

FadeIn, dropdowns, toasts

300ms

Slow

Modals, page transitions (max)

Animate: modals, dropdowns, hover states, skeletons, notifications. Avoid animating everything or using motion purely for decoration.

§22–29 · UX

UX & product rules

Reduce cognitive load. Clarity beats creativity. Every interface must be responsive, accessible, and production-ready.

Dashboards

Key metrics first, then actions, then secondary analytics. Avoid card overload.

Forms

Minimal fields, clear labels, inline validation. Long flows use steps and progress.

Tables

Readable spacing, sticky headers when needed, search and filters always accessible.

Accessibility

Semantic HTML, keyboard navigation, contrast ratios, visible focus, screen reader labels.

Quality bar

Do & don't

Every interface should feel startup-ready, investor-ready, and enterprise-capable — never generic AI template UI.

Do

  • Use @healthme/ui components and tokens before creating custom UI.
  • Keep generous whitespace — increase spacing before adding more color.
  • Use max-width containers (max-w-3xl, max-w-5xl, max-w-7xl) for readable layouts.
  • Prefer subtle borders and shadows for depth; one elevation level at a time.
  • Reuse existing spacing, typography, and patterns from nearby screens.
  • Show skeleton loaders, empty states, and error states on every data surface.

Don't

  • Rainbow dashboards or excessive gradients and glassmorphism.
  • Default shadcn template aesthetics — customize to HealthMe brand.
  • Competing primary CTAs in the same section.
  • Random spacing values outside the 4/8px system.
  • Decorative animation that does not communicate state or guide attention.
  • Designing only with placeholder text — plan for production content.

For builders

Resources

Token definitions and component source live in the monorepo. Extend the system — do not fork it per app.

Kitchen sink

Live component preview for design review — buttons, inputs, cards, states, and tabs.

Open kitchen sink

Token locations

  • packages/ui/src/tokens/
  • packages/ui/src/theme/globals.css
  • packages/ui/tailwind-preset.ts
  • FRONTEND.md (repo root)