Card Variants
Structurally different card designs. Each has distinct regions, layouts, and visual hierarchy.
.card
Flat dark gradient, single region. What we have everywhere now.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
.card-banded
Distinct header region with lighter background + divider. Two clear zones: metadata on top, content below.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
Full-width case study version:
Texas Metal Works
Custom metal fabrication shop goes from local word-of-mouth to 78% B2C growth with a full-stack embedded partnership.
.card-spotlight
Radial light bloom from the top-left corner. Dramatic, directional lighting, like a stage light hitting the card.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
Full-width case study version:
Texas Metal Works
Custom metal fabrication shop goes from local word-of-mouth to 78% B2C growth with a full-stack embedded partnership.
.card-ridge
Machined top bar with metallic gradient. Industrial edge that catches the light, like a milled steel bevel.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
Full-width case study version:
Texas Metal Works
Custom metal fabrication shop goes from local word-of-mouth to 78% B2C growth with a full-stack embedded partnership.
.card-split
Metallic left edge (matching ridge style) with content alongside. Catches the light vertically.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
Full-width case study version:
Texas Metal Works
Custom metal fabrication shop goes from local word-of-mouth to 78% B2C growth with a full-stack embedded partnership.
.card-stat
Two-region metric card: big number on top, detail panel below with darkened footer. Built for KPIs and results.
Static values:
With animated MetricsCounter (counts up on scroll):
Full case study section pattern (two-column layout used on industry pages):
Case Study
Texas Metal Works
A product company stuck at local word-of-mouth. We built the growth engine and unlocked 78% B2C growth in 6 months.
Read the full case study →Revenue growth
B2B growth
ROAS
Load time
.card-framed
Three distinct regions: header (lighter, metadata), body (main content), footer (darkened, actions/details). Full shadcn-style structure.
Ecommerce Growth
Paid media, SEO, conversion rate optimization, and channel strategy.
Revenue Operations
CRM, pipeline automation, fulfillment workflows, and analytics.
Speed & Configurators
Site speed, product configurators, custom funnels, and frontend engineering.
Full-width case study version:
Texas Metal Works
Custom metal fabrication shop goes from local word-of-mouth to 78% B2C growth with a full-stack embedded partnership.
ProcessTimeline
Git-tree inspired vertical timeline. Trunk line, commit nodes, branch connectors, and tag pills. Data-driven via steps array.
Foundation
Audit your channels. Identify the biggest gaps and quick wins. Build the roadmap.
Core Build
Stand up the systems: CRM, analytics, paid media, automations. Get the engine running and generating data.
Channel Expansion
Activate dormant channels. Scale what works. Automate what drains time. Compound the gains.
Side-by-Side on Dark
All variants with minimal content on a dark-section background.
Standard
Flat gradient, single region.
Banded
Header region + body content.
Spotlight
Radial light bloom from corner.
Ridge
Metallic top bar, milled edge.
Split
Metallic left edge + content.
Framed
Header + body + footer.
Data Visualizations
Recharts-powered chart components that replace stock imagery across the site. Each uses our design system colors and renders as SVG, sharp at any size, dark-theme native.
SparklineStat
Stat card with embedded trend sparkline. Enhances .card-stat with a tiny area chart showing the story behind the number.
RevenueGrowthChart
Full-width area chart in card-banded. Gradient fill dissolves into the dark card background. Dashed comparison line for previous year.
ChannelBreakdownChart
Horizontal and vertical bar chart variants showing revenue by channel. Visualizes the Revenue Multiples concept.
BeforeAfterChart
Split comparison card. "Before" (flat, dim) vs "After" (growth, bright). Visual weight difference tells the transformation story.
ChartBackground
Decorative chart as background texture for CTA sections. Very subtle, no interaction, like a topographic line behind content.
Ready to see these numbers for your brand?
We embed with your team and build the growth engine from the inside.
RadialProgressCard
Donut chart showing completion state. Center displays fraction or percentage as HTML text for better styling control.
FunnelChart
Pipeline visualization with custom SVG bars. Each stage narrows with conversion rates between stages. Colors gradient from dim to warm iron.
DashboardMockup
Composite mini dashboard combining sparklines, bar chart, and key metrics. Shows "what your dashboard looks like with Umbral."