---
name: Highlight
description: "Worth including as a prime example of modern, dark-themed SaaS design for developer tools, balancing technical clarity with visual appeal."
version: alpha

colors:
  background: "#0D0225"
  primary: "#FFFFFF"
  secondary: "#DFDFDF"
  tertiary: "#72E4FC"
  neutral: "#9D97AA"
  bg-soft: "#30294E"
  line: "rgba(48, 41, 78, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 58px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.44
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 44px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 44px

---

## Overview

An open-source full-stack monitoring platform for modern web applications.

*A dark, clean IDE dashboard for full-stack monitoring.*

## Colors

Dark mode first with high-contrast cyan accents and a subtle neon yellow highlight.

- **Background (`#0D0225`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#DFDFDF`)** — uses `ink-soft` token
- **Accent (`#72E4FC`)** — uses `accent` token
- **Muted (`#9D97AA`)** — uses `muted` token
- **Borders (`rgba(48, 41, 78, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

Centered content with wide margins, utilizing flexbox for feature tabs.

*Rhythm:* Consistent 4px grid base with generous whitespace for readability.

## Elevation & Depth

- rgb(108, 55, 244) 8px 8px 0px -2px
- Borders: 1px solid rgba(48, 41, 78, 1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 44px

## Components

- **button:** Pill-shaped buttons with solid cyan primary and outlined secondary variants.
- **card:** Dark cards with subtle borders, often containing integration icons.
- **chip:** Tab-like chips for feature navigation (Session Replay, Error Monitoring, etc.).
- **input:** Minimalist dark inputs, though not prominently featured in the hero.
- **hero:** Large centered headline with accent color, stacked CTAs, and feature overview tabs.

## Do's and Don'ts

**Don't:**
- Don't use a light theme — screenshot shows a dark mode interface with a deep navy background (#0D0225).
- Don't use a secondary accent color — screenshot shows a single dominant high-chroma cyan accent (#72E4FC) for buttons and highlights.
- Don't use decorative serif fonts — screenshot shows a clean, modern humanist sans-serif (Poppins) for all text.
- Don't use sharp corners everywhere — screenshot shows a mix of subtle 8px/16px rounded corners and 44px pill shapes.
- Don't use low-contrast text — screenshot shows high-contrast white (#FFFFFF) and light gray (#DFDFDF) on the dark background.
- Don't clutter the header — screenshot shows a clean, top-aligned navigation with clear primary/secondary action buttons.

---

## System Prompt (paste into AI agent)

```
This is a developer-focused SaaS landing page for an open-source monitoring platform. The design DNA features a dark mode interface with a deep navy background (#0D0225), high-contrast white text (#FFFFFF), and a single dominant cyan accent color (#72E4FC). Typography uses a modern humanist sans-serif (Poppins) for a clean, technical feel. Key elements include large, bold headlines, pill-shaped buttons (solid cyan and outlined variants), and feature navigation tabs. The layout is centered and spacious, emphasizing readability and clear calls to action. Critical donts: never use a light theme, never introduce secondary accent colors, and never use decorative serif fonts. The design is clean, professional, and optimized for a developer audience.
```