Intro

Cornerstone is the design language behind the Builder Dashboard — a data-dense analytics product for homebuilders and their communities. It documents the color, type, space, and components that keep every chart, table, and metric legible and on-brand.

Builder Dashboard surfaces large volumes of performance data. Cornerstone exists to make that data feel calm, trustworthy, and instantly scannable — so designers and engineers can respond quickly as product demands change.

Guidelines and resources

Use these sections to produce consistent, high-quality product interfaces.

• Accessibility
• Foundations — Colors
• Foundations — Typography
• Components
• Visualization
• Motion
• Illustrations

Principles

Accessibility

Cornerstone targets WCAG 2.1 AA for text, controls, and data displays. Accessibility is a foundation — not an afterthought — so every pattern below assumes keyboard, screen-reader, and color-vision support.

Color is never the only signal

Status hues (success, warning, danger) always pair with an icon, label, or position. Categorical chart colors are distinguishable under common forms of color-vision deficiency, and charts carry direct labels or a legend.

Contrast

Body text uses Ink 700+ on white or sunken surfaces. Brand purple on white meets AA for large text and UI components; small body copy prefers Ink 900. Disabled states reduce opacity but remain readable enough to understand availability.

Keyboard & focus

Interactive controls expose a visible focus ring using Brand Weak. Dropdowns, tabs, and nav rails are operable with Tab / Arrow keys. Motion respects prefers-reduced-motion — chart reveals and micro-transitions skip or shorten when reduced motion is requested.

Semantics & labels

Buttons and inputs include accessible names; icon-only actions require an aria-label. Tables use proper header cells; KPI tiles expose the metric name with the value. Tooltips supplement — they never replace — visible labels.

Colors

Built on Purple Sequential as the primary system color, with Purple 700 for primary actions, and a disciplined neutral scale. Click any swatch to copy its value.

Brand Primary actions, links, selected states, and the comparison line in charts

Neutrals Text, surfaces, borders, and the dark navigation rail

Semantic & status Health of content, leads, and survey scores

Pairing rule: always combine a status color with its tint background (e.g. --danger on --danger-bg) and never rely on hue alone — pair with an icon, label, or position.

Data visualization color Rich Media cool palette + six-hue categorical set

Rich Media series use a fixed cool ramp (tour → virtual). The same series always gets the same color across donuts, stacked bars, and legends. Soft six-hue ramps below stay available for other categorical charts.

Soft categorical hues

Categorical shades Six tints & shades per hue — same 100 → 900 structure as the purple sequential ramp. Click any stop to copy.

Purple Sequential Primary system ramp — heatmaps, choropleths, and intensity scales. Primary = 700

Typography

Lato is the single typeface — a humanist sans with friendly numerals that stay readable at the small sizes data tables demand. Regular (400) for body, Bold (700) for headings and metrics, Black (900) for hero figures.

Weights

Elevations

Four soft, low-spread shadows. Most surfaces stay flat on the page; elevation signals interactivity and layering — popovers, tooltips, and modals lift progressively.

Icons

A single-weight (2px) line set on a 24px grid. Icons inherit text color and pair with labels in the navigation rail, table cells, and helper affordances.

Grid and layout

An 8px base grid (with 4px half-steps) governs padding, gaps, and component sizing. Cards breathe at 24–30px of internal padding; dense tables tighten to 14–16px.

Radius & borders

Soft, modern corners. Controls and chips use 4–6px; cards and panels use 8–12px; pills and avatars go fully round. Borders are a single hairline neutral.

Borders: --line #E6E8EC for resting dividers and card outlines; --line-weak #EEF0F3 for inner table rows.

Components

The building blocks of every Builder Dashboard screen, assembled from the foundations above.

Buttons

Buttons trigger actions. Use one primary per view, pair it with secondary or tertiary for hierarchy, and reserve danger variants for destructive work.

When to use

Kinds

States

Sizes

Three sizes on the 8px grid — enough for dense tables and spacious toolbars without a long size ladder.

In context

Selects & filters Click to open · multi-select filter, single-select compare & date range

Multi-select uses checkbox boxes filled with --purple-500. Single-select uses a checkmark. Hover / selected rows use --brand-weak.

Searchable dropdown Type to filter · selected row uses a checkmark

Slider Purple 500 fill, thumb, and interaction ring

Badges

KPI tiles Engagement layout · label + trend · previous · sparkline

Left-aligned metric card: label and trend on top, large value, then previous period copy beside a success/danger sparkline.

