0 drift issues detected

Plumb Design System

Every token, component, and pattern used in buoy-site - documented, live, and continuously checked for drift.

Tokens

Colors, typography, spacing, and effects. The raw values every component is built from.

Color Tokens

All colors are CSS custom properties under @theme in src/styles/global.css. They respond to light mode automatically.

Navy

--color-navy-dark

tw: navy-dark

◐ #0f1829

☀ #FFFFFF

--color-navy

tw: navy

◐ #1a2744

☀ #F0F4F8

--color-navy-light

tw: navy-light

◐ #243352

☀ #CBD5E1

Brand - Buoy Orange

--color-buoy

tw: buoy

◐ #F97316

☀ #F97316

--color-buoy-light

tw: buoy-light

◐ #FB923C

☀ #FB923C

--color-buoy-dark

tw: buoy-dark

◐ #EA580C

☀ #EA580C

Accent - Lavender

--color-lavender

tw: lavender

◐ #8B5CF6

☀ #6366F1

--color-lavender-light

tw: lavender-light

◐ #A78BFA

☀ #818CF8

--color-sky-purple

tw: sky-purple

◐ #6366F1

☀ #4F46E5

Sunrise

--color-sunrise

tw: sunrise

◐ #F59E0B

☀ #F59E0B

--color-sunrise-light

tw: sunrise-light

◐ #FBBF24

☀ #FBBF24

Text

--color-light

tw: light

◐ #F8FAFC

☀ #1A2744

--color-light-muted

tw: light-muted

◐ #E2E8F0

☀ #243352

--color-slate

tw: slate

◐ #94A3B8

☀ #475569

--color-slate-dark

tw: slate-dark

◐ #64748B

☀ #94A3B8

Semantic

--color-success

tw: success

◐ #10B981

☀ #059669

--color-warning

tw: warning

◐ #F59E0B

☀ #D97706

--color-critical

tw: critical

◐ #EF4444

☀ #DC2626

--color-info

tw: info

◐ #3B82F6

☀ #2563EB

Typography

Three font families, each with a specific role. Set via CSS variables in global.css.

Display - --font-display

Quicksand

Quicksand, system-ui

Headings, hero text, brand moments

Body - --font-body

Inter

Inter, system-ui

Paragraphs, UI labels, descriptions

Mono - --font-mono

JetBrains

JetBrains Mono, Fira Code

Code, terminal output, token names

Type Scale

text-5xl

Design Systems

text-4xl

Token-Driven

text-2xl

Consistent by Default

text-xl

No Hardcoded Values

text-base

Body text reads cleanly at this size. Designed for long-form content and UI descriptions.

small

text-sm

Supporting text, captions, helper copy

code

text-sm

npx ahoybuoy drift check

Spacing

Section spacing tokens. Element-level spacing uses Tailwind's default scale.

--spacing-section

6rem - Section padding desktop

--spacing-section-sm

4rem - Section padding mobile

Effects

Glow utilities, text gradients, and animation classes defined in global.css.

Glows

.glow-buoy

box-shadow: 0 0 30px buoy/40%

.glow-lavender

box-shadow: 0 0 30px lavender/30%

Text Gradients

Catch Design Drift

.text-gradient-sunrise

buoy → sunrise → lavender at 135°

Motion

The nautical physics model. Every transition, animation, and interaction follows these principles.

Motion

All animation in Plumb follows a nautical physics model. The ⛵ boat is the system mascot - its motion vocabulary defines how every transition feels.

Keyframe Reference

⛵

boatBob

4s ease-in-out · translateY(-15px) rotate(3deg)

⛵

boatDrift

25s linear · left -5% → 105%

splashDroplet

0.4–0.7s ease-out · 5 particles, fan spread

splashRing

0.7s ease-out · ellipse scale(0.5 → 4, 2)

twinkle

3–5s ease-in-out · opacity 0.3 ↔ 0.8, staggered

⛵

.animate-float

6s ease-in-out · ±10px bob · used for decorative blobs

Motion Choreography - The Boat Escape

Five automated phases play out when the page loads. Phase 6 is user-triggered - an interactive physics system active at any time. Each uses a different easing curve or physical model.

⛵

Wiggle - anticipation

600ms · ease-in-out · 8 keyframes

Builds tension before the break. Rotates ±12° in a stuttering rattle - the boat is trying to escape. Disney's "anticipation" principle.

ease-in-out

