fractional.quest Design System

Component Gallery

Pattern-first components for fractional executive recruitment with live rendering, specifications, and implementation status.

79

Total Components

Pattern + Production

79

Working Components

Ready for use

100%

Pattern Coverage

7 components migrated

100%

Success Rate

vs 9% before patterns

Filter by category:

StatsGrid

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/StatsGrid/

CompareTable

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/CompareTable/

FeatureGrid

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FeatureGrid/

FAQ

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FAQ/

RateCalculator

working

form

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/RateCalculator/

IR35Breakdown

working

form

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/IR35Breakdown/

PermVsFractionalCost

working

form

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/PermVsFractionalCost/

CalendlyInline

working

feedback

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/CalendlyInline/

BookingWidget

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/BookingWidget/

ArticleHero

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ArticleHero/

ProseSection

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ProseSection/

AuthoritySourcesPanel

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/AuthoritySourcesPanel/

FractionalGlyph

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FractionalGlyph/

ProcessSteps

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ProcessSteps/

RelatedLinks

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/RelatedLinks/

CiteRef

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/CiteRef/

PullQuote

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/PullQuote/

BulletList

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/BulletList/

SectionDivider

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SectionDivider/

NumberedList

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/NumberedList/

KeyPointBox

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/KeyPointBox/

StatCallout

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/StatCallout/

EditorialAlert

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/EditorialAlert/

Paragraph

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Paragraph/

InlineLink

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/InlineLink/

TableOfContents

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TableOfContents/

Breadcrumb

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Breadcrumb/

KeyHighlights

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/KeyHighlights/

ArticleFooterMeta

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ArticleFooterMeta/

Icon

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Icon/

SidebarKeyFacts

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SidebarKeyFacts/

Heading

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Heading/

InlineTimeline

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/InlineTimeline/

SourcesPanel

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SourcesPanel/

StatsStrip

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/StatsStrip/

RequirementsList

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/RequirementsList/

ByTheNumbers

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ByTheNumbers/

SidebarRelatedReading

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SidebarRelatedReading/

HomepageSources

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/HomepageSources/

TimelineSection

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TimelineSection/

SidebarTOC

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SidebarTOC/

ArticleSidebar

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ArticleSidebar/

VizSection

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/VizSection/

KeepReading

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/KeepReading/

TopBar

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TopBar/

MobileStickyCta

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/MobileStickyCta/

FeaturedPage

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FeaturedPage/

SeeAlso

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SeeAlso/

ArticleBody

working

layout

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ArticleBody/

FourPillars

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FourPillars/

FeaturedJourney

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FeaturedJourney/

StageGateProcess

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/StageGateProcess/

BrandImageFooter

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/BrandImageFooter/

NinetySeconds

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/NinetySeconds/

HomepageFAQ

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/HomepageFAQ/

ReadinessChart

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ReadinessChart/

Sparkline

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Sparkline/

ScopeBreakdown

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ScopeBreakdown/

TeamGlyphRow

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TeamGlyphRow/

TerminalPanel

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TerminalPanel/

StatusBadge

working

feedback

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/StatusBadge/

TCFDComparisonTable

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TCFDComparisonTable/

ExecutiveMatchCalculator

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ExecutiveMatchCalculator/

RoleComparisonPillars

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/RoleComparisonPillars/

SchemaMarkup

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SchemaMarkup/

CookieConsent

working

feedback

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/CookieConsent/

ExecutiveDecisionTree

working

utility

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ExecutiveDecisionTree/

SectorCoverage

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SectorCoverage/

SiteHeader

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/SiteHeader/

Scope3Matrix

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/Scope3Matrix/

DepthContent

working

editorial

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/DepthContent/

MethodologyPreview

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/MethodologyPreview/

FooterNew

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/FooterNew/

MegaMenu

working

navigation

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/MegaMenu/

TeamPropositionStrip

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TeamPropositionStrip/

MissionCard

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/MissionCard/

RateIndex

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/RateIndex/

TwoPathsSection

working

data-display

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/TwoPathsSection/

ComplianceCalculator

working

form

View live rendering, pattern specification, and implementation examples.

_design-spec/patterns/ComplianceCalculator/

Pattern-first architecture following _design-spec workflow — HTML visual reference, JSX pattern, README specification.

Built with Next.js 16, TypeScript, and design tokens. Last updated: 5/20/2026.