Analytics, drawn with intent.
A quiet editorial system. Instrument Serif sets a literary tone; Geist Sans keeps interfaces honest. One purple, a set of warm papers, and a discipline of whitespace that lets numbers do the talking.
Logo
The mark
A serif wordmark where the y is redrawn as two crossing flows around a central dot — a nod to the shape of a measurement pipeline. Always reproduce the exact wordmark; never reset it.
Render the logo as an image asset. Size with height; let width auto-scale.
Re-type “anlyto” in CSS and drop in a lucide icon for the y. The wordmark is one image.
24px height for the wordmark; 16px square for the icon (favicon).
Colour
One accent. A lot of restraint.
Three families — Ink for text and strong surfaces, Paper for backgrounds, Accent for the one chromatic gesture. Semantic tones are muted so they never compete with purple.
Ink
Paper
Accent — Mixpanel-inspired purple
Semantic
Typography
Instrument Serif meets Geist.
Serif for every display and heading moment. Geist Sans for body, UI, and navigation. Geist Mono for tabular numbers, code, and system labels. No third family.
Display · Instrument Serif 400
We measure what matters and nothing more.
Body · Geist Sans 400
Anlyto ships analytics like engineers ship infrastructure — written spec, code review, QA before merge, documented hand-off. The work should feel boring to manage. That's the whole point.
Components
The core kit.
Buttons, pills, cards, forms — the primitives every page is built from.
Buttons
Pills & chips
Form field
Focus ring is 2px at 20% accent.
Sessions · 30d
Feature card
Icon tile over accent-tinted square. Hair-line border at rest.
“Analytics stopped being the part that slipped.”
Data visualisation
Numbers do the talking.
An analytics brand should show off how we present data. Big serif numerals, tabular variants, tiny sparklines, calm purple strokes. Charts inherit from the same token system as type.
Metric row — light
Metric row — dark (for hero / footer contexts)
Callouts
When you need to interrupt the reader.
Five tones. Use sparingly — one per section at most. Callouts are for honest caveats, not sales moments.
Code
Tracking is engineering.
Copy-paste snippets are first-class citizens. Mono font (Geist Mono), accent-purple language tag, hair-line border, subtle line numbers. Reserved for real executable code — never decorative.
window.dataLayer = window.dataLayer || [] dataLayer.push({ event: "purchase", ecommerce: { transaction_id: order.id, value: order.total, currency: "USD", items: order.items.map((i) => ({ item_id: i.sku, item_name: i.name, price: i.price, quantity: i.qty, })), },}){ "event": "account_activated", "description": "First action that demonstrates value", "properties": { "plan": "string — pro | team | enterprise", "onboarding_length_sec": "number", "invited_user_count": "integer" }, "fired_on": ["web", "mobile"], "destinations": ["mixpanel", "ga4", "warehouse"]}Comparison
When side-by-side is honest.
Pricing tiers, tool comparisons, service breakdowns — anything where a reader needs to see all options at once. Featured column gets a tinted background, never a louder colour.
| Feature | Project | Retainer Most partners start here | White-label |
|---|---|---|---|
| Delivery | |||
| Dedicated account manager | |||
| Ticket turnaround | Per milestone | 24–48h | 24–48h |
| Scope style | Fixed | Rolling | Rolling |
| Commercial | |||
| Billing | Milestones | Monthly | Monthly |
| White-label deliverables | |||
| Your domain, your Slack | |||
| Quarterly insight review | |||
Shape & rhythm
Rounded, restrained, predictable.
Five radius tokens, six spacing steps. No 12px, 20px, or 40px gaps. If the design wants one of those, revisit the hierarchy instead.
Radius
Spacing
Iconography
Lucide, one library.
Lucide — 1.5 stroke weight, 20px default, inherit-colour. No FontAwesome, no Material Icons, no custom SVG icons unless they are the brand mark itself.
Motion
Subtle, deliberate, once.
Framer Motion only. Fade + 12–18px rise on scroll. No parallax. No confetti. No auto-playing carousels. No continuous animations.
Default transition
{
duration: 0.45,
ease: [0.25, 0.46, 0.45, 0.94]
}Scroll reveal
initial: { opacity: 0, y: 18 }
whileInView: { opacity: 1, y: 0 }
viewport: {
once: true,
margin: "-40px"
}Hover scale ceiling
whileHover: { scale: 1.02 }
// Never above 1.05.Voice
How we write.
Short sentences. Active voice. Specific nouns. The copy feels confident because it's exact, not because it's loud.
- “Five to fifteen business days.”
- “Tracking plan, documented, QA'd.”
- “We'll tell you if we're not the right fit.”
- “Consent mode v2 is included — not an upsell.”
- “Unlock growth at lightning speed.”
- “Revolutionary analytics in your wheelhouse.”
- “Leverage synergies across verticals.”
- “🚀 Scale with confidence 🎯”