⛵

Anticipation Lift - secondary action

120ms · ease-out · translateY(-6px)

A small upward feint before the drop. Creates the illusion of stored energy - like a diver crouching before the leap.

ease-out

⛵

Gravity Drop - overshoot

500ms · cubic-bezier(0.4, 0, 0.68, 1.4)

The y2 value of 1.4 overshoots the target - the boat dips slightly below the waterline before springing back. Paired with the splash at impact.

overshoot

⛵

Launch Ease-In - follow through

3000ms · cubic-bezier(0.3, 0, 0.8, 0.8)

After landing, the boat accelerates from rest to cruise speed over 3 seconds. The curve starts nearly flat (stationary) then steepens to match the 25s drift animation speed, so the handoff is seamless.

cubic-bezier(0.3, 0, 0.8, 0.8)

ease-in

⛵

Bobber Pop - spring overshoot

650ms · cubic-bezier(0.175, 0.885, 0.32, 1.55)

When the boat is released underwater, it shoots straight up and overshoots the surface before settling. The y2=1.55 creates a strong elastic spring - the buoy physics.

cubic-bezier(0.175, 0.885, 0.32, 1.55)

spring

Toss - interactive physics

rAF · GRAVITY 0.4 · vx×0.99 air resistance · velScale 0.5/1.25

User-triggered at any time. Grab and throw the boat. posHistory samples the last 6 pointer positions to calculate release velocity. Tilt: rotate(vx × 1.5deg) capped ±20°. Boat wraps horizontally - exits one edge, re-enters from the other. Release underwater → bobberPop spring (Phase 5). Landing → splash + resumeDrift ease-in (Phase 4) then drift seek.

GRAVITY = 0.4 vx *= 0.99 velScale: 0.5 desktop · 1.25 mobile posHistory[6] x > W → wrap

frame physics

⛵

grab & toss

Easing Tokens

--ease-out-expo

cubic-bezier(0.16, 1, 0.3, 1)

Fast out - UI transitions, reveals

--ease-in-out-expo

cubic-bezier(0.87, 0, 0.13, 1)

Symmetric expo - modals, drawers

Components

Live instances of every component, every variant. No mocks - what you see is what ships.

Button

src/components/Button.astro

Stable

variant / size	sm	md (default)	lg
primary
secondary
ghost

Token usage inside Button.astro:

primary: bg-buoy text-navy-dark hover:bg-buoy-light glow-buoy

secondary: bg-navy-light/50 text-light border-navy-light/50

ghost: text-slate hover:text-light hover:bg-navy-light/30

FeatureCard

src/components/FeatureCard.astro

Stable

🛟

With Link

Cards with href get a hover glow, clickable title, and a Learn more CTA at the bottom.

token.violation

hardcoded.value

Learn more

⚓

Without Link

Static cards omit the link affordance entirely. Same token usage throughout.

pattern.match

rule.enforced

Minimal

No icon, no examples, no link. Just a title and description using the same border and bg tokens.

Props: title* · description* · icon · href · examples

With href: hover glow-buoy scale-105 · Examples: font-mono text-xs text-slate-dark

Terminal

src/components/Terminal.astro

Stable

buoy-cli

🛟 Scanning design-system.astro...

✓ 0 issues found

All tokens resolve to design system values.

No hardcoded colors, spacing, or typography.

Line type → color token mapping:

outputtext-slate--color-slate

successtext-success--color-success

warningtext-warning--color-warning

criticaltext-critical--color-critical

infotext-info--color-info

mutedtext-slate-dark--color-slate-dark

Props: command* · lines - each with text, type, delay (ms)

Animated typing · bg-navy-dark border-navy-light/30 rounded-xl · Title bar with traffic lights

DocTerminal

src/components/DocTerminal.astro

Stable

Static terminal for docs. Unlike Terminal.astro, renders all lines immediately - no animation delays. Has a copy button in the title bar.

terminal

$ npx ahoybuoy show tokens --format table

TOKEN VALUE

--color-buoy #F97316

--color-navy #1a2744

--color-lavender #8B5CF6

3 tokens found

Props: command* · lines (same type tokens as Terminal)

bg-navy-dark border-navy-light/30 · Copy in title bar · No delays or JS typing animation

CodeBlock

src/components/CodeBlock.astro

Stable

language="bash" (default)

  <div class="">npx ahoybuoy drift check</div><div class="">npx ahoybuoy show tokens</div> 

