---
name: Superlog Sh
description: "This site is an excellent example of a modern, developer-focused SaaS landing page, effectively balancing a dark, technical aesthetic with clear, confident typography and a highly functional user inte"
version: alpha

colors:
  background: "#141415"
  primary: "#F5F5F6"
  secondary: "#8A8A8F"
  tertiary: "#485AE2"
  neutral: "#5A5A60"
  bg-soft: "#232325"
  line: "rgba(255,255,255,0.07)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.54px"
  h2:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.24px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "2px"

rounded:
  sm: 2px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

AI-powered observability that automatically generates resolution PRs for production incidents.

*A tireless senior engineer that detects, analyzes, and autonomously fixes production bugs.*

## Colors

High-contrast dark mode using deep blacks and near-whites, with a single electric blue accent for primary actions.

- **Background (`#141415`)** — uses `bg` token
- **Primary text (`#F5F5F6`)** — uses `ink` token
- **Secondary text (`#8A8A8F`)** — uses `ink-soft` token
- **Accent (`#485AE2`)** — uses `accent` token
- **Muted (`#5A5A60`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.07)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

## Layout

Centered single-column layout with generous margins, transitioning to a multi-column grid for feature showcases.

*Rhythm:* Generous vertical padding (32px-64px) separates major sections, while a base 8px grid governs component spacing.

## Elevation & Depth

- 0px 12px 30px rgba(0,0,0,0.24)
- 0px 28px 100px rgba(0,0,0,0.65)
- 0px 6px 14px -6px rgba(72,90,226,0.55)
- Borders: 1px solid rgba(255,255,255,0.07)

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary buttons use a vibrant blue background with white text and rounded pill corners, featuring a subtle glow shadow on hover.
- **card:** Cards are semi-transparent dark panels with thin white borders and large border radii, housing floating UI elements or code previews.
- **chip:** Badges and status indicators use small, uppercase text with thin borders or subtle color backgrounds.
- **input:** The terminal prompt UI is a dark, rounded container with a blinking blue cursor and a 'COPY' action button.
- **hero:** A dark, expansive top section featuring a large headline, a subtle rocket launch background image, and a floating coding agent terminal interface.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated gradients — screenshot shows a monochromatic dark theme with a single blue accent.
- Don't use playful, rounded sans-serifs — screenshot uses a structured humanist sans-serif (Inter).
- Don't use light mode interfaces — screenshot shows a dedicated dark mode design.
- Don't use thin, low-contrast borders — screenshot uses subtle but visible 0.07 opacity white borders.
- Don't use centered text for everything — screenshot uses left-aligned text for feature descriptions and center-aligned for hero sections.
- Don't use complex, multi-colored badges — screenshot uses simple, muted uppercase labels with thin borders.

---

## System Prompt (paste into AI agent)

```
A modern developer tool landing page for Superlog, an AI-powered observability platform. The design is built on a deep, near-black dark mode (#141415) with high-contrast white text (#F5F5F6) and a single vibrant electric blue accent (#485AE2) for primary actions. Typography utilizes a clean humanist sans-serif for body and display text, paired with a geometric monospace font for terminal and code elements. The layout is spacious and centered, relying on generous vertical rhythm to separate sections. Key critical design constraints include avoiding light mode interfaces, rejecting playful or overly decorative typography, and maintaining high contrast between text and dark backgrounds. The aesthetic is refined, technical, and professional, emphasizing clarity and efficiency over visual flair, making it a perfect example of modern SaaS developer tooling design.
```