Articulink

Brand Guidelines

v1.0March 2026

Badges

Badges communicate status, categories, and counts. Use semantic colors consistently across all products.

Status Badges

Status badges indicate the state of items. Use consistent colors: green for success, amber for warning, red for error, blue for info.

SuccessWarningErrorInfoNeutral
className="px-3 py-1 rounded-full bg-success/10 text-success text-sm font-medium"

Appointment Status

Specific badge variants for appointment states used in Portal and Admin.

ScheduledConfirmedIn ProgressCompletedCancelledNo Show

Scheduled/Confirmed

bg-tide/10 text-tide

In Progress

bg-sunshine/20 text-amber-600

Completed

bg-success/10 text-success

Role Badges

Role badges identify user types in the system.

AdminTherapistClientParent
className="px-3 py-1 rounded-full bg-gradient-to-r from-surf to-tide text-white text-sm font-medium"

Category Badges

Category badges label content types, typically used on blog posts and resources.

Speech TherapyTips & TricksSuccess StoryFor Parents
className="px-3 py-1.5 rounded-lg bg-tide/10 text-tide text-xs font-semibold uppercase tracking-wide"

Count Badges

Count badges show numeric values, often paired with icons or buttons.

3
Messages12
Appointments247

Notification badge

absolute -top-1 -right-1 w-5 h-5 rounded-full bg-error text-white text-xs font-bold

Inline count

px-2 py-0.5 rounded-full bg-tide text-white text-xs font-bold

Step Badges

Step badges indicate progress through multi-step workflows.

2
3
4

Completed

bg-success text-white

Active

bg-tide text-white ring-4 ring-tide/20

Future

bg-bg-secondary text-text-secondary

Sizes

Use small badges in dense UI, medium for standard use, and large for emphasis.

SmallMediumLarge

Small

px-2 py-0.5 text-xs

Medium (default)

px-3 py-1 text-sm

Large

px-4 py-1.5 text-base

Usage Guidelines

Do
  • Use consistent colors for status types
  • Keep badge text concise (1-2 words)
  • Use semantic colors (green=success, red=error)
  • Position count badges consistently
  • Use rounded-full for pills, rounded-lg for tags
Don't
  • Use badges for long text
  • Mix badge shapes inconsistently
  • Use arbitrary colors for status
  • Stack multiple badges when one suffices
  • Make badges clickable (use buttons instead)