Progress & completion

Completion status uses semantic color — green healthy, amber needs attention, red action needed. Build cards from rings, accent bars, and progress rows.

Completion rings

Ring color and fill percent track the same status scale. Pair with a short caption when the ring stands alone.

Status accent bar

A 5px top bar on the card signals overall status at a glance — same green / amber / red tokens as the ring.

Progress rows

Each checklist row shows a label, track, and percent. Use the danger tint background when a row needs action.

Status cards

Accent bar + title + ring. Same shell, three semantic states.

Satisfaction gauge

Progress bars & survey responses

Breadcrumb, tabs & navigation rail

Breadcrumb filter

Mount Everest Corp Select a Division

Northern California

Southern California

Mount Everest Austin

Dallas Metro

Select a Community

Carnelian

Delta Coves

Orchard Park

Provence

Chart tabs

Rich Media Clicks

Listing Views

Web Link Clicks

Driving Directions Clicks

Product tabs

Promoted Communities

Builder Boost

Report section pills

Horizontal pill tabs for switching dashboard report sections. Active uses brand text on a brand-weak fill — no underline.

Navigation rail

Slim icon rail: brand mark, primary destinations (Dashboard / Users / Spend / Report), then account actions. Active uses brand + brand-weak fill; icons are 22px.

Corporation card

Tooltip / popover

Static specimens below. Live chart hover uses a shared .chart-tip — fades/scales in, glides between focus points, and dismisses with a short fade.

Data table Frozen first column · horizontal scroll · section headers

Overview tables use pastel tr.sec-hdr section rows (Listing / Engagement / Leads / Spend). Grouped column headers still use teal th.grouphdr.

ROI calculator Linked sliders + editable inputs that recompute live

Visualization

Charts pull directly from the categorical palette and the purple sequential ramp. Start with the basic building blocks, then compose them into dashboard views.

Building blocks

Single-series primitives. Use brand purple for comparison lines, categorical hues for discrete series, and the purple sequential ramp for intensity.

Assembled examples

Building blocks combined into dashboard patterns — stacked bars with a comparison line, area trends, funnels, and interactive tooltips.

Funnel

Section colors use the 200 ramp step — Listing (--dv-teal-200), Engagement (--dv-pink-200), Leads (--dv-gold-200), Spend (--dv-green-200). Click a stage to activate; Explore drills into Leads.

Point tooltip

Usage: Rich Media always uses --dv-tour … --dv-virtual. Soft six-hue fills are for other categorical charts (≤6 series); beyond that, group the long tail into “Other” (--ink-300). The purple comparison line is reserved exclusively for the comparison metric.

Motion

Motion in Cornerstone is functional, never decorative. Quick, eased transitions confirm interaction and reveal data without slowing the analyst down. Animations bring clarity to interfaces and reinforce trust in dense dashboard experiences.

Values of motion

• Smooth interactions — Transitions make filters, tabs, and controls feel natural instead of abrupt.
• Direct attention — Motion draws the eye to what changed: a new chart series, an open menu, a pressed button.
• Define hierarchy — Enter/exit timing and elevation shifts show what sits above what — dropdown over page, tooltip over chart.
• Provide feedback — Motional response confirms the system heard the click before the data updates.

Effectiveness

Judge every animation against two questions before shipping it:

Principles

Builder Dashboard is an enterprise analytics product. Motion exists to reinforce interaction and effectiveness — not to entertain. Three principles guide every transition.

Natural

Intuitive motion is backed by familiar physics. A button press dips slightly then recovers — like pressing a leaf on water — so the response feels earned.

Performant

Enterprise dashboards need fast interaction. Appearing UI can ease in; disappearing UI should leave quickly and together, without staggered delays that keep the analyst waiting.

Concise

When expanding a menu, focus is on the content — not the caret. Rotate the icon just enough to signal state; skip flourishes that compete with the data.

Duration & easing

Three durations cover the product. Prefer the shortest token that still reads clearly; chart reveals are the only long motion, and they play once on first view.

Reduced motion

Honor prefers-reduced-motion. Skip chart reveals, shorten or remove decorative transitions, and keep essential state changes (open/closed, selected) instantaneous or near-instant so the product stays usable without motion.

Illustrations

Flat, friendly scene illustrations carry the emotional moments — survey results, empty states, and celebrations. Soft pastel nature backdrops with rounded, diverse characters keep an otherwise data-heavy product approachable. Drop your brand artwork into the slots below.

Spot illustrations Drag an image onto any slot