Databuddy

Overview

Databuddy is a developer-first analytics platform that transforms raw behavioral data into actionable insight cards. The design system embraces a "Data-Centric Minimalism" aesthetic: a dark, high-contrast canvas (rgb(24, 24, 28) background with rgb(231, 232, 235) text at 16px/500 weight) punctuated by strategic accent colors (magenta #b74677 for secondary actions, amber #e3a514 for warnings, cyan for success states). The UI evokes precision and clarity—every element serves the goal of rapid pattern recognition and decision-making. The emotional response is one of control: developers feel empowered, not overwhelmed, by their data.

The brand voice is direct, technical, and action-oriented. Vocabulary favors concrete nouns ("events," "funnels," "rollouts") over abstract adjectives. Tone is confident but never breathless—example: "Pricing traffic is converting 3x above baseline. Launch referral traffic is landing on /pricing and signing up at 12.4%." The platform speaks to developers as peers, assuming familiarity with analytics concepts while removing friction from implementation.

Colors

The color system is built on a dark-mode-first foundation with a neutral grayscale anchoring the interface. Primary (#e7e8eb, rgb(231, 232, 235)) is the signature light gray used for CTAs, active states, and high-emphasis text—it provides maximum contrast against the dark surface (rgb(24, 24, 28)) and reads as the brand's accent despite being achromatic. Secondary (#b74677, a vivid magenta) is reserved for secondary actions, highlights, and brand moments; it appears sparingly but memorably. Tertiary (#e3a514, a warm amber) signals warnings, feature flags, and actionable next steps. Error (#ff6b6b, a bright red) is used for critical alerts and destructive actions.

Surface stack: surface (#181820) is the base canvas; surface-container (#1e1e23) wraps content cards; surface-container-high (#

Typography

The type system uses ltSuperior (a custom geometric sans-serif) across all scales, creating a cohesive, technical aesthetic. Display (60px, 600 weight, -0.02em letter-spacing) anchors hero sections; headline-lg (40px, 600 weight) titles major sections; headline-md (28px, 600 weight) breaks up content; title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for long-form copy; body-md (16px, 500 weight, 24px line-height) is the default paragraph text and secondary CTAs. Label-md (14px, 600 weight, 20px line-height, 0.01em letter-spacing) is applied to form labels and inline badges; label-sm (12px, 600 weight, 16px line-height, 0.02em letter-spacing) is used for metadata, timestamps, and small UI labels. All headlines use 600 weight to convey

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The design favors a fluid, full-bleed hero section (no horizontal padding) that extends to the viewport edges, creating visual drama with gradient backgrounds and pixel-art mascot imagery. Below the fold, content is constrained to the container-max (1280px) with gutter spacing (24px) on left/right. Section separation uses lg spacing (40px) for major breaks (hero to features, features to pricing); md spacing (24px) for subsection breaks within cards; sm spacing (12px) for element-to-element relationships (label to input, icon to text). Cards and containers use md padding (24px) internally. The grid is responsive: on mobile, the gutter collapses to sm (12px), and the container max-width becomes 100% with s

Elevation & Depth

Depth is conveyed through a layered shadow and border system rather than color shifts. Level 1 (Base): no shadow, surface color (#181820) with no border. Level 2 (Standard Card): 1px border at outline-variant (#4a4a4d), box-shadow 0 4px 12px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Insight Card): 1px border at surface-container-highest (#323237), box-shadow 0 8px 32px rgba(0, 0, 0, 0.25), optional backdrop-filter blur(8px) for glassmorphic effect. Hover states increase shadow to lg (0 8px 32px rgba(0, 0, 0, 0.25)) and shift background to surface-container-high (#282829). Focus states add a 3px o

Shapes

The shape philosophy is "Technical Precision with Approachability." Buttons use lg radius (1rem / 16px) to feel modern and touchable; inputs and form fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian, technical appearance. Cards and containers use lg radius (1rem / 16px) to soften the interface and create visual hierarchy. Badges and small UI elements use full radius (9999px) for a pill-shaped, friendly aesthetic. The rationale: larger radii on primary interactive elements (buttons, cards) signal that the UI is designed for humans, not machines; smaller radii on inputs and form c

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses primary color (#e7e8eb) background with on-primary text (#181820), 12px font-size, 600 weight, lg radius (16px), and 12px 24px padding (40px height). On hover, background shifts to primary-container (#c4c5c8) with 200ms ease transition. button-secondary uses a transparent background with a 1px outline-variant border, on-surface text, and DEFAULT radius (8px). On hover, background becomes surface-container-high (#282829) and text shifts to primary (#e7e8eb). Both buttons support a disabled state: opacity 0.5, cursor not-allowed, no hover effect.

Containers & Surfaces card is the foundational container: surface-container background (#1e1e23), lg radius (16px), md padding (24px), 1px border at outline-

Do's and Don'ts

**Do**

• Do use primary (#e7e8eb) exclusively for the most important CTA on each page—typically "Start free" or "See answers surfaced."
• Do apply md spacing (24px) between major sections and sm spacing (12px) between related elements within a card to create visual rhythm.
• Do use label-sm (12px, 600 weight) with text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) for metadata and timestamps layered over gradient backgrounds.
• Do transition all interactive states (hover, focus, active) over 200ms ease to feel responsive without appearing laggy.
• Do maintain 1px borders at outline-variant (#4a4a4d) on all cards and containers to define edges without harsh shadows.

**Don't**

• Don't use secondary (#b74677) or tertiary (#e3a514) as primary CTAs—reserve them for secondary actions, warnings, and brand accents.
• Don't apply border-radius larger than lg (16px) on input fields or form controls; use DEFAULT (8px) to maintain technical precision.
• Don't mix shadow elevations within a single card stack—use md shadow consistently on standard cards and lg shadow only on hover or elevated states.
• Don't use on-surface-variant (#a8a9ac) for primary body text; reserve it for secondary text, disabled states, and metadata.
• Don't apply backdrop-filter blur(8px) to every card—use it sparingly on insight cards and modals to create visual hierarchy and avoid visual noise.