June — design system & UI screens
Quiet editorial announcement page; a centered serif 'A new chapter for June' headline over a warm long-form founder letter card, generous whitespace.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/june.
Decoded design system
June's decoded design system: background #FFFFFF, text #151531, accent #2A2A63, link #2A2A63, primary #151531; type scale h1 60px / h2 40px / body 16px; 8px spacing base; 8px base radius. The single interactive/action color is #2A2A63 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F0F0F2 |
| border | #DBDBE0 |
| text | #151531 |
| text_muted | #6D6D7F |
| primary | #151531 |
| accent | #2A2A63 |
| link | #2A2A63 |
| secondary | #EFF6FF |
| button_bg | rgba(0, 0, 0, 0) |
| button_text | #151531 |
Using these colors
- Action color
#2A2A63— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#2A2A63— one role, not several (the action color).- accent
#2A2A63— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#151531— ≈ the text color — a foreground/text color, not an action color (action = #2A2A63). - secondary
#EFF6FF— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: SF Pro Rounded
- Body: SF Pro Rounded
- h1: 60px
- h2: 40px
- body: 16px
Spacing
- base unit: 8px
- scale: 8px, 13px, 16px, 24px, 32px, 48px, 64px, 127px
Radii
- base: 8px
- button: 8px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(13, 19, 27, 0.1) 0px 2px 10px 0px, rgba(13, 19, 27, 0.2) 0px 0px 2px 0px - card:
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(13, 19, 27, 0.25) 0px 0px 1px 0px, rgba(13, 19, 27, 0.05) 0px 2px 1px 0px
Native design tokens
| Token | Value |
|---|---|
--c1 | #000 |
--c2 | #4f5d69 |
--c3 | #738696 |
--c4 | #919fac |
--c5 | #bcc9d2 |
--c6 | #e0e6eb |
--uiBorderColor | #ecf0f4 |
--separator | #e6ecf0 |
--separator-end | rgba(230,236,240,.01) |
--icons | #14171a |
…and 110 more measured on the page.
Button states (measured)
- primary focus: outline
1px auto rgb(16, 16, 16)
Responsive (measured)
- mobile (390px): nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →