<!-- Generated by ExtractVibe — https://extractvibe.com/brand/happyuptime.com -->
<!-- Extracted: 2026-05-02T00:04:13.437Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Happy Uptime - Uptime Monitoring & Status Pages"
description: "Happy Uptime projects a serious, highly technical, and slightly enthusiastic vibe, tailored for engineers who need reliable and instant monitoring. It's about providing critical information clearly and efficiently, with a focus on functionality and precision."
colors:
  primary: "#18181b"
  tertiary: "#059669"
  neutral: "#022c22"
  surface: "#ffffff"
  on-surface: "#ffffff"
  on-surface-secondary: "#022c22"
  border: "#f4f4f5"
  warning: "#f59e0b"
  success: "#059669"
  info: "#3b82f6"
  surface-dark: "#09090b"
  on-surface-dark: "#fafafa"
typography:
  display-lg:
    fontFamily: "Geist Variable"
    fontSize: "60px"
    fontWeight: "700"
    lineHeight: "66px"
    letterSpacing: "-1.08px"
  headline-lg:
    fontFamily: "Geist Variable"
    fontSize: "33px"
    fontWeight: "700"
    lineHeight: "38.4px"
    letterSpacing: "-0.594px"
  headline-md:
    fontFamily: "Geist Variable"
    fontSize: "15px"
    fontWeight: "600"
    lineHeight: "23.2px"
    letterSpacing: "-0.27px"
  body-md:
    fontFamily: "Geist Variable"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "23.25px"
    letterSpacing: "-0.045px"
rounded:
  sm: "14px"
  lg: "100px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#fafafa"
    rounded: "3.35544e+07px"
    padding: "0px 28px"
    fontSize: "15px"
    fontWeight: "500"
    borderColor: "#27272a"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#18181b"
    textColor: "#fafafa"
    rounded: "14px"
    padding: "10px 12px"
    fontSize: "15px"
    fontWeight: "400"
    borderColor: "#27272a"
    borderWidth: "1px"
---

# Happy Uptime - Uptime Monitoring & Status Pages — Design System

## Overview

Happy Uptime's design atmosphere is a direct manifestation of its developer-first ethos, embodying the archetypes of The Sage and The Hero. The interface prioritizes clarity, precision, and efficiency, mirroring the critical nature of uptime monitoring. It speaks to engineers who demand immediate, reliable data without distraction. This design is not about playful aesthetics or decorative elements; it is a functional tool built for critical operations. The visual language draws inspiration from industry leaders like Datadog, PagerDuty, and Grafana, focusing on robust information display and intuitive interaction patterns that engineers already understand and trust. Every design decision supports the rapid assimilation of complex technical information, ensuring that users can quickly identify and address issues.

The emotional register is one of controlled confidence and unwavering reliability. The design communicates competence and authority, reassuring users that their systems are under vigilant watch. It avoids any visual noise or ambiguity that could impede rapid decision-making. This is a system built for high-stakes environments where every second counts, and the design reflects that urgency with a streamlined, no-nonsense approach. It is an environment where data integrity and operational insight are paramount, presenting information with an unyielding commitment to accuracy and immediate utility. The interface serves as a reliable co-pilot for engineers, providing the critical intelligence needed to maintain system stability.

**Key characteristics:**

- Vibe — developer-first, technical, reliable, efficient, precise, modern
- Archetypes — The Sage, The Hero
- Comparable to — Datadog, PagerDuty, Grafana, UptimeRobot
- Design era — contemporary-minimal
- Emotional tone — reliable-authoritative
- Target audience — Software engineers, DevOps professionals, and technical teams responsible for maintaining the uptime and performance of websites, APIs, and services.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is deliberately austere, centering on a primary black (`#18181b`) and a stark white (`#ffffff`). This high-contrast scheme ensures maximum readability and minimizes visual fatigue, crucial for engineers monitoring dashboards for extended periods. The absence of additional primary colors reinforces the brand's serious, technical, and precise nature, signaling a focus on data integrity over decorative flair. This minimalist approach aligns with the efficiency and reliability Happy Uptime promises, ensuring that visual attention is directed solely to critical information.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#18181b` | Near-Black |
| accent / tertiary | `#059669` | Teal |
| background | `#ffffff` | White |
| text | `#ffffff` | White |
| secondary text | `#022c22` | Near-Black |
| border | `#f4f4f5` | White Smoke |
| muted | `#022c22` | Near-Black |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#09090b` | Black |
| text | `#fafafa` | Off-White |
| secondary text | `#a1a1aa` | Dark Silver |
| muted | `#a1a1aa` | Dark Silver |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#059669` | Confirmations, positive states |
| warning | `#f59e0b` | Caution, intermediate states |
| info | `#3b82f6` | Neutral information, tips |

