acd-data-dense-posthog-design

name	acd-data-dense-posthog-design
description	Reference DESIGN.md for analytics products that don't want to feel cold. Saturated cobalt + warning yellow on white. Hedgehog-tier personality without losing chart density. Use when building UI components, applying design tokens, or implementing visual styles for data dense posthog.
license	CC-BY-NC-SA-4.0
metadata	{"risk":"unknown","source":"community","kind":"mode","category":"design-systems","tags":["design-system","ui","data-dense","claude-design"]}

PostHog — Friendly Data-Dense Design Mode

You are an expert in the PostHog — Friendly Data-Dense aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

Source DESIGN.md

Reference DESIGN.md for analytics products that don't want to feel cold. Saturated cobalt + warning yellow on white. Hedgehog-tier personality without losing chart density.

1. Visual Theme & Atmosphere

Charts are the hero, but the chrome around them is warm and a bit goofy. Cobalt-blue brand action, yellow warning, black ink. Reads like Grafana that took a design review.

Mood: pragmatic, energetic, slightly mischievous.

2. Color Palette & Roles

--bg:              #ffffff
--bg-alt:          #f3f4ef
--surface:         #eeefe9
--bg-dark:         #1d1f27
--surface-dark:    #2c2e36
--text:            #000000
--text-muted:      #5f5e5b
--text-dim:        #8a8980
--border:          #d0d1c9
--border-strong:   #b6b6ad
--accent:          #1d4aff
--accent-hover:    #1639cc
--warning:         #f9bd2b
--success:         #29dbbb
--danger:          #db3707

/* categorical chart palette — preserve order */
--chart-1: #1d4aff
--chart-2: #f9bd2b
--chart-3: #29dbbb
--chart-4: #db3707
--chart-5: #621da6
--chart-6: #ff9d3a
--chart-7: #36a2eb
--chart-8: #6a3700

Rule: cobalt for action, yellow as warning OR brand-personality fill (never the same surface). Categorical palette assigned in declared order — don't re-roll for aesthetics.

3. Typography Rules

• UI + body: Matter, fallback Inter. Weight 400/500/700.
• Headlines: Matter weight 700, tracking −1.5%.
• Code + numerals: Matter Mono, fallback JetBrains Mono.

Scale: 11 / 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 / 48.

Tabular figures globally on metric surfaces.

4. Component Stylings

Buttons

• Primary: --accent fill, white text, radius 6, padding 8/14, weight 500, 1px inset highlight.
• Secondary: white fill, 1px --border-strong, black text.
• Brand-personality: --warning fill, black text — used for "Try the playground"-class moments only.

Cards

• --bg fill, 1px --border, radius 6. Header bottom-border 1px --border.
• Hover: border to --border-strong. No lift.

Inputs

• 1px --border-strong, radius 6, padding 8/12.
• Focus: 2px --accent ring, 1px offset.

Tables

• Tight: 32px row height. Hairline --border separators. Sticky headers on scroll.

Charts

• 1px tick marks, --text-dim axis labels, gridlines --border.
• Tooltip: --bg-dark fill, white text, radius 6, padding 8/12.

5. Layout Principles

• 1440px max app shell. 12-column.
• 4px base unit. 4/8/12/16/24/32/48 scale.
• Sidebar persistent at 240px. Charts dominate the right pane.

6. Depth & Elevation

Border + tonal-shift only on light surfaces. Modals get 0 8px 24px rgba(0,0,0,0.12). No card shadows.

7. Do's and Don'ts

Do

• Use yellow as personality on hero, cobalt for action. Never both as primary CTA.
• Render numbers in tabular Matter Mono.
• Show categorical legends in declared chart-palette order.

Don't

• Use cobalt for chart fill if it's also the page CTA — viewers will misread chart bars as buttons.
• Soften corners past 8px.
• Add a sixth UI color outside the categorical chart ramp.
• Drop the hedgehog mascot for "professionalism" — it's the brand's anti-corporate signal.

8. Responsive Behavior

• Sidebar collapses to icon rail at 1024px, hidden at 768px.
• Tables transform to stacked KV pairs below 640px.
• Charts compress legend to top instead of right below 768px.

9. Agent Prompt Guide

Bias: cobalt action + yellow personality, Matter UI, tabular Matter Mono numerals, 6px radius, hairline table rules, persistent sidebar.

Reject: dark-only themes, gradient charts, three-decimal precision, removing brand personality (mascot, micro-copy), pastel CTAs.

When to Use This Mode

• When user references posthog or the data-dense family as inspiration
• When building UI in the data-dense aesthetic
• When applying this brand's color palette, typography, or layout patterns
• When critiquing UI for adherence to this aesthetic