With filename + copy button

buoy.config.mjs

<div class="">export default {</div><div class="">  extends: 'buoy:recommended',</div><div class="">  rules: {</div><div class="">    'no-hardcoded-colors': 'error',</div><div class="">    'no-arbitrary-spacing': 'warn',</div><div class="">  },</div><div class="">}</div>

showLineNumbers + highlighted lines

example.js

<div class=""><span class="text-slate-dark select-none mr-4 w-6 inline-block text-right">1</span>import { tokens } from './tokens'</div><div class=""><span class="text-slate-dark select-none mr-4 w-6 inline-block text-right">2</span></div><div class="bg-buoy/10 -mx-4 px-4"><span class="text-slate-dark select-none mr-4 w-6 inline-block text-right">3</span>const color = '#ff0000'  // ← drift!</div><div class=""><span class="text-slate-dark select-none mr-4 w-6 inline-block text-right">4</span>const bg = tokens.navy   // ✓ token</div>

Props: code* · language='bash' · filename · highlights · showLineNumbers

Hover: lavender/10→buoy/5 blur · Copy: slate→buoy · Check icon 2s then reset

Flags

src/components/Flags.astro

Stable

CLI flag reference list for docs pages. Renders a scannable list of flag names, descriptions, required badges, and defaults.

--config Path to buoy config file (default: buoy.config.mjs)

--format Output format: pretty | json | table (default: pretty)

--fix Auto-apply suggested token fixes

--token API token for cloud features required

Props: items* - Array of { name, description, required?, default? }

Flag: text-lavender bg-navy-light/20 · required: bg-critical/20 text-critical · default: text-slate-dark

WaveBackground

src/components/WaveBackground.astro

Stable

Animated hero background. Always position: absolute; inset: 0 - wrap in a relative overflow-hidden container with a defined height.

🛟 Content renders above via z-index

No props. 3 wave layers + SVG stars + 8 floating particles + mesh gradient overlay.

Light mode: daytime ocean scene · Mobile: blur filters, particles, and star animations disabled

Nav

src/components/Nav.astro

Layout

Fixed full-width navigation. Renders as position: fixed; top: 0; z-50 - already active at the top of this page. Not safe to embed inline.

Full Width (left/right aligned)

Buoy

Container: w-full px-4 sm:px-6 lg:px-8 + justify-between

Left / Center / Right

Buoy

Container: w-full px-4 sm:px-6 lg:px-8 + center nav group

Anatomy

Bar: backdrop-blur-md bg-navy-dark/80 border-b border-navy-light/20

Dropdowns: CSS-only opacity/visibility on group-hover, no JS needed

Mobile menu: JS toggles hidden class on #mobile-menu

Theme toggle: localStorage + html.light class, responds to prefers-color-scheme

No props. Dropdown data arrays defined in component frontmatter.

CTA: bg-buoy glow-buoy hover:scale-105 · Nav links: text-slate → text-light

Patterns

Recurring compositions built from the token primitives above.

Section Header

Section Title

Supporting description in text-slate. Always below the heading, never above.

border-buoy / text-light (display) / text-slate (body)

Inline Code

Run npx ahoybuoy drift check in your repo root. It reads buoy.config.mjs automatically.

font-mono / text-buoy / bg-buoy/10 / border-radius: 4px

CTA Row

Primary Action Secondary Action Ghost Action

Primary first, secondary second, ghost third. gap-3 between.

Checkmark Benefit List

Primary benefit title

Supporting description. One or two lines, parallel structure across all items.

Secondary benefit

Keep descriptions parallel in structure and length to the item above.

svg.text-success w-5 h-5 mt-0.5 shrink-0 / font-semibold text-light text-sm / text-xs text-slate

FAQ Accordion

Is the free tier really free forever?

Yes. The CLI scanner is MIT-licensed and has no expiry.

How does the GitHub App work?

Install from GitHub Marketplace. It runs drift checks on every PR and posts inline fix suggestions.

details.group bg-navy/50 border-navy-light/20 rounded-xl / group-open:rotate-180 transition-transform

PDF / Conversion Badges

Free PDF Download

Free PDF

Pill: rounded-full px-3 bg-buoy/10 border-buoy/30 text-buoy · Badge: rounded px-2 bg-buoy/20 text-xs font-medium

Limited Availability Notice

* Limited availability

