Skip to content

Latest commit

聽

History

History
17 lines (13 loc) 路 2.08 KB

File metadata and controls

17 lines (13 loc) 路 2.08 KB

Design Context

Users

Chartbrew is used by product teams that need to connect data sources, create reusable datasets, and browse dashboards. Technical founders and technical product operators are usually the people doing setup, connection, and dataset/query configuration. The broader team mostly consumes dashboards, reports, and shared charts, so browsing, scanning, and trust in the numbers matter as much as builder power.

Brand Personality

Chartbrew should feel clear, capable, and practical. The interface should create confidence by making data workflows understandable, not by adding visual noise. It should be approachable for first setup and onboarding, while still leaving room for power users to configure sources, datasets, queries, filters, variables, and chart bindings in detail.

Aesthetic Direction

The product UI should be clean, direct, and operational, with a preference for Cal.com-like clarity: simple surfaces, readable structure, restrained hierarchy, and obvious actions. Avoid bloated, busy product analytics aesthetics like PostHog when they make screens feel crowded, loud, or overly branded. Use Chartbrew's existing light/dark theme tokens, HeroUI v3 components, compact cards, right-side configuration panels, blue primary actions, and orange secondary accents where they reinforce meaning.

Design Principles

  • Optimize for approachable onboarding first: help new users reach a useful dashboard or dataset quickly without exposing unnecessary technical machinery.
  • Preserve professional depth: advanced configuration should be available through progressive disclosure, not hidden behind separate modes or removed from expert workflows.
  • Keep dashboards and builders scannable: use clear grouping, compact controls, predictable right-side summaries/actions, and concise labels.
  • Prefer practical clarity over decoration: visual polish should explain state, hierarchy, or next action rather than compete with the data.
  • Treat WCAG AA as the baseline and rely on the theme system for accessible contrast, focus states, reduced-motion support, and color-safe UI patterns.