A calm, minimalist dashboard for web analytics that prioritizes privacy over complexity.
02
Color
#846BFFAccent
#181B19Ink
#636965Ink soft
#F7F8F7BG
#B0B5B2Muted
rgba(24, 27, 25, 0.1)Line
Neutral, high-contrast palette with a single vibrant purple accent for primary actions.
03
Typography
humanist-sans · monospace
display56px · 500
heading40px · 500
body18px · 400
caption14px · 400
Use -webkit-font-smoothing: antialiased for crisp text rendering. · Limit line length to approximately 680px for optimal readability. · Use monospace font for code snippets or data tables.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base grid with generous whitespace to emphasize simplicity.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(24, 27, 25, 0.1)
None: None
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Single-column centered layout with a 2-column feature grid below the hero.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Subtle fade-ins for content as it enters the viewport. · Smooth color and background transitions on interactive elements.
Color changes or subtle background shifts on buttons and links. · Slight scale or color change to indicate active state.
08
Components
buttonSolid rounded buttons with high contrast, primary uses accent color, secondary uses a dark neutral.
cardClean cards with minimal borders or subtle shadows, used for feature highlights and data tables.
chipSmall rounded tags with light background and dark text, used for labels like 'New'.
inputSimple text inputs with clean borders and subtle focus states.
heroLarge, bold typography on the left with a data visualization or mock-up on the right.
09
Voice & Don'ts
ToneClear, direct, and reassuring.
HeadlinesBold, benefit-driven statements that emphasize simplicity and privacy.
CTAsAction-oriented phrases like 'Start free trial' with a lightning bolt icon.
Don't use complex gradients or heavy textures — the screenshot shows a clean, flat background.
Don't use bright, multi-color palettes — the screenshot uses a single purple accent.
Don't use decorative, script, or overly stylized fonts — the screenshot uses a clean sans-serif.
Don't overcrowd the UI with too many elements — the screenshot prioritizes whitespace and clarity.
Don't use dark mode as the default — the screenshot shows a light-themed interface.
Don't use rounded corners on all elements — the screenshot uses sharp corners for some UI elements.
Avoid: Technical jargon or complex marketing speak.
Avoid: Aggressive or high-pressure sales language.
Captured from the live site · real computed styles
11
System prompt
Fathom Analytics is a privacy-first, simple alternative to Google Analytics. The design uses a clean, light palette with a #F7F8F7 background and #181B19 text, accented by a single high-chroma purple (#846BFF) for primary CTAs. Typography is a humanist sans-serif category, prioritizing readability and clarity. Key critical donts include: do not use complex gradients or heavy textures, do not use bright multi-color palettes, and do not overcrowd the UI with elements. The overall feel is calm, trustworthy, and focused on ease of use.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
