---
name: Infisical
description: "This site is an excellent example of a clean, professional SaaS/developer tool interface that prioritizes clarity, trust, and readability through a restrained, monochromatic design system."
version: alpha

colors:
  background: "#F3F4F6"
  primary: "#1E1F22"
  secondary: "#475569"
  neutral: "#A3A3A3"
  bg-soft: "#F9FAFB"
  bg-quiet: "#FFFFFF"
  muted-soft: "#E5E7EB"
  line: "rgba(204, 204, 206, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: transitional-serif
    fontSize: 14px
    lineHeight: 1.5
    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

An all-in-one platform to securely manage secrets, certificates, and AI agents across any stack.

*A clean, high-precision utility for securing infrastructure*

## Colors

Monochromatic scale from cool grays to near-black, emphasizing clarity and focus.

- **Background (`#F3F4F6`)** — uses `bg` token
- **Primary text (`#1E1F22`)** — uses `ink` token
- **Secondary text (`#475569`)** — uses `ink-soft` token
- **Muted (`#A3A3A3`)** — uses `muted` token
- **Borders (`rgba(204, 204, 206, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** monospace

- Use 'alliance' for all display and body text to maintain a consistent, elegant typographic voice.
- Maintain a strict typographic scale with 48px, 24px, 16px, and 14px as the primary steps.
- Ensure line heights are consistently set at 1.5 (24px for 16px text) for optimal readability.

## Layout

A clean, centered grid system with generous padding and clear visual hierarchy.

*Rhythm:* Consistent spacing based on a 4px grid, with generous white space to frame content and create a sense of calm and precision.

## Elevation & Depth

- 0 1px 3px rgba(0, 0, 0, 0.1)
- Borders: Thin 1px solid borders using #E5E7EB or #CC00CE for subtle separation.

## Shapes

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

## Components

- **button:** Solid black buttons for primary actions, white with black borders for secondary, and simple text links with arrows.
- **card:** Clean, bordered cards with subtle shadows and generous internal padding.
- **chip:** Simple, bordered badges or labels with minimal styling.
- **input:** Clean, bordered input fields with clear labels and placeholders.
- **hero:** Large, centered typographic hero with clear CTAs and a supporting visual.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated accent colors — screenshot shows a monochromatic palette of grays and black.
- Don't use decorative, rounded fonts — screenshot shows a clean, transitional-serif typeface.
- Don't use complex, busy layouts — screenshot shows a clean, centered, single-column structure.
- Don't use heavy drop shadows or 3D effects — screenshot shows minimal, flat design with subtle borders.
- Don't use multi-colored buttons or elements — screenshot shows primarily black, white, and gray UI components.
- Don't use large blocks of color or gradients — screenshot shows a predominantly white and light gray background.

---

## System Prompt (paste into AI agent)

```
Infisical is a developer-first security platform for managing secrets, certificates, and AI agents. The design is clean, professional, and highly structured, using a monochromatic palette of near-black (#1E1F22), cool grays (#F3F4F6, #A3A3A3), and white (#FFFFFF) with no dominant accent color. Typography relies on a transitional-serif font ('alliance') for both display and body text, creating a sophisticated, editorial feel. The layout is spacious and centered, emphasizing clarity and trust. Key donts: Avoid using bright, saturated colors or gradients; maintain the monochromatic, high-contrast palette. Don't use rounded, playful fonts; stick to the clean, transitional-serif typeface. Don't create cluttered layouts; keep the design minimal and focused on clear typographic hierarchy and generous white space.
```