# Jupi · Design system migration spec

> Source: https://jupi.co/  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Jupi operates as a digital blank canvas, its design reduced to a single geometric accent placed with the precision of a sculptor's final chisel mark. The identity is defined not by what is present, but by the vast, deliberate emptiness that frames it.

**One-liner:** A refined, light-themed decision system for tech leaders navigating AI-driven speed.
**Keywords:** decision intelligence · leadership · efficiency · intentionality
**Analogy:** A calm, focused command center for high-stakes strategic decisions.

## 2. Color

The palette is a study in restraint: a stark white field is punctuated only by neutral grays and a single, muted blue accent. This chromatic austerity ensures the blue functions as a pure focal point, not a decorative element.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F4EE` | main background |
| `--bg-quiet` | `#F5F4EE` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.57)` | secondary text |
| `--muted` | `#3B3B3B` | placeholder |
| `--muted-soft` | `rgba(0,0,0,0.44)` | weak hint |
| `--line` | `rgba(0,0,0,0.09)` | divider |

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

Color here is not a system of variety, but a tool for singular emphasis.

## 3. Typography

Typography serves only the logotype, rendered in a simple **slab-serif** category that carries the brand's geometric sensibility without adding voice or hierarchy. The type is a quiet mark, not a spoken word.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.1 | 400 | -0.9px | Hero primary headline |
| headline | 36px | 1.1 | 500 | -0.9px | Hero secondary headline |
| body | 16px | 1.5 | 400 | 0px | Primary body text |
| caption | 11px | 1.5 | 400 | 1.4px | Uppercase supporting text |

**Type rules:**
- 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

## 4. Spacing

Rhythm is established through massive white space, treating emptiness as the primary structural material.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm enforced by padding and gap multiples of 8.

## 5. Surfaces

The interface is defined by its absolute flatness; there are no shadows, borders, or container backgrounds to imply depth. Surfaces are conceptual planes of color only.

- **Radius:** sm 4px · md 8px · lg 16px · pill 99999999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is a centered column with no visible grid or structural seams. All visual weight is placed along a single, vertical axis, creating a composition of absolute stillness.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is absent from the visible composition, reflecting a philosophy of static purity. Any system-level transitions are governed by a single, understated cubic-bezier easing curve.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover
  - Smooth color and background-color transitions on interactive elements

- **Hover:** Subtle background or color shift on interactive elements.
- **Click:** Immediate visual feedback via color or opacity change.
- **Transition:** All interactive properties transition smoothly over 150-200ms.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is quiet and abstract, communicated through the near-total absence of text. It avoids complexity, visual clutter, and excessive explanation in favor of pure visual statement.

- **Tone:** Confident, direct, and professional.
- **Headline style:** Concise, punchy statements that frame a problem or insight.
- **CTA style:** Action-oriented and clear, using verbs like 'Talk' or 'Try'.
- **Avoid:** Excessive jargon or overly technical language in headlines / Playful or informal language that undermines the serious nature of decisions / Vague or passive phrasing

### Don'ts
- ❌ 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.

They deliberately omit interactive components, navigation, and narrative content to preserve the integrity of the blank canvas.

## System Prompt (paste into AI tool)

```
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.
```
