# June · Design system migration spec

> Source: https://www.june.so  ·  Curated by OpenDesign  ·  en

> This site is a great example of how to communicate sensitive business news (an acquisition) with a warm, transparent, and highly personal editorial design.

## 1. Identity DNA

The design system for June’s acquisition announcement is built like a handwritten letter on premium stationery—every element is chosen to convey warmth, transparency, and personal attention. This is not a corporate press release but a founder-led message, and the system’s DNA reflects that with a welcoming, editorial sensibility that prioritizes human connection over marketing spectacle.

**One-liner:** A warm, founder-led editorial page announcing a company's acquisition with a handwritten, personal touch.
**Keywords:** warm · welcoming · transparent · analytics · startup
**Analogy:** A handwritten letter on premium stationery

## 2. Color

The color system is built on a high-contrast foundation of deep navy (#151531) text set against a soft, off-white (#FAFAFA) background, ensuring effortless readability and a warm, inviting atmosphere. A single, vibrant indigo accent (#6366F1) is reserved for moments of emphasis, creating a clear focal point without overwhelming the palette.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--bg-soft` | `#F0F0FE` | card background |
| `--ink` | `#151531` | body text |
| `--ink-soft` | `#2A2A63` | secondary text |
| `--muted` | `#343A40` | placeholder |
| `--muted-soft` | `#E9ECEF` | weak hint |
| `--accent` | `#6366F1` | single accent |
| `--line` | `rgba(233, 236, 239, 1)` | divider |

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

The palette adheres to a principle of restrained warmth, using color to guide focus and establish tone rather than to decorate.

## 3. Typography

Typography pairs a geometric-sans display face for headlines with a humanist-sans body typeface, creating a voice that is both clear and sincerely expressive. The scale is deliberately large and breathable, from the massive, centered page headline down to body text, reinforcing the personal, letter-like quality of the communication.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 900 | -1.5px | Main page headline 'A new chapter for June' |
| heading | 40px | 1.25 | 700 | 0px | Section titles like 'June is joining Amplitude' |
| subheading | 18px | 1.55 | 400 | 0px | Body text paragraphs |
| caption | 12px | 1.2 | 700 | 0.5px | Labels like 'FROM' and 'TO' on the ticket |

## 4. Spacing

Rhythm is established through generous vertical padding between all elements, from paragraphs to major sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding between paragraphs and sections, maintaining a clean and breathable layout.

## 5. Surfaces

Surface treatments employ subtle, layered shadows and delicate 1px borders in light gray (#E9ECEF) to define depth and edges with minimal visual weight. This approach creates a soft, tangible hierarchy, lifting content cards—a signature soft indigo (#F0F0FE) element—gently from the background.

- **Radius:** sm 4px · md 8px · lg 20px · pill 9999px
- **Shadows:**
  - 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.

## 6. Layout

The layout skeleton is a single-column editorial flow, focusing all attention on the core narrative. This clean, vertical composition is bookended by a full-width promotional banner below, maintaining a simple, readable structure that rejects complex grids.

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

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

## 7. Motion & Interaction

Motion philosophy is minimal and functional, applied to enhance clarity rather than to decorate. Transitions are smooth and purposeful, such as subtle background-color shifts on interactive elements, ensuring a responsive feel without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color transitions on interactive elements.

- **Hover:** Subtle background color changes or opacity shifts on links and interactive elements.
- **Click:** Standard pointer cursor on all clickable elements.
- **Transition:** Global 'all' transition applied across elements, with specific 0.2s timing for background colors.
- **Keyboard:** Focusable elements are accessible via standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is transparent, sincere, and founder-led, with emotionally resonant headlines that focus on the human story. It avoids aggressive sales language and corporate jargon, opting instead for subtle, informative calls to action.

- **Tone:** Transparent, sincere, and founder-led.
- **Headline style:** Large, bold, and emotionally resonant, focusing on the human story behind the business.
- **CTA style:** Subtle and informative, avoiding aggressive marketing language.
- **Avoid:** Aggressive sales language / Overly corporate jargon / Cluttered or chaotic layouts / Cold, impersonal design

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

The system deliberately excludes decorative, high-contrast accents, complex multi-column grids, and a cold, sterile aesthetic.

## System Prompt (paste into AI tool)

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