## Typography

The type system exclusively employs Geist Variable for all textual elements. This choice reflects Happy Uptime's commitment to modern, technical precision and high legibility. Geist Variable's clean lines and optimized readability across various sizes ensure that critical data, labels, and alerts are instantly comprehensible. Hierarchy is established through weight and size variations within Geist Variable, maintaining visual consistency while clearly differentiating information importance. This unified typographic approach reinforces the brand's developer-first, efficient, and precise identity, avoiding any stylistic distractions.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Geist Variable | body | self-hosted | 400, 500 |
| Geist Variable | heading | self-hosted | 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Geist Variable | 60px | 700 | 66px | -1.08px |
| Heading 2 | Geist Variable | 33px | 700 | 38.4px | -0.594px |
| Heading 3 | Geist Variable | 15px | 600 | 23.2px | -0.27px |
| Body | Geist Variable | 15px | 400 | 23.25px | -0.045px |

### Conventions

- Heading case — sentence-case
- Body line-height — 23.25px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 25px 50px -12px` |
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` |

## Shapes

Border-radius scale:

- `sm` — 14px
- `lg` — 100px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#fafafa`
- Radius — `3.35544e+07px`
- Padding — `0px 28px`
- Font size — `15px`
- Font weight — `500`
- Border — `1px solid #27272a`
- Sample copy — "Try speed test"

**Secondary**

- Background — `#18181b`
- Text — `#fafafa`
- Radius — `14px`
- Padding — `10px 12px`
- Font size — `15px`
- Font weight — `400`
- Border — `1px solid #27272a`
- Sample copy — "AWS S3"

## Do's and Don'ts

### Do

- Use Geist Variable 700 for main headings and Geist Variable 600 for subheadings, always in sentence-case.
- Apply Geist Variable 400 or 500 for body text with a precise line-height of 23.25px.
- Utilize the primary brand color #18181b for dark mode text and light mode primary elements, and #059669 as the accent color for highlights and key actions.
- Implement a dark mode background of #09090b with #fafafa text, and a light mode background of #ffffff with #18181b text.
- Design outline buttons with #fafafa text, a #27272a border, and a large border-radius of 3.35544e+07px (effectively pill-shaped), with 0px 28px padding.
- Design secondary buttons with a #18181b background, #fafafa text, a #27272a border, and a small border-radius of 14px, with 10px 12px padding.
- Maintain a consistent base unit of 2px for all spacing measurements to ensure visual harmony.
- Use subtle, multi-layer shadows on card elements, specifically `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0` for depth without overt gradients.

### Don't

- Do not use gradients anywhere in the design; the brand's aesthetic is flat with subtle shadows.
- Avoid using emojis in any marketing or product copy; the brand maintains a serious and technical tone.
- Do not use exclamations in copy; the brand's communication is direct and matter-of-fact.
- Do not use title case for headings; all headings should strictly adhere to sentence-case.
- Avoid using any font families other than Geist Variable; consistency in typography is key.
- Do not apply shadows to buttons; shadows are reserved for card elements to provide subtle depth.
- Do not use overly playful or casual language; maintain a tone that is serious, technical, and moderately enthusiastic.
- Do not deviate from the defined border radii of 14px for small elements and 100px (or effectively pill-shaped) for large elements like outline buttons.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 7/10 | irreverent |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented imperative verbs with benefit-driven phrases
- Rhetorical devices — repetition, rhetorical question

### Sample copy

> Know when it's down.Know why.

> Built for engineers who get paged

> When your API stalls, we tell you if it's your code or OpenAI's outage.

> Everything below cuts MTTR. Nothing below adds noise.

> Monitoring that tells you why things break, not just that they broke.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| wordmark | — | svg | [link](https://extractvibe.com/api/assets/brands/happyuptime.com/logo-svg-1.svg) | 98% |
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/happyuptime.com/logo-0.svg) | 62% |

## Sources

- Official brand guidelines — https://happyuptime.com/brand
- Live brand page — https://extractvibe.com/brand/happyuptime.com
- Raw JSON — https://extractvibe.com/api/brand/happyuptime.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/happyuptime.com/design.md
- Extracted — 2026-05-02T00:04:13.437Z
- Generator — ExtractVibe vv1
- Quality score — 100/100