CURATED · OPEN · FREE

Jupi

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

EditorialProductRefined

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://jupi.co/

📦 Browse pack contents →

Identity DNA

decision intelligenceleadershipefficiencyintentionality

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

Color

#000000Ink

rgba(0,0,0,0.57)Ink soft

#F5F4EEBG

#3B3B3BMuted

rgba(0,0,0,0.09)Line

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

Typography

geometric-sans · humanist-sans · monospace

display36px · 400
headline36px · 500
body16px · 400
caption11px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 99999999px

1px solid rgba(0,0,0,0.09)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle opacity transitions on hover · Smooth color and background-color transitions on interactive elements

Subtle background or color shift on interactive elements. · Immediate visual feedback via color or opacity change.

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.

Voice & Don'ts

Tone Confident, direct, and professional.
Headlines Concise, punchy statements that frame a problem or insight.
CTAs Action-oriented and clear, using verbs like 'Talk' or 'Try'.

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.
Avoid: Excessive jargon or overly technical language in headlines
Avoid: Playful or informal language that undermines the serious nature of decisions
Avoid: Vague or passive phrasing

Inside the pack — real screenshots

Jupi — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko