Second Brain

R-Dash Design Direction Freeze (Checkpoint 3)

4 min read

R-Dash Design Direction Freeze (Checkpoint 3)

Decision

R-Dash frontend design direction locked. Aesthetic: frontend-minimalist (Swiss Grid). Reference brand: Linear (via design-library at implementation kickoff). Domain overlay: indian-market-ux (INR lakhs/crores formatting only, no RERA/Hindi/WhatsApp/UPI). Dials: DESIGN_VARIANCE=5, MOTION_INTENSITY=3, VISUAL_DENSITY=7. Accent color: indigo-700 (#4338CA) light / indigo-500 (#6366F1) dark — “intelligence platform” authority, distinct from Runwal brand, colorblind-safe. Typography: Geist Sans (display/body/ui) + Geist Mono (SQL/IDs/tabular), minor-third scale 12-64px, tabular numerals for financial data. Spacing 4px base. Radii 4/6/8/12. Shadows subtle (max 12% opacity). Motion 150/200/300ms, ease-out/in/in-out, no parallax, prefers-reduced-motion honored. Icons: lucide-react strokeWidth 1.5. Charts: ECharts themed, 8-hue qualitative + 6-step sequential + 5-step diverging, colorblind-safe. Navigation: left sidebar 240↔56px + top breadcrumb + optional right panel + ⌘K command palette. ~85 components across 12 modules + ~20 shared primitives (shadcn/ui + Radix, tokenized, vendored). Build: Vite 6 + Tailwind v4 native engine + CSS-vars token SoT + Storybook + Playwright a11y/visual-regression CI. State patterns enforced: loading-skeleton / illustrated-empty+CTA / typed-error-with-retry / stale-amber-dot / unreviewed-AI-amber-pill / certified-green-pill / disabled-tooltip. A11y baseline: WCAG 2.2 AA (AAA data text) + full keyboard + SR landmarks + aria-live + axe-core CI-blocking + 44×44px touch + 375px tested.

Rationale

Frontend-intelligence routed to minimalist because R-Dash audience is 9 function heads (executives), not ops engineers — needs density + scanability + polish, not cinematic impact (soft) or terminal rawness (brutalist). Linear reference chosen because it’s the 2025 gold-standard for minimalist tool design matching user’s “world-class unmatched” directive. indian-market-ux activated narrowly for INR formatting only because Runwal finance dashboards need lakhs/crores; broader Indian-UX patterns (RERA/WhatsApp/UPI) are N/A for internal English platform. Dials bumped DV 4→5 for “world-class” polish elevation; MI/VD held at minimalist defaults (3/7) because executives value legibility over max-density. Indigo accent over Linear’s purple because Linear’s purple is their brand — R-Dash needs its own accent; indigo-700 = authority + intelligence + colorblind-safe + distinct from Runwal corporate colors (this is internal, not Runwal-branded). Geist over Inter because Geist has better tabular numerals and display weight, and Inter is flagged for premium contexts. Tailwind v4 native engine + CSS-vars over SCSS for maintainability (zero build-time overhead, direct browser consumption). shadcn/ui vendored not npm-dep because we own the code and can tokenize exactly to R-Dash tokens. Self-approved Checkpoint 3 per feedback_expert_recommendations (tactical design decisions within expert scope).

Alternatives Rejected

frontend-soft aesthetic — rejected: Cinematic/luxury feel wrong for daily ops tool; function heads need efficiency, not marketing polish. frontend-brutalist — rejected: Terminal aesthetic + green-on-black too raw for CFO/Sales-Head audience; would feel like monitoring ops, not intelligence platform. Vercel as reference brand — rejected as primary: Excellent for marketing surfaces but less proven for dense tool UX than Linear; Vercel kept as secondary reference for typography patterns only. Retool as reference — rejected: Retool is low-code/internal-tool-builder aesthetic; R-Dash is a product-grade BI tool, aspires higher. Notion as reference — rejected: Content-first, less analytics-dense; wrong primary. Linear’s purple accent — rejected: It’s Linear’s brand color; copying it into R-Dash would feel derivative + confuse any future internal users of Linear. Teal accent (#0D9488) — rejected: Considered for “analytical” feel; indigo wins for “authority” and works better with warning/danger palette contrast. Inter typography — rejected: Generic; Geist is purpose-built by Vercel for tool UIs with better tabular numerals + display weight. IBM Plex Sans — rejected: Enterprise-safe but less polish than Geist. Satoshi — rejected: Proprietary licensing risk; Geist is MIT. Tailwind v3 — rejected: v4 native engine is faster, CSS-vars-first, no migration cost at greenfield. SCSS + BEM — rejected: Decades-old pattern; Tailwind v4 + CSS-vars does the job with less maintenance. React Aria components — rejected in favor of Radix: Radix has broader shadcn/ui ecosystem, better DX. Heroicons / Tabler icons — rejected: lucide-react is maintained by shadcn author, tight ecosystem fit. 100+ chart types via Apache Superset’s library — rejected per anti-requirement AR-16: 15 well-designed beats 100 mediocre. Storybook replaced by Ladle/Histoire — rejected: Storybook 8+ ecosystem still strongest for enterprise component catalog.

Outcome

Pending

Graph View

Backlinks