Design System

Marketing Atoms

ImportCC

Available via @stackmates/ui-marketing

ConnectionLine

SVG line with dash pattern, arrow, and label for diagramming notation references.

Data Flow

Direct data transfer between systems

API Call

Asynchronous request/response

Event

Pub/sub message broadcast

ConnectionLineProps

PropTypeDefaultDescription
type*'solid' | 'dashed' | 'dotted'—Line style pattern
label*string—Label displayed beside the line
color*string—Hex color for the line
descriptionstring—Optional description below label

Installation

typescript
import { ConnectionLine } from '@stackmates/ui-marketing';

Usage

Solid line

tsx
<ConnectionLine type="solid" label="Data Flow" color="#3b82f6" />

With description

tsx
<ConnectionLine
  type="dashed"
  label="API Call"
  color="#8b5cf6"
  description="Async request/response"
/>

Accessibility

  • SVG is aria-hidden — label text provides the meaning
  • Color + label + line style provide triple encoding
Related:
LegendItemStepIndicator

LegendItem

Colored dot with label for chart legends or timeline phase indicators.

Engineering

Design

Marketing

Support

Phase 1

Weeks 1-4

Phase 2

Weeks 5-8

Phase 3

Weeks 9-12

LegendItemProps

PropTypeDefaultDescription
color*string—Tailwind background color class or raw hex color
label*string—Legend label text
descriptionstring—Optional description text

Installation

typescript
import { LegendItem } from '@stackmates/ui-marketing';

Usage

Tailwind class

tsx
<LegendItem color="bg-blue-500" label="Engineering" />

Hex color with description

tsx
<LegendItem color="#6366f1" label="Phase 1" description="Weeks 1-4" />

Accessibility

  • Color dot is decorative — label text is the primary identifier
  • Supports both Tailwind classes and hex colors
Related:
ConnectionLineStatBox

StatBox

Single metric display with value, label, and optional sublabel. Use in grids or standalone.

98%
Uptime
2.4s
Avg Response
47
Active Projects
12K+
Users Served
$1.2M
Revenue
YTD 2026
340
Deployments
Last 30 days
99.9%
Reliability
Enterprise SLA

StatBoxProps

PropTypeDefaultDescription
value*string | number—The statistic value (number or formatted string)
label*string—Label describing the stat
sublabelstring—Optional secondary label
size'sm' | 'md' | 'lg''md'Size variant

Installation

typescript
import { StatBox } from '@stackmates/ui-marketing';

Usage

Basic

tsx
<StatBox value="98%" label="Uptime" />

With sublabel and size

tsx
<StatBox value="$1.2M" label="Revenue" sublabel="YTD 2026" size="lg" />

Accessibility

  • Value and label are plain text — readable by screen readers
  • Uses semantic font sizing for visual hierarchy
Related:
StatsCounterStepIndicator

StepIndicator

Numbered circle with label and optional sublabel for process flows and wizards.

1
Ingest
Load RFP document
2
Analyze
Extract requirements
3
Generate
Create proposal draft
1
Default
2
Active
3
Completed

StepIndicatorProps

PropTypeDefaultDescription
number*number—Step number
label*string—Step label
sublabelstring—Optional sublabel/description
size'sm' | 'md' | 'lg''md'Size variant
variant'default' | 'active' | 'completed''default'Color variant

Installation

typescript
import { StepIndicator } from '@stackmates/ui-marketing';

Usage

Basic

tsx
<StepIndicator number={1} label="Ingest" sublabel="Load RFP document" />

Active variant

tsx
<StepIndicator number={2} label="Analyze" variant="active" size="lg" />

Accessibility

  • Step number + label provide dual encoding (not color alone)
  • Variant colors are supplementary to the textual step number
Related:
ConnectionLineStatBox