June

Overview

June is a product analytics platform for B2B SaaS companies, designed to transform complex customer behavior data into warm, actionable insights. The brand embodies a philosophy of clarity-through-simplicity: rather than overwhelming users with raw metrics, June auto-generates narrative-driven reports that tell the story of how companies use your product. The aesthetic is "Warm Minimalism"—a deliberate rejection of cold, clinical data interfaces in favor of a human-centered design language that feels inviting, professional, and approachable. The visual identity combines a clean white canvas (rgb(255, 255, 255)) with a signature violet accent (#6868f7) that appears on CTAs, highlights, and interactive states, creating visual momentum without visual noise. The brand personality is conversational yet authoritative: June speaks to founders and product leaders as peers, using plain language and concrete examples rather than jargon. Example sentence in June's voice: "Your customers told you what they want—June shows you what they actually do."

The design system prioritizes legibility and cognitive ease. Every element—from typography hierarchy to spacing rhythm—is calibrated to reduce friction between the user and their data. The interface uses a 12-column grid with a 1192px container max-width, allowing content to breathe while maintaining focus. Interactions are purposeful: hover states shift from surface-container-lowest (#f1f3f5) to surface-container-high (#dee2e6) with a 200ms ease-out transition, signaling responsiveness without jarring motion. The brand voice is direct, wa

Colors

June's color system is rooted in a light, airy aesthetic that prioritizes clarity and reduces cognitive load. The primary accent is a sophisticated violet (#6868f7), used exclusively for interactive elements, CTAs, focus states, and brand-critical highlights. This violet is never used for body text or large surfaces—it's reserved for moments that demand attention. The on-primary color is pure white (#ffffff), ensuring maximum contrast (WCAG AAA) on the violet background. The primary-container (#e8e7ff) provides a soft, tinted background for secondary actions and informational contexts, with on-primary-container (#3a3a8f) for text within those containers.

The surface stack is built on white (#ffffff) as the base, with a carefully calibrated gray scale for depth: surface-container-lowest (#

Typography

June's type system uses two font families in deliberate contrast: SF Pro Rounded for display and headline scales (60px, 40px, 28px weights 900, 700, 700), and Inter for body and label scales (18px, 16px, 14px, 12px weights 400, 400, 600, 500). SF Pro Rounded's geometric warmth makes headlines feel approachable and modern, while Inter's neutrality ensures body text remains highly legible at all sizes. The display scale (60px, 900 weight, -0.04em letter-spacing) is reserved for hero headlines like "A new chapter for June," commanding attention without aggression. Headline-lg (40px, 700 weight, -0.02em) is used for section titles and major content breaks. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content, with generous 28px line-height to reduce ey

Layout

June uses a fluid, 12-column grid system with a fixed container max-width of 1192px, centered on the viewport. This approach balances responsiveness on mobile (where columns stack) with controlled reading widths on desktop. The spacing scale is semantic: unit (8px) is the base increment, with xs (4px) for micro-spacing between inline elements, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero spacing and full-width section breaks. The gutter (24px) is applied consistently to left/right padding on containers, ensuring content never touches the viewport edge. Page rhythm is established through consistent use of lg spacing (40px) between major sections—this creates a breathing room that prevents cogn

Elevation & Depth

June's elevation system is subtle and functional, avoiding the heavy shadows common in enterprise software. Depth is conveyed through three distinct levels: Level 1 (Base) uses no shadow and sits on the white surface (#ffffff). Level 2 (Standard Card) applies elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)), a barely-perceptible shadow that separates cards from the background without creating visual drama. Level 3 (Elevated/Hover) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), used when cards are hovered or when modals/dropdowns appear. Level 4 (Maximum Elevation) applies elevation.lg (0 8p

Shapes

June's shape philosophy is "Soft-Technical"—rounded corners are used consistently but never excessively, creating a balance between approachability and professionalism. The rounded scale includes sm (4px) for small UI elements like inline badges and tight components, DEFAULT (8px) for standard inputs and small cards, md (10px) for medium containers, lg (16px) for buttons and prominent cards, xl (20px) for large modals and hero cards, and full (9999px) for pill-shaped elements like badges and toggle switches. Buttons use lg (16px) border-radius, creating a friendly but not cartoonish appearance

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use backgroundColor: {colors.primary} (#6868f7), textColor: {colors.on-primary} (white), with padding 12px 24px and height 44px. The border-radius is {rounded.lg} (16px), and a subtle box-shadow (0 2px 8px rgba(104, 104, 247, 0.2)) adds depth. On hover, the background shifts to #5a5ae6 (a darker violet), the shadow expands to 0 4px 12px rgba(104, 104, 247, 0.3), and a 200ms ease-out transition smooths the change. Active state uses #4d4dd9 with a reduced shadow (0 2px 6px rgba(104, 104, 247, 0.2)). Secondary buttons use transparent background with a 1px border in {colors.outline-variant} (#ced4da), textColor {colors.primary}, and the same padding/height. On hover, the background becomes {colors.surface-con

Do's and Don'ts

**Do**

• Do use {colors.primary} (#6868f7) exclusively for interactive elements, CTAs, and focus states—never for body text or large surface areas.
• Do apply 200ms ease-out transitions to all hover and active state changes, creating a sense of responsive fluidity without feeling sluggish.
• Do maintain md (24px) padding inside cards and containers, and lg (40px) spacing between major sections, to preserve visual breathing room.
• Do use SF Pro Rounded for all display and headline scales (60px, 40px, 28px) to create warmth and approachability in the visual hierarchy.
• Do apply negative letter-spacing (-0.04em to -0.01em) to all headline scales to tighten the visual mass and create a premium feel.
• Do use elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) as the default shadow for cards, reserving elevation.md and elevation.lg for hover and modal states.

**Don't**

• Don't use {colors.primary} (#6868f7) for backgrounds larger than 200px × 200px—it's an accent color, not a surface color.
• Don't apply box-shadow values larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12))—June's aesthetic rejects heavy shadows and visual drama.
• Don't reduce padding or spacing below the semantic scale (xs 4px, sm 12px, md 24px, lg 40px)—whitespace is a design feature, not a constraint.
• Don't mix font families within a single headline or body paragraph—use SF Pro Rounded for display/headlines and Inter for body/labels exclusively.
• Don't apply positive letter-spacing to body text—it reduces legibility; reserve positive letter-spacing (0.01em to 0.02em) for labels and small caps only.
• Don't use rounded values smaller than sm (4px) or larger than xl (20px) for standard components—the scale is intentionally limited to maintain visual consistency.