Berry

Overview

Berry is a Material Design-driven React admin dashboard template that prioritizes clarity, accessibility, and data-driven decision-making. Built with Material-UI, Redux, and React Hooks, it serves developers and product teams who need a production-ready foundation for financial dashboards, analytics platforms, and enterprise applications. The aesthetic is 'Functional Minimalism'—a disciplined approach that strips away ornamentation while maintaining visual warmth through carefully chosen accent colors (primary blue #2196f3, secondary purple #7c3aed) and generous whitespace. The interface evokes trust and professionalism: clean grids, predictable component behavior, and a color palette rooted in Material Design's proven usability research.

The brand voice is direct, confident, and data-literate. Sentences are short and metric-focused: 'Total Earning: $500.00' rather than 'Your earnings have accumulated to five hundred dollars.' The typography system uses Roboto throughout, a typeface chosen for its neutrality and screen legibility at all sizes. Berry speaks to developers in their language—component names, prop patterns, and configuration options are transparent and self-documenting. The personality is neither playful nor austere; it is pragmatic and supportive, acknowledging that the user's attention is on the data, not the interface.

Colors

The color system is anchored in Material Design 3 principles, with a primary accent of #2196f3 (a vibrant, accessible blue) used for all interactive elements—buttons, links, focus states, and data highlights. This primary color appears on CTAs like 'View All' buttons and chart accents, commanding attention without aggression. Secondary color #7c3aed (a deep purple) supports the primary through metric cards and supplementary data visualizations, creating visual rhythm across the dashboard. Tertiary #ffc107 (amber) is reserved for status indicators, profit badges, and positive sentiment (e.g., '10% Profit' labels). The surface stack is built on pure white (#ffffff) as the base, with carefully calibrated grays for container hierarchy: #eceff1 for standard containers, #e0e0e0 for elevated surf

Typography

The type system uses Roboto as the sole typeface family, a sans-serif chosen for its neutrality and proven legibility on screens at sizes from 13px to 60px. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) frames section headers; Headline-md (28px, 600 weight) introduces card titles and modal headers; Title-lg (20px, 600 weight) labels subsections and metric names. Body-lg (18px, 400 weight) is used sparingly for introductory paragraphs; Body-md (16px, 400 weight) is the workhorse for form labels and list content; Label-md (14px, 500 weight, 0.01em letter-spacing) marks buttons and small UI labels; Label-sm (13px, 400 weight, 0.02em letter-spacing) is applied to badges, tooltips, and chart annotations. Line-heigh

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, allowing the dashboard to scale fluidly from mobile (single column) to desktop (multi-column). The primary gutter (horizontal spacing between columns) is 24px, derived from the 8px unit scale. Vertical rhythm is maintained through the spacing scale: 8px (unit), 12px (sm), 24px (md), 40px (lg), and 64px (xl). Section separation uses lg spacing (40px) to create breathing room between major content blocks; card-to-card spacing within a grid uses md (24px); internal card padding uses md (24px) for consistent breathing room around content. The sidebar navigation occupies approximately 260px on desktop, leaving the main content area to flex responsively. Metric cards in the hero section use a 3-column layout on

Elevation & Depth

Depth in Berry is conveyed through a restrained shadow system that avoids the visual heaviness of Material Design's older elevation scale. Three shadow levels are defined: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and inactive states; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards, inputs, and default buttons; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for hover states, modals, and tooltips. The lg shadow matches the ApexCharts tooltip shadow (box-shadow: 2px 2px 6px -4px #999 in the CSS excerpt, approximated to 0 3px 8px rgba(0, 0, 0, 0.15) for consistency). Metric cards in the h

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used sparingly and purposefully to soften hard edges without introducing visual softness that would undermine the professional tone. The rounded scale is: sm (4px) for small UI elements like checkbox borders and minor dividers; DEFAULT (8px) for input fields and small buttons; md (12px) for list items and secondary cards; lg (16px) for primary buttons, standard cards, and metric cards; xl (24px) for modals and elevated containers; full (9999px) for badges and pill-shaped buttons. Buttons use lg (16px) radius, creating a subtle rou

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#2196f3) background with white text, 48px height, 12px vertical and 24px horizontal padding, and lg (16px) border-radius. On hover, the background shifts to #1976d2 with an lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and a 0.2s ease transition. On active/pressed, the background darkens to #1565c0 with an sm shadow, providing tactile feedback. Secondary buttons use a transparent background with a 1px border at {colors.outline} (#90a4ae) and {colors.primary} text; on hover, the background fills with {colors.surface-container-low} (#f0f0f0) and the border becomes {colors.primary}. All button text uses {typography.label-md} (14px, 500 weight, 0.01em letter-spacing). Focus states add a 3px rin

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2196f3) exclusively for primary CTAs, focus states, and active navigation items—it is the brand's signature accent and must remain visually distinct.
• Do maintain 24px gutters and 40px section spacing to create breathing room; the dashboard's credibility depends on generous whitespace, not content density.
• Do apply {typography.label-md} (14px, 500 weight) to all button text and use sentence case ('View All', not 'VIEW ALL') to maintain a professional, approachable tone.
• Do use the gradient backgrounds (linear-gradient(135deg, ...)) only on metric cards in the hero section; avoid gradients elsewhere to preserve clarity and reduce visual noise.
• Do test all interactive elements (buttons, inputs, cards) with keyboard navigation and screen readers; focus rings (3px rgba(33, 150, 243, 0.1)) must be visible and meet WCAG AAA standards.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no brand colors from other products. The system's strength is its constraint.
• Don't apply shadows heavier than lg (0 3px 8px rgba(0, 0, 0, 0.15)); deeper shadows create visual clutter and undermine the clean aesthetic.
• Don't mix typefaces; Roboto is the sole font family. Avoid system-ui, -apple-system, or fallback fonts in component definitions.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the visual language and confuse users about component hierarchy.
• Don't disable hover or focus states on interactive elements; they are essential for accessibility and user confidence, especially in data-heavy interfaces where users need clear feedback.