---
name: June
description: "This site is a great example of how to communicate sensitive business news (an acquisition) with a warm, transparent, and highly personal editorial design."
version: alpha

colors:
  background: "#FAFAFA"
  primary: "#151531"
  secondary: "#2A2A63"
  tertiary: "#6366F1"
  neutral: "#343A40"
  bg-soft: "#F0F0FE"
  muted-soft: "#E9ECEF"
  line: "rgba(233, 236, 239, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 900
    letterSpacing: "-1.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "0px"
  subheading:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 9999px

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

---

## Overview

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

*A handwritten letter on premium stationery*

## Colors

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

- **Background (`#FAFAFA`)** — uses `bg` token
- **Primary text (`#151531`)** — uses `ink` token
- **Secondary text (`#2A2A63`)** — uses `ink-soft` token
- **Accent (`#6366F1`)** — uses `accent` token
- **Muted (`#343A40`)** — uses `muted` token
- **Borders (`rgba(233, 236, 239, 1)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

- 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)
- Borders: Subtle 1px borders in light gray (#E9ECEF) to define edges without adding visual weight.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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