Only 100 founding member spots. Once they're gone, standard pricing applies.

bg-navy-dark border-buoy/30 rounded-xl · text-buoy asterisk accent / font-semibold text-light + text-sm text-slate

Pricing Tier Card

$0 /month

Free forever

Full CLI scanner - unlimited scans

buoy.config.mjs rules engine

GitHub App PR comments

bg-navy-dark border-navy-light/30 rounded-2xl · text-3xl font-bold · success ring · w-4 check/cross icons

Status Badges

success

warning

critical

info

inline-flex items-center gap-2 px-3 py-1.5 rounded-full · dot: w-2 h-2 rounded-full bg-{semantic}

Conversion

Lead capture components. Each wraps LeadMagnetForm in a different layout context.

LeadMagnetForm

src/components/LeadMagnetForm.astro

Conversion

Email capture form primitive. Used inside all lead magnet variants. Handles submit, loading, success, and error states.

Props: leadMagnet* · buttonText='Get the PDF' · successMessage

Input: bg-navy-light/50 focus:border-buoy · Button: bg-buoy glow-buoy hover:scale-105 · Success: bg-green-500/20

LeadMagnetCallout

src/components/LeadMagnetCallout.astro

Conversion

Inline callout card for embedding lead capture in article or docs context. Switches to horizontal layout on large screens.

Free PDF

20 warning signs of design system drift

A checklist for your next code review. Spot drift before it compounds.

No spam. Unsubscribe anytime.

Props: leadMagnet* · headline* · subhead* · buttonText='Get the PDF'

bg-gradient buoy/10→lavender/10 border-buoy/20 · lg:flex-row · "Free PDF" square badge

LeadMagnetCTA

src/components/LeadMagnetCTA.astro

Conversion

Full-width centered section CTA. Used at the bottom of content pages to offer a related PDF download.

Free PDF Download

Where does your design system stand?

Assess your maturity level and get a roadmap for what to fix next.

No spam. Unsubscribe anytime.

Props: leadMagnet* · headline* · subhead* · buttonText='Get the PDF'

py-16 bg-navy centered text · "Free PDF Download" pill badge · max-w-md form

LeadCaptureSection

src/components/LeadCaptureSection.astro

Conversion

A/B-tested two-column lead capture with PDF preview mockup. PostHog feature flag homepage-lead-magnet-variant selects the active variant; defaults to drift-checklist.

Free PDF

Got drift?

Get the checklist. 20 warning signs to spot in your next code review.

No spam. Unsubscribe anytime.

drift-checklist.pdf

Hardcoded hex values instead of tokens

Arbitrary pixel values outside your scale

Inline styles overriding components

!important used to force changes

+16 more...

No props. 3 variants: drift-checklist · why-developers-bypass · maturity-model

A/B via PostHog · PDF preview: rotate-1 hover:rotate-0 · grid lg:grid-cols-2

Data Visualization

Report widgets from @buoy-design/plumb. Used in the Buoy dashboard, Ask Buoy reports, and PR comments.

SeverityBadge

@buoy-design/plumb

Stable

Colored pill with status dot. Used in table cells, timeline events, and inline mentions.

12 errors5 warnings3 infos0 ignores

Props: severity*: error | warning | info | ignore · count?: number

Pill: rounded-full · Dot: 6px · Font: Inter 12px 500

StatCard

@buoy-design/plumb

Stable

Metric card with large value, label, and optional change indicator. Variant adds left border color.

Total Issues

4212.5%

Token Coverage

87%3.2%

Critical Drift

728.0%

Props: value* · label* · change? · changeDirection? · variant?: success | warning | critical

Value: Quicksand 30px 700 · Label: Inter 14px 500 · Card: 16px radius, 24px padding

TrendSpark

@buoy-design/plumb

Stable

Stat card with inline SVG sparkline. Renders a polyline from the data array.

Drift issues this week

-12.5%

Props: value* · label* · data*: number[] · change? · changeDirection?

Sparkline: 80×32px SVG · Stroke: 2px round · Color: success/error/muted by direction

ScoreGauge

@buoy-design/plumb

Stable

Semi-circle SVG arc gauge. Auto-colors by percentage: 0-30% critical, 30-60% warning, 60-100% success.

Token Coverage

Consistency

Risk Score

Props: value*: number · label* · max?=100

Arc: 120×68 viewBox · stroke-width: 10 · linecap: round · Animated dashoffset

