---
name: Jupi
description: "This site exemplifies how a restrained, high-contrast design can create a professional and focused user experience, making it a strong reference for clean SaaS interfaces."
version: alpha

colors:
  background: "#F5F4EE"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.57)"
  neutral: "#3B3B3B"
  bg-quiet: "#F5F4EE"
  muted-soft: "rgba(0,0,0,0.44)"
  line: "rgba(0,0,0,0.09)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.9px"
  headline:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.9px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "1.4px"

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

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

---

## Overview

A refined, light-themed decision system for tech leaders navigating AI-driven speed.

*A calm, focused command center for high-stakes strategic decisions.*

## Colors

High-contrast ink on a muted, warm off-white creates a calm, focused environment for serious decision-making.

- **Background (`#F5F4EE`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.57)`)** — uses `ink-soft` token
- **Muted (`#3B3B3B`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.09)`)** — uses `line` token

## Typography

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

- Use geometric sans for large display and headline text
- Use humanist sans for body and UI text
- Use monospace for code snippets and technical content

## Layout

Centered single-column hero layout with a primary text area nested in a light card.

*Rhythm:* 8px vertical rhythm enforced by padding and gap multiples of 8.

## Elevation & Depth

- 0px 1px 8px -2px rgba(0,0,0,0.06)
- 0px 4px 7px 0px rgba(0,0,0,0.05)
- 0px 1px 2px 0px rgba(0,0,0,0.07)
- Borders: 1px solid rgba(0,0,0,0.09)

## Shapes

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

## Components

- **button:** Pill-shaped with strong contrast; black fill or light fill with subtle shadow.
- **card:** Light off-white container with subtle inner shadow and soft border.
- **chip:** Small, rounded-rectangles for quick selection options.
- **input:** Large text area with soft shadow and rounded corners.
- **hero:** Centered text-driven section with a large, bold statement and supporting subhead.

## Do's and Don'ts

**Don't:**
- Don't use vibrant, saturated accent colors — screenshot shows a strictly monochromatic palette with warm off-white background.
- Don't use heavy drop shadows — screenshot shows very subtle, soft shadows for depth.
- Don't use sharp, 90-degree corners — screenshot shows consistently rounded corners, even on buttons.
- Don't use thin, light fonts for headlines — screenshot shows clear weight contrast between display and body text.
- Don't use wide, blocky layouts — screenshot shows a centered, airy layout with generous whitespace.
- Don't use complex, multi-colored gradients — screenshot shows subtle, almost monochromatic background variations.

---

## System Prompt (paste into AI agent)

```
This is a refined SaaS landing page for a decision-making tool, positioning itself as an essential system for tech leaders. The visual identity is clean and calm, built on a warm off-white background (#F5F4EE) with high-contrast black ink (#000000) for text. The typography uses geometric and humanist sans-serif categories for clarity and approachability. Critical design rules include: 1) maintain a strictly monochromatic palette without colorful accents, 2) use soft, subtle shadows and rounded corners to create a sense of lightness and focus, and 3) keep layouts centered and airy to emphasize the primary message. The overall feel is one of restrained, professional authority.
```