June

# June — Style Reference
> Whiteboard with purple ink
Theme: light

June presents a clean, approachable SAAS aesthetic built on a foundation of white space and subtle surface variations. Typography, primarily SF Pro Rounded, strikes a balance between professional clarity and a hint of friendly roundness. A single vivid violet accent color is used sparingly to highlight key information and interactive elements, creating points of visual interest without overwhelming the interface. Components are lightweight with soft shadows and rounded corners, conveying a sense of digital product, not corporate rigidity.

## Colors
| Name | Value | Role |
|------|-------|------|
| Canvas White | `#fafafa` | Primary page background, often paired with darker text elements for strong contrast. Provides an airy, open feel |
| Cloud Gray | `#e9ecef` | Soft icon strokes, subtle dividers, and low-emphasis decorative details. Do not promote it to the primary CTA color |
| Haze White | `#f0f0fe` | Secondary surface background, used for lifted cards or content blocks to create a subtle depth layer on the Canvas White |
| Inkwell Text | `#151531` | Primary body text, link text, and prominent content. Provides high readability against light backgrounds |
| Midnight Violet | `#2a2a63` | Headings and bolder text elements. Also appears as a border color, adding emphasis |
| Shadow Blue-Gray | `#343a40` | Secondary text, muted helper text, and subtle icon coloring. Provides a softer textual contrast than Inkwell Text |
| Purple Accent | `#6868f7` | The primary brand accent, used for prominent cards, or occasionally as a decorative background flourish. Creates a vibrant, technology-focused impression |
| Cloud Shadow | `#cfd0d1` | Light shadow tint, contributes to elevation effects for cards |
| Soft Shadow | `#c3c4c6` | Slightly deeper shadow tint, used in combination with Cloud Shadow for card elevation |

## Typography
| Family | Role |
|--------|------|
| SF Pro Rounded | Primary user interface typeface. Its rounded terminals provide a friendly yet modern feel. Used for all headings, body text, and UI elements. The wide range of weights supports a clear typographic hierarchy. |
| Inter | Used for specific secondary content or as a fallback. Maintains readability with a more standard, geometric sans-serif quality. |