CURATED · OPEN · FREE

June

A warm, founder-led editorial page announcing a company's acquisition with a handwritten, personal touch.

analyticssaas

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://www.june.so

📦 Browse pack contents →

Identity DNA

warmwelcomingtransparentanalyticsstartup

A handwritten letter on premium stationery

Color

#6366F1Accent

#151531Ink

#2A2A63Ink soft

#FAFAFABG

#F0F0FEBG soft

#343A40Muted

rgba(233, 236, 239, 1)Line

High-contrast deep navy text on soft, off-white backgrounds with a single vibrant indigo accent.

Typography

geometric-sans · humanist-sans

display56px · 900
heading40px · 700
subheading18px · 400
caption12px · 700

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding between paragraphs and sections, maintaining a clean and breathable layout.

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 9999px

Subtle 1px borders in light gray (#E9ECEF) to define edges without adding visual weight.

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 2px 10px 0px rgba(13, 19, 27, 0.1) · 0px 0px 2px 0px rgba(13, 19, 27, 0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column editorial layout for the main content, with a full-width promotional banner section below.

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

Smooth background-color transitions on interactive elements.

Subtle background color changes or opacity shifts on links and interactive elements. · Standard pointer cursor on all clickable elements.

Components

button Minimalist text-based navigation links without visible borders or backgrounds.
card A soft indigo-tinted card (#F0F0FE) with large 20px radius for the main article content.
chip A playful, decorative airline ticket graphic used as a visual metaphor.
hero A massive, centered headline in a deep navy color, followed by a large, light-tinted content card.

Voice & Don'ts

Tone Transparent, sincere, and founder-led.
Headlines Large, bold, and emotionally resonant, focusing on the human story behind the business.
CTAs Subtle and informative, avoiding aggressive marketing language.

Don't use a pure white (#FFFFFF) background — screenshot shows a slightly warmer off-white (#FAFAFA) instead.
Don't use sharp, squared-off corners — screenshot features generous 20px border-radius on main cards.
Don't use a cold, sterile aesthetic — screenshot shows a warm, inviting tint (#F0F0FE) on content areas.
Don't use decorative, high-contrast color accents — screenshot limits accents to a single soft indigo (#6366F1).
Don't use tiny, cramped typography — screenshot shows a large, breathable 18px body font size.
Don't use complex, multi-column grids — screenshot maintains a clean, single-column editorial flow.
Avoid: Aggressive sales language
Avoid: Overly corporate jargon
Avoid: Cluttered or chaotic layouts
Avoid: Cold, impersonal design

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

June.so is a SaaS product analytics tool, and this page is a transparent, founder-led editorial announcing its acquisition. The design DNA is defined by a warm, welcoming, and highly readable editorial aesthetic. Key hex colors include a deep navy (#151531) for ink, a soft off-white (#FAFAFA) for the background, and a light indigo (#F0F0FE) for content cards, with a single vibrant accent (#6366F1). Typography uses a geometric-sans display and a humanist-sans body. Critical donts: never use pure white backgrounds, never use sharp corners, and never clutter the layout with aggressive sales language or complex grids.

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