DriftBreakdown

@buoy-design/plumb

Stable

Pure CSS horizontal bar chart for drift type distribution. Colors are hardcoded per drift type.

Drift by Type

hardcoded-color

hardcoded-spacing

arbitrary-tailwind

inline-style

magic-number

Props: items*: DriftBreakdownItem[] · title?

Bar: 20px height, 4px radius · Label: JetBrains Mono 12px · Count: JetBrains Mono 14px 600

DataTable

@buoy-design/plumb

Stable

Data table with typed cell renderers (severity, bar, filePath, number, delta), optional sort, and expand-to-show-all.

File	Severity	Issues	Change
Header/Header.module.css	error	12	+3
Card/Card.tsx	warning	8	-2
Button/Button.module.css	info	5	0
layouts/MainLayout.astro	warning	4	+1

Props: columns* · data* · sortable? · maxRows?=10

Column render: severity | bar | filePath | number | delta · Hover: bg-hover · Expand button: border 8px radius

ComparisonCard

@buoy-design/plumb

Stable

Before/after comparison. Single-metric mode shows large values with arrow. Multi-metric mode renders a compact table with delta pills.

Drift Issues

-22.2%

Last Week

This Week

12 fewer than last week

Weekly Comparison

Metric	Last Week	This Week	Change
Total Issues	54	42	-22.2%
Critical	9	7	-22.2%
Token Coverage	82%	87%	+6.1%

Single: metric · before · after · delta? | Multi: metrics[]

DeltaPill: rounded-full 12px · success-muted/error-muted/bg-hover backgrounds

Timeline

@buoy-design/plumb

Stable

Vertical timeline with colored dots, PR-aware fields, severity badges, and impact indicators.

PR #142 — Migrated color tokens

Mar 12, 2026

-8 issues3 errors2/2 suggestions adopted

PR #139 — New card component added

Mar 10, 2026

5 errors3 suggestions

Spacing refactor

Mar 8, 2026

Replaced hardcoded px values with spacing tokens across 12 files.

Major cleanup

Props: events*: TimelineEvent[] — each with title, date, prNumber?, issuesCount?, adopted?

Dot: 14px border-bg-card · Line: 2px border · PR title: buoy orange 700

Heatmap

@buoy-design/plumb

Stable

2D grid heatmap. Groups data by xKey (columns) and yKey (rows). Rows sorted by total descending. Buoy orange color scale.

Drift by File × Type

color

spacing

tailwind

total

components/Card.tsx

components/Header.css

components/Button.css

layouts/Main.astro

Props: data* · xKey* · yKey* · valueKey* · colorScale?

Cell: 3px radius · Label: JetBrains Mono 11px · Default scale: buoy orange 10%-90% opacity

MetricGrid

@buoy-design/plumb

Stable

CSS grid wrapper for StatCards. Configurable column count.

Total Issues

4212.5%

Token Coverage

87%3.2%

Critical Drift

728.0%

Props: metrics*: StatCardProps[] · columns?: 2 | 3 | 4

Layout: CSS grid · gap: 16px · Default: 3 columns

VerificationBadge

@buoy-design/plumb

Stable

Shows data verification status. Green badges for confirmed values, amber for unverified. Tooltip explains methodology.

Data verified — Total Issues, Token Coverage, and Critical Count confirmed against source (1 corrected)Not verified — Trend Direction

Props: verified*: string[] · unverified*: string[] · corrections*: Correction[]

Badge: 12px radius · Dot: 6px · Oxford comma list format · Max 5 fields shown

LineChart

@buoy-design/plumb

Stable

Multi-series line chart built on Recharts. Themed with design tokens, responsive container, and custom tooltip.

Props: data*: Record[] · xKey* · yKeys*: string[] · colors? · height?=280

Recharts ResponsiveContainer · Grid: dashed 3px · Stroke: 2.5px monotone · Dot: 4px r, card-fill stroke

AreaChart

@buoy-design/plumb

Stable

Gradient-filled area chart with optional stacking. Linear gradient fades from 40% opacity to transparent.

Props: data* · xKey* · yKeys* · stacked?=false · colors? · height?=280

Fill: linearGradient 0%→100% opacity · Stroke: 2px monotone · Legend: circle 8px

BarChart

@buoy-design/plumb

Stable

Vertical or horizontal bar chart. Top-rounded bars with chart token colors.

