---
name: Stytch
description: "This site is an excellent example of a developer-focused SaaS platform that uses strong typography and a restrained palette to communicate technical reliability and enterprise-grade security."
version: alpha

colors:
  background: "#FBFAF9"
  primary: "#1D1D1D"
  secondary: "#525151"
  neutral: "#CECECE"
  bg-soft: "#F2F0EE"
  line: "rgba(29,29,29,0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  headline:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  code:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, typography-driven developer platform identity for a secure authentication API.

*A robust, developer-focused toolkit for building secure identity layers, balancing technical depth with enterprise-grade reliability.*

## Colors

High-contrast monochrome palette with a warm white base, prioritizing legibility and professional restraint.

- **Background (`#FBFAF9`)** — uses `bg` token
- **Primary text (`#1D1D1D`)** — uses `ink` token
- **Secondary text (`#525151`)** — uses `ink-soft` token
- **Muted (`#CECECE`)** — uses `muted` token
- **Borders (`rgba(29,29,29,0.15)`)** — uses `line` token

## Typography

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

- Use Booton/BootonUncommon for hero displays and major headings.
- Use Chivo Mono for all body text, navigation, buttons, and technical elements.
- Maintain tight letter-spacing (-1px to -2px) for large display type.

## Layout

Centered content container with a clean, single-column flow for hero sections.

*Rhythm:* Consistent 4px-based spatial rhythm with generous padding in hero sections (48px).

## Elevation & Depth

- rgba(0, 0, 0, 0.5) 0px 8px 10px 0px
- Borders: 1px solid borders using ink and muted tones, often applied directionally (bottom/right).

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Monochrome buttons with solid fills (ink or white), subtle 4px radius, and monospace text.
- **card:** Clean, bordered containers with subtle background shifts (bgSoft) and directional corner accents.
- **chip:** Small monospace text labels with subtle borders.
- **input:** Standard text inputs with light borders.
- **hero:** Massive centered typography with a high-contrast ink color against a warm white background.

## Do's and Don'ts

**Don't:**
- Don't use vibrant gradients — screenshot shows a monochrome, flat color palette instead.
- Don't use a playful or rounded serif font — screenshot uses a geometric/monospace-heavy system.
- Don't use large, colorful icons — screenshot relies on typography and subtle borders.
- Don't use dark mode as the default — screenshot shows a light, warm-white background.
- Don't use decorative illustrations — screenshot focuses on code snippets and clean UI.
- Don't use excessive shadows — screenshot shows very minimal, flat layering.

---

## System Prompt (paste into AI agent)

```
Stytch is a professional, developer-focused identity platform using a high-contrast monochrome palette. The primary colors are a warm white (#FBFAF9) and near-black ink (#1D1D1D), with muted grays (#525151, #CECECE) for secondary text. Typography is dominated by a humanist-sans for display (Booton) and a clean monospace (Chivo Mono) for body and technical UI. Avoid vibrant color accents, complex gradients, or playful, whimsical elements. Critical design constraints: prioritize monospace typography for all functional text, use 4px-based spacing with generous padding in hero sections, and maintain a strictly flat, high-contrast visual language. Ensure all UI components remain clean, bordered, and legible.
```