Xirp

---
version: alpha
name: Xirp
description: Xirp connects your agents to real context—powered by Spotify Portal.
colors:
  primary: "#f8fafc"
  secondary: "#84848c"
  tertiary: "#f56031"
  neutral: "#000000"
  border: "#374151"
  brand-h-i-s-black: "#171f2f"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: spotifyMix
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: spotifyMix
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.26
    letterSpacing: -0.032em
  headline-sm:
    fontFamily: spotifyMix
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.66
    letterSpacing: -0.038em
  headline-xs:
    fontFamily: spotifyMix
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: spotifyMix
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 64px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#09090b"
    rounded: "{rounded.full}"
    padding: 16px 28px
    height: 64px
  button-secondary:
    textColor: "#09090b"
    rounded: "{rounded.full}"
    padding: 16px 28px
    height: 64px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Xirp: Dark Mode With White Pill CTAs and Safety-Orange Labels

## Overview

This system is built for technical audiences: platform teams, SREs, and developers. The tone is confident, tool-like, and minimal. Dark mode is default; contrast and spacious margins carry hierarchy. Orange accents signal actions and labeled entities, while copy density stays low above the fold and grows in the explainer sections.

## Colors

- Primary (#f8fafc): On-surface text and key icons over black.
- Secondary (#84848c): Muted body text and metadata on dark surfaces.
- Tertiary (#f56031): Accent for labels, emphasis, and high-intent links.
- Neutral (#000000): Core background across the site.
- Border (#374151): Subtle dividers and strokes on dark surfaces.
- brand-h-i-s-black (#171f2f): Deep utility tint for illustrations or alt sections.
- Surface ({colors.neutral} → #000000): Default canvas for all sections.
- on-surface ({colors.primary} → #f8fafc): Legible text color over the dark canvas.

## Typography

All type tokens use Spotify Mix (spotifyMix). Availability: custom/self-hosted; an external agent should not assume it can load this face. Practical substitutes with similar proportions and warmth: Inter, Manrope, or Work Sans. Headline levels: 48px/700/-0.025em for hero statements; 38px/700/-0.032em and 29px/700/-0.038em for section heads; 23px/600 for subheads. Body runs at 18px/400 with 1.56 line height. Keep tracking as specified; the slightly negative letter-spacing is part of the voice.

## Layout

Spacing runs on a stepped scale: 8, 16, 28, 64, 120. Use 64px as the primary vertical rhythm between major blocks; 120px introduces section breaks or hero-to-content transitions. Internal padding in cards and compact components is 16px; medium gutters between paired columns land at 28px. The page reads as a two-column hero (copy left, art right), followed by stacked feature rows with generous outer margins.

## Elevation & Depth

Depth is restrained. Use measured shadows for floating surfaces: sm for small UI or chips, md for menus/overlays, lg for large mock windows or modals. xl and inner are none. When in doubt, prefer the Border (#374151) token and tonal contrast over heavy shadows to separate elements on black.

## Shapes

Two radii govern the language: 8px corners for cards and framed surfaces, and 9999px for pills. CTAs, chips, and small filters use full rounding to signal interactivity; content containers stay at 8px to feel utilitarian.

## Components

Button variants
- Primary Button: Background #f8fafc, text #09090b, 64px tall, 16px×28px padding, full pill radius. Use for primary actions like "Join the beta."
- Secondary Button: Text #09090b, pill radius, 64px tall, padding 16px×28px. Background is intentionally unspecified — use only on light surfaces where the dark text remains readable.
- Link Button: Text #f8fafc, square corners. Use inline or as minimal CTAs on dark backgrounds.
- Card: Background #000000, text #f8fafc, 8px radius, 16px padding.

### Announcement Bar
A full-width strip at the top for webinar/news. Background uses Tertiary (#f56031) with contrasting dark text. Height is compact; keep inner padding at 16px and include a trailing arrow.

### Header Nav
Black bar with logo left and CTAs right. Primary pill CTA at 64px height; a compact filter/control (e.g., Technology menu) uses secondary text color (#84848c) and border #374151.

### Hero Block
Headline uses headline-lg (48px/700/-0.025em) over Neutral (#000000) with on-surface text (#f8fafc). One primary pill CTA sits below the body copy spaced by 28px.

### Orange Label Chips
Small, high-contrast tags used in diagrams and callouts. Background #f56031; text #000000; radius 9999px; horizontal padding 8–16px depending on length. Use to denote entities like services or indexes.

### App Window Mockup
A large card representing the product UI. 8px corners, Border #374151 for the frame, shadow lg for lift, and internal padding 16px–28px. Body text stays at 18px.

### Feature Rows
Each feature ("Agent," "Workspace," "Documentation," "Flexibility") pairs headline-sm or headline-md with a paragraph. Vertical spacing between rows: 64px; between heading and body: 16–28px.

### Footer
Two columns: Resources and Legal. Text uses Secondary (#84848c) links on black; divider lines use Border (#374151).

## Do's and Don'ts

- Do reserve Tertiary (#f56031) for labels, announcement bars, and the most prominent inline accents.
- Do keep primary CTAs at 64px height with full pill corners; smaller buttons read as links instead.
- Do use 64px blocks and 120px section breaks to maintain the page's calm rhythm.
- Don't place the Secondary button on pure black; its dark text is intended for light surfaces.
- Don't add extra radii — stick to 8px for containers and 9999px for pills.
- Don't overuse heavy shadows; prefer Border (#374151) and spacing for separation.

## Agent Prompt Guide

Quick color reference
- Text: #f8fafc
- Background: #000000
- Border: #374151
- Accent: #f56031

1) Build the hero
- Section background: #000000; max-width: 1200px; outer padding: 64px top/bottom.
- h1: font-family: 'spotifyMix', sans-serif; font-size: 48px; font-weight: 700; letter-spacing: -0.025em; color: #f8fafc.
- Body: 18px/1.56; color: #f8fafc at 80% opacity or #84848c.
- Primary CTA: height 64px; padding 16px 28px; border-radius: 9999px; background #f8fafc; text #09090b.

2) Add an announcement bar
- Full width strip above header: background #f56031; text color #000000; padding 16px; small arrow icon in #000000.

3) Create an app window mock card
- Container: background #000000; border: 1px solid #374151; border-radius: 8px; padding: 16px 16px 28px; box-shadow: oklab(0 0 0 / 0.2) 0px 25px 50px -12px; text #f8fafc.
- Title: 23px/600; body: 18px/1.56.

4) Diagram label chips
- Inline block: background #f56031; color #000000; border-radius: 9999px; padding: 4px 12px; font: 18px/1 'spotifyMix', sans-serif.

5) Footer
- Background #000000; text #84848c; links inherit #f8fafc; dividers: 1px solid #374151; grid gap: 28px; section padding: 64px top/bottom.

## Similar Brands

- Vercel — Dark canvas, crisp white type, and minimal color. Xirp diverges with stronger accent usage and labeled chips as a recurring motif.
- Linear — High-polish dark UI and pill CTAs; Linear leans into gradients and purple accents where Xirp opts for flat safety orange.
- Stripe — Technical clarity and generous spacing; Stripe is brighter overall and relies more on blue/indigo accents.
- Replit — Developer-first dark aesthetic with vivid accent moments; Replit is more playful, while Xirp stays austere and systems-oriented.

:root {
  /* Colors */
  --color-primary: #f8fafc;
  --color-secondary: #84848c;
  --color-tertiary: #f56031;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-h-i-s-black: #171f2f;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.26;
  --text-headline-md-tracking: -0.032em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 700;
  --text-headline-sm-leading: 1.66;
  --text-headline-sm-tracking: -0.038em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.56;
  --font-spotifymix: "spotifyMix";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 64px;
  --spacing-xl: 120px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: #09090b;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 16px 28px;
  --button-primary-height: 64px;
  --button-secondary-text-color: #09090b;
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 16px 28px;
  --button-secondary-height: 64px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Xirp connects your agents to real context—powered by Spotify Portal.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.973,
          0.98,
          0.988
        ],
        "hex": "#f8fafc"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.518,
          0.518,
          0.549
        ],
        "hex": "#84848c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.961,
          0.376,
          0.192
        ],
        "hex": "#f56031"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-h-i-s-black": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.09,
          0.122,
          0.184
        ],
        "hex": "#171f2f"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.973,
          0.98,
          0.988
        ],
        "hex": "#f8fafc"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 120,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "spotifyMix",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "spotifyMix",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.032,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "spotifyMix",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 700,
        "letterSpacing": {
          "value": -0.038,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "spotifyMix",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 600
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "spotifyMix",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}