Kobbe

Overview

Kobbe is a privacy-first web analytics platform that delivers actionable traffic, conversion, and revenue insights without invasive tracking or cookie dependencies. The design language embodies "Minimalist Data Clarity"—a philosophy that treats data visualization and interface hierarchy as inseparable from the brand's core promise of transparency and respect. The aesthetic is deliberately austere: pure white backgrounds (oklch(1 0 0)), near-black text (oklch(0.145 0 0)), and a single dark primary accent (#1a1a1a) that grounds the interface in quiet confidence rather than visual noise. Every element serves analytical function; decoration is eliminated in favor of precise typography, generous whitespace, and subtle elevation shifts that guide attention without distraction.

The brand voice is direct, precise, and human—never breathless or hyperbolic. Kobbe speaks to privacy-conscious teams who value clarity over complexity. Example sentence: "See your visitors' behavior without turning them into data points." The tone avoids marketing clichés; instead, it emphasizes capability and control. Typography pairs a serif headline system (LTRemark) for authority with a clean sans-serif body (InterVariable) for readability. This pairing signals both trustworthiness and modernity—the serif grounds the brand in established analytical rigor, while the sans-serif keeps the interface approachable and contemporary.

Colors

The color system is deliberately constrained to enforce visual discipline and reinforce the privacy-first positioning. Primary (#1a1a1a) is the near-black used on all call-to-action buttons, interactive states, and primary text—it commands attention without aggression. On-primary (#ffffff) ensures maximum contrast (WCAG AAA) for accessibility and legibility. The surface stack progresses from pure white (surface: #ffffff) through subtle grays (surface-container: #e9ecef at 93% lightness, surface-container-high: #f0f9fa for hover states) to create depth without introducing color. Secondary (#f0f9fa) is a barely-tinted blue-gray used for subtle backgrounds and secondary containers, maintaining the monochromatic aesthetic while providing visual separation. Tertiary (#fef3c7) is a warm cream-ye

Typography

The type system uses a serif-and-sans pairing to balance authority with approachability. Display (LTRemark, 60px, 400 weight, -0.02em tracking) and headline-lg (40px, 400 weight) use the serif for hero messaging and section titles, establishing a classical, trustworthy tone. Headline-md (28px, 400 weight) steps down for subsections. Body text (InterVariable, 16px, 400 weight, 24px line-height) uses the sans-serif for optimal screen legibility and to maintain a contemporary feel. Label-md (14px, 500 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) are used for UI labels, button text, and metadata. The 500 weight on labels provides subtle emphasis without heaviness. All serif headlines use -0.01em to -0.02em negative letter-spacing to tighten the letterforms and enha

Layout

The page uses a 12-column grid with a max-width of 1280px (container-max), centered with symmetric gutters of 24px on desktop. The spacing scale is semantic: unit (8px) is the baseline increment; xs (4px) is used for micro-spacing between inline elements; sm (12px) for tight grouping; md (24px) for standard section padding and card interiors; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The hero section uses lg spacing (40px) above and below to create breathing room around the primary CTA. Metric cards are arranged in a horizontal scroll or flex row with md (24px) gaps, allowing users to scan data quickly. The layout philosophy prioritizes whitespace as a design tool—empty space is not wasted space but rather a signal of intentionality and clarity. Car

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mirrors the information hierarchy. Level 1 (Base/Surface): no shadow; elements sit flush on the white background (oklch(1 0 0)). Level 2 (Standard Cards & Inputs): box-shadow: 0 3px 8px rgba(0,0,0,0.15); used on metric cards, input fields, and secondary containers to lift them slightly above the base and signal interactivity. Level 3 (Modals & Dropdowns): box-shadow: 0 8px 24px rgba(0,0,0,0.12); creates pronounced separation for overlays and floating panels. Borders reinforce elevation: all elevated elements use a 1px solid border in ou

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but conservatively to balance approachability with precision. Buttons use lg radius (1rem / 16px) for a friendly, clickable appearance that signals interactivity without appearing playful. Cards and containers use xl radius (1.5rem / 24px) to soften edges and create visual breathing room. Input fields use DEFAULT radius (0.5rem / 8px) for a more compact, utilitarian feel that emphasizes data entry. Metric cards use xl radius (24px) to create visual distinction and hierarchy—the larger radius makes them feel like dis

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#1a1a1a), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 40px, rounded: {rounded.lg} (16px), and label-md typography (14px, 500 weight). The hover state (button-primary-hover) transitions backgroundColor to {colors.primary-container} (#2d2d2d) over 200ms with ease-out timing, creating a subtle darkening effect. Button-secondary uses a transparent background with a 1px solid border in {colors.outline} (#d0d0d0), same padding and height, and transitions to backgroundColor: {colors.surface-container-high} (#f0f9fa) on hover. Both buttons use transition: background-color 200ms ease-out, border-color 200ms ease-out to signal state changes smoothly.

##

Do's and Don'ts

**Do**

• Do use the serif headline system (LTRemark) for hero messaging and section titles to establish authority and trustworthiness.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to create visual breathing room and emphasize clarity.
• Do apply the tertiary color (#fef3c7) sparingly to highlight critical metrics or key performance indicators that demand user attention.
• Do use the three-tier shadow system consistently: Level 1 (no shadow) for base surfaces, Level 2 (0 3px 8px rgba(0,0,0,0.15)) for cards, Level 3 (0 8px 24px rgba(0,0,0,0.12)) for modals.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-out timing to signal interactivity smoothly.
• Do use 1px solid borders in outline (#d0d0d0) on all elevated elements to define edges crisply without visual heaviness.

**Don't**

• Don't introduce new colors outside the defined palette—the monochromatic surface stack and single tertiary accent are intentional constraints that reinforce the privacy-first positioning.
• Don't use the serif font (LTRemark) for body text or UI labels; reserve it exclusively for headlines and hero messaging to maintain readability and contemporary feel.
• Don't apply shadows heavier than lg elevation (0 8px 24px rgba(0,0,0,0.12)) or use multiple layered shadows; the restrained approach keeps the interface feeling light and data-focused.
• Don't exceed 24px padding on cards or containers; the md spacing (24px) is the maximum to maintain compact, scannable layouts that prioritize data density.
• Don't use border-radius smaller than sm (0.25rem / 4px) on interactive elements; the soft-technical philosophy requires minimum rounding to signal approachability.
• Don't animate transitions longer than 300ms or use easing functions other than ease-out; the interface should feel responsive and immediate, not sluggish or playful.