Brand Guidelines

Official logos, colors, and assets for StatusPage.fyi

Logo

Full Logo

Use this as the primary logo

StatusPage
StatusPage

Icon Only

Use when space is limited (favicons, app icons)

Background Variations

StatusPage
StatusPage
StatusPage

Brand Colors

Primary (Emerald)

#10b981

hsl(160 84% 39%)

Main brand color, CTAs, links, active states

Background

#0f172a

hsl(222 47% 11%)

Page background, dark theme base

Card

#1e293b

hsl(217 33% 17%)

Card backgrounds, elevated surfaces

Muted

#334155

hsl(215 25% 27%)

Disabled states, secondary backgrounds

Border

#2d3a4f

hsl(217 33% 25%)

Borders, dividers, outlines

Foreground

#f8fafc

hsl(210 40% 98%)

Primary text color

Muted Foreground

#94a3b8

hsl(215 20% 65%)

Secondary text, descriptions

Destructive

#ef4444

hsl(0 84% 60%)

Errors, delete actions, alerts

Status Colors

These colors indicate service health and should be used consistently.

Operational

#10b981

Service is up and running

With pulse animation

Degraded

#f59e0b

Service experiencing issues

With pulse animation

Down

#ef4444

Service is unavailable

With pulse animation

Typography

Font Family

Inter (System UI fallback)

Heading 1

The quick brown fox

Heading 2

The quick brown fox

Heading 3

The quick brown fox

Body

The quick brown fox jumps over the lazy dog.

Small / Caption

The quick brown fox jumps over the lazy dog.

Usage Guidelines

Do

  • Use the logo with adequate clear space
  • Maintain the original aspect ratio
  • Use on contrasting backgrounds
  • Use the icon alone for small spaces
  • Keep the emerald green as the primary accent

Don't

  • Stretch or distort the logo
  • Change the logo colors arbitrarily
  • Add effects like shadows or gradients
  • Place on busy or low-contrast backgrounds
  • Recreate or modify the icon design