№ reflect-app--changelog

Reflect — Changelog

Deep violet gradients flow over crisp, clean sans serif, a serene digital horizon.

Narrative Workflowminimalism dark mode monochrome saasdark

The page uses a gradient-filled hero section and a clean, structured layout with a prominent navigation. The overall feel is modern and focused on clarity, employing a dark color palette and subtle animations to guide the user. · ai note taking, productivity app, dark saas, minimalist ai, reflect app, note workflow, digital notebook

Reflect — Changelog - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: neon · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#7038ed
OKLCHoklch(52.7% 0.248 289)
RoleDominant
find sites →
Hex#331b6c
OKLCHoklch(31.0% 0.131 290)
RoleSurface
find sites →
Hex#c378fa
OKLCHoklch(70.5% 0.194 309)
RoleInk
find sites →
Hex#7962a6
OKLCHoklch(54.7% 0.106 298)
RoleAccent
find sites →
Hex#a98cc0
OKLCHoklch(68.5% 0.081 310)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	AeonikPro	72px	500	1.11	Aa Bb Cc
h2	AeonikPro	56px	500	1.14	Aa Bb Cc
h3	AeonikPro	32px	500	1.25	Aa Bb Cc
body	Inter V	16px	400	1.4	Aa Bb Cc
button	Inter V	14px	500	1.43	Aa Bb Cc

Spacing scale

6px

12px

24px

26px

38px

48px

64px

72px

96px

108px

110px

116px

128px

145px

148px

172px

173px

222px

236px

Radius scale

0px

4px

6px

8px

16px

50px

Container

Max content width 1296px

Export

:root {
  --color-dominant: #7038ed;
  --color-surface: #331b6c;
  --color-ink: #c378fa;
  --color-accent: #7962a6;
  --color-detail: #a98cc0;
}

/* CSS variables exposed by source */
:root {
  --swiper-theme-color: #007aff;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Reflect — Changelog.
Reference design system (extracted from the live site):
- Palette: #7038ed, #331b6c, #c378fa, #7962a6, #a98cc0
- Typefaces: AeonikPro, Inter V
- Macrostructure: Narrative Workflow
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/reflect-app--changelog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

AeonikPro

72px

500

1.11

Aa Bb Cc

AeonikPro

56px

500

1.14

Aa Bb Cc

AeonikPro

32px

500

1.25

Aa Bb Cc

body

Inter V

16px

400

1.4

Aa Bb Cc

button

Inter V

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #7038ed; --color-surface: #331b6c; --color-ink: #c378fa; --color-accent: #7962a6; --color-detail: #a98cc0; } /* CSS variables exposed by source */ :root { --swiper-theme-color: #007aff; }

Build a landing page in the visual style of Reflect — Changelog. Reference design system (extracted from the live site): - Palette: #7038ed, #331b6c, #c378fa, #7962a6, #a98cc0 - Typefaces: AeonikPro, Inter V - Macrostructure: Narrative Workflow Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/reflect-app--changelog