Seline Analytics

Overview

Seline Analytics is a privacy-first, minimalist analytics platform designed to replace Google Analytics with clarity and simplicity. The brand embodies "Functional Minimalism"—a design philosophy that strips away complexity while maintaining visual warmth through a distinctive sky-blue accent (#3ba6f1). The interface evokes a sense of calm professionalism: clean typography, generous whitespace, and a restrained color palette (warm neutrals with a single vibrant primary) create an environment where data feels approachable rather than overwhelming. The UI communicates that analytics can be both powerful and human-centered.

The brand voice is direct, conversational, and action-oriented. Seline speaks to product teams and marketers who value privacy and simplicity—people tired of bloated tools. The vocabulary is concrete ("See what your visitors actually do. Understand why. Fix what matters.") rather than abstract. Tone examples: "Install Seline in under 3 minutes" (confident, achievable), "No cookies, no personal data collected" (reassuring, specific). The brand personality is approachable expertise—knowledgeable without being condescending, modern without being trendy.

Colors

The color system is built on a warm, neutral foundation (#fafaf9 surface, #1c1917 on-surface text) that creates a calm, focused reading environment. The primary accent, sky-blue (#3ba6f1), is reserved exclusively for interactive elements: primary CTAs ("Start free trial"), links, focus states, and active indicators. This restraint ensures the primary color commands attention when it matters most—driving user action. Secondary colors (warm grays: #44403c, #57534e) provide subtle hierarchy for secondary actions and supporting UI. The surface stack progresses from #fafaf9 (base) through #f5f5f4 (container-low) to #d6d3d1 (container-highest), enabling up to 5 layers of visual depth without introducing new hues. Outline colors (#a8a29e, #d1d5db) are used for borders and dividers at 1px weight.

Typography

The type system pairs Roobert (a geometric, friendly sans-serif) for headlines and display text with Inter (a neutral, highly legible sans-serif) for body and UI labels. This pairing communicates approachability (Roobert's rounded letterforms) grounded in clarity (Inter's technical precision). Display (52px, 400 weight, -0.02em tracking) is used for hero headlines and sets the brand's calm, confident tone. Headline-lg (40px, 600 weight) anchors section introductions, while headline-md (28px, 600 weight) breaks up content. Body-md (16px, 400 weight, 24px line-height) is the default for paragraph text and ensures 1.5 line-height for comfortable reading on screens. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text and form labels, with increased letter-spacing to add visu

Layout

The layout system uses a 12-column grid with a max-width of 1440px, maintaining a fluid layout on mobile (100% width with 24px gutter) and fixed width on desktop. Content is organized using semantic spacing: 24px (md) for section separation, 40px (lg) for major section breaks, and 64px (xl) for hero-to-content transitions. Cards and containers use 24px internal padding (md) with 10px border-radius (lg) to create visual grouping without heaviness. The design favors generous whitespace—minimum 40px vertical rhythm between sections—to reduce cognitive load and emphasize the "simple" brand promise. Container max-width of 1440px prevents line lengths from exceeding 80 characters on ultra-wide displays, maintaining readability. Gutters (24px on desktop, 16px on tablet, 12px on mobile) scale prop

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects, reinforcing the minimalist aesthetic. The elevation system uses three levels: Level 1 (Base, no shadow) for the page background and surface containers; Level 2 (Standard card, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and interactive elements at rest; Level 3 (Elevated, box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) for hover states, dropdowns, and overlays. Shadows use a soft, diffuse blur (8px-24px) and low opacity (12-15%) to avoid harsh contrasts. Focus states on interactive elements add a

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but conservatively to balance approachability with professional clarity. Buttons and primary interactive elements use 8px border-radius (lg), creating a friendly, clickable appearance without appearing playful or casual. Cards and containers use 10px border-radius (xl), slightly more rounded than buttons to signal they are containers rather than actions. Input fields use 6px border-radius (md), a middle ground that feels integrated with the UI without drawing attention. Dividers and subtle UI elements remain sharp (

Components

Action Elements Buttons are the primary affordance for user intent. Primary buttons use #3ba6f1 background with 12px vertical and 24px horizontal padding (44px total height), 14px Inter 500 weight label text, and 8px border-radius. On hover, background shifts to #2a8fd4 (darker blue, -15% lightness) with a 150ms ease-in-out transition. On active/pressed, background becomes #1e6bb8 (-25% lightness) with no transition delay. Secondary buttons use transparent background with a 1px solid #d1d5db border, same padding and height, and on hover shift to #e7e5e4 background (surface-container-high). Focus states on both button types add a 2px solid #3ba6f1 outline with 2px offset and a subtle inset shadow (0 0 0 3px rgba(59, 166, 241, 0.1)). Disabled buttons reduce opacity to 50% and set cursor

Do's and Don'ts

**Do**

• Do use the primary blue (#3ba6f1) exclusively for interactive elements (buttons, links, focus states) to maintain clear affordance signaling and prevent color fatigue.
• Do maintain at least 40px vertical rhythm between major sections and 24px between subsections to reinforce the 'simple, uncluttered' brand promise.
• Do apply 8px blur and 12-15% opacity to shadows (e.g., 0 3px 8px rgba(0, 0, 0, 0.15)) to create depth without harsh contrast that would undermine minimalism.
• Do use Roobert for all headlines (h1-h3) and Inter for all body text and UI labels to maintain the approachable-yet-technical personality.
• Do pair rounded corners (8-10px on buttons/cards) with sharp dividers (0px) to create visual hierarchy between interactive and passive elements.

**Don't**

• Don't use secondary colors (#44403c, #57534e) for interactive elements or CTAs—reserve those for supporting UI only, or you'll dilute the primary's affordance signal.
• Don't apply shadows larger than 24px blur or opacity greater than 15% on standard cards, as this creates visual heaviness that contradicts the minimalist aesthetic.
• Don't mix typefaces within a single heading or paragraph—Roobert for headlines, Inter for body, never blend them in the same text block.
• Don't use border-radius greater than 10px on any UI element; this begins to feel playful rather than professional and undermines the 'serious analytics tool' positioning.
• Don't reduce line-height below 1.5x on body text (16px × 1.5 = 24px minimum) or increase letter-spacing beyond 0.02em on body copy, as this harms readability on screens.