Props: data* · xKey* · yKey* · horizontal?=false · colors? · height?=280

Bar: radius [4,4,0,0] · Layout: horizontal or vertical · Grid: dashed 3px

PieChart

@buoy-design/plumb

Stable

Donut chart with legend. Inner radius creates the donut hole; padding angle separates slices.

Props: data* · nameKey* · valueKey* · monotone?=false · colors? · height?=280

Donut: outerRadius 100, innerRadius 60 · paddingAngle: 2 · Monotone: opacity stepped 95%→12% · Legend: circle 8px

SpiderChart

@buoy-design/plumb

Stable

Radar/spider chart for multi-axis comparison. Shows current vs target across quality dimensions like coverage, consistency, and adoption.

Props: data*: Record[] · axisKey* · dataKeys*: string[] · colors? · height?=320 · max?

Recharts RadarChart · PolarGrid · Fill: 15% opacity · Stroke: 2px · Legend: circle 8px

Treemap

@buoy-design/plumb

Stable

Treemap for hierarchical data sized by value. Shows component distributions, file sizes, or category breakdowns as nested rectangles.

Props: data*: {name, value, children?}[] · colors? · height?=280

Recharts Treemap · Custom content renderer · Name + value labels in cells

FunnelChart

@buoy-design/plumb

Stable

Funnel chart for progressive narrowing stages. Use for issue resolution pipelines or conversion flows.

Props: data*: Record[] · nameKey* · valueKey* · colors? · height?=280

Recharts FunnelChart · Cell coloring · White text labels inside segments

ScatterChart

@buoy-design/plumb

Stable

Scatter plot for showing correlation between two numeric variables. Use for complexity vs drift count, size vs issues.

Props: data*: Record[] · xKey* · yKey* · nameKey? · colors? · height?=280

Recharts ScatterChart · CartesianGrid · Tooltip with labels

WaterfallChart

@buoy-design/plumb

Stable

Waterfall chart showing cumulative effect of sequential positive and negative values. Last item treated as the total.

Props: data*: {name, value}[] · positiveColor? · negativeColor? · totalColor? · height?=280

Recharts BarChart · Stacked transparent base + colored delta · Green/red/orange defaults

StackedBarChart

@buoy-design/plumb

Stable

Stacked bar chart for comparing category breakdowns across groups. Use for issues by severity per week or drift by type per file.

Props: data*: Record[] · xKey* · yKeys*: string[] · colors? · height?=280

Recharts BarChart · stackId stacking · Top series gets rounded corners

🛟

This page is the test

This page is built to be checked with Buoy. Point the CLI at the live URL and see Buoy score a real design system.

$ npx ahoybuoy@0.3.38 show health buoy.design/ds.astro

Health Score: 95/100 (Great)

▲ +7 from last scan

Value Discipline ████████████████████ 60/60

Token Health ███████████████░░░░░ 15/20

Consistency ████████████████████ 10/10

Critical Issues ████████████████████ 10/10

Improve your score:

→ Score 95 — to reach 100, improve token coverage and usage

Plumb Design System

Tokens

Color Tokens

Navy

Brand - Buoy Orange

Accent - Lavender

Sunrise

Text

Semantic

Typography

Type Scale

Spacing

Effects

Glows

Text Gradients

Motion

Motion

Keyframe Reference

Motion Choreography - The Boat Escape

Easing Tokens

Components

Button

FeatureCard

With Link

Without Link

Minimal

Terminal

DocTerminal

CodeBlock

Flags

WaveBackground

Nav

Footer

Patterns

Section Header

Section Title

Inline Code

CTA Row

Checkmark Benefit List

Primary benefit title

Secondary benefit

FAQ Accordion

PDF / Conversion Badges

Limited Availability Notice

* Limited availability

Pricing Tier Card

Status Badges

Conversion

LeadMagnetForm

LeadMagnetCallout

20 warning signs of design system drift

LeadMagnetCTA

Where does your design system stand?

LeadCaptureSection

Got drift?

Why do developers bypass your design system?

Where does your design system stand?

Data Visualization

SeverityBadge

StatCard

TrendSpark

ScoreGauge

DriftBreakdown

DataTable

ComparisonCard

Timeline

Heatmap

MetricGrid

VerificationBadge

LineChart

AreaChart

BarChart

PieChart

SpiderChart

Treemap

FunnelChart

ScatterChart

WaterfallChart

StackedBarChart

This page is the test