Components

Live previews of every component in the design system. Click "Copy HTML" to grab the snippet.

Cover Page

layout

Full-page branded cover with gradient background, logo, title, and metadata

Title Accent

Subtitle text

Tokens: gradients.cover colors.brand.evolveCyanLight typography.families.title

Variants: default workshop

CSS Classes: .cover .cover-header .cover-main .cover-title .cover-subtitle .cover-meta .cover-footer

HTML

<div class="page cover">
  <div class="cover-header">
    <img class="cover-logo" src="logo-white.svg" alt="VisionVolve">
  </div>
  <div class="cover-main">
    <h1 class="cover-title">Title <span>Accent</span></h1>
    <p class="cover-subtitle">Subtitle text</p>
  </div>
  <div class="cover-footer">
    <span class="cover-tagline">Tagline</span>
    <span class="cover-date">Date</span>
  </div>
</div>

Usage: First page of PDF documents — sets the visual tone

Page Header

layout

Full-width gradient header bar with uppercase page title

Tokens: gradients.header typography.families.title

Variants: default

CSS Classes: .page-header

HTML

<div class="page-header">
  <h1>Section Title</h1>
</div>

Usage: Top of every content page — provides section context

Info Card

card

Card container with title and profile rows — used for data display

Card Title

Label Value

Tokens: colors.neutral.softCloud colors.brand.evolveCyan borders.radius.lg

Variants: default bordered

CSS Classes: .info-card .bordered .card-title .profile-row

HTML

<div class="info-card">
  <div class="card-title">Card Title</div>
  <div class="profile-row">
    <span class="label">Label</span>
    <span class="value">Value</span>
  </div>
</div>

Usage: Company profiles, metric summaries, key information display

Value Box

card

Prominent value display with primary (gradient) and secondary (light) variants

Total Value

$1.2M

per year

Tokens: gradients.purpleDark colors.neutral.softCloud

Variants: primary secondary

CSS Classes: .value-box .primary .secondary

HTML

<div class="value-box primary">
  <div class="label">Total Value</div>
  <div class="amount">$1.2M</div>
  <div class="per-year">per year</div>
</div>

Usage: Hero metrics, total values, key financial figures

Data Table

data

Styled table with dark header, alternating rows, highlighted rows, and category dots

Name	Value
Row 1	Value
Row 2	Value

Tokens: colors.neutral.deepSlate colors.neutral.softCloud colors.semantic.successLight

Variants: default highlighted-rows with-category-dots

CSS Classes: .nice-table .highlighted .excluded .rank-badge .cat-dot

HTML

<table class="nice-table">
  <thead>
    <tr><th>Name</th><th>Value</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td><td>Value</td></tr>
    <tr class="highlighted"><td>Row 2</td><td>Value</td></tr>
  </tbody>
</table>

Usage: Use case tables, portfolio views, comparison data

Opportunity Bar

data

Horizontal bar chart with category colors showing opportunity values

Category $500K

Tokens: colors.domain colors.neutral.silverMist

Variants: ap ar fpa control

CSS Classes: .opp-bars .opp-item .opp-bar-track .opp-bar-fill

HTML

<div class="opp-bars">
  <div class="opp-item">
    <div class="opp-header">
      <span class="opp-category">Category</span>
      <span class="opp-value ap">$500K</span>
    </div>
    <div class="opp-bar-track">
      <div class="opp-bar-fill ap" style="width: 75%"></div>
    </div>
  </div>
</div>

Usage: Category breakdowns, opportunity sizing

Waterfall Chart

data

CSS-only waterfall visualization with category-colored bars

Label

$100K

Tokens: colors.domain colors.neutral.softCloud

Variants: default with-excluded

CSS Classes: .waterfall .waterfall-bar .waterfall-fill .waterfall-meta

HTML

<div class="waterfall-container">
  <div class="waterfall">
    <div class="waterfall-bar">
      <div class="waterfall-fill ap" style="height: 60%"></div>
      <div class="waterfall-meta">
        <div class="waterfall-label">Label</div>
        <div class="waterfall-value">$100K</div>
      </div>
    </div>
  </div>
</div>

Usage: Portfolio waterfall views, value breakdowns

Personal Note

card

Purple gradient callout for personalized messaging with cyan highlights

Note text with highlighted emphasis.

Tokens: gradients.purpleDark colors.brand.evolveCyanLight

Variants: default

CSS Classes: .personal-note .highlight

HTML

<div class="personal-note">
  <p>Note text with <span class="highlight">highlighted</span> emphasis.</p>
</div>

Usage: Personalized introductions, tailored messages

Confidence Indicator

indicator

Color-coded text for high/medium/low confidence levels

High Medium Low

Tokens: colors.semantic.success colors.semantic.warning colors.neutral.slateLight

Variants: high medium low

CSS Classes: .conf-high .conf-med .conf-low

HTML

<span class="conf-high">High</span>
<span class="conf-med">Medium</span>
<span class="conf-low">Low</span>

Usage: Data confidence levels in tables and metrics

Category Badge

indicator

Colored pill badge for use case categories

Accounts Payable

Tokens: colors.domain

Variants: ap ar fpa control tax

CSS Classes: .uc-category-badge .ap .ar .fpa .control .tax

HTML

<span class="uc-category-badge ap">Accounts Payable</span>

Usage: Category labels on use case pages

AITransformers Components

Live previews of every AITransformers component. Click "Copy HTML" to grab the snippet.

Hero Section

layout

Full-width hero with gradient background, headline, subtitle, and CTA buttons

Headline Text

Subtitle description text

Tokens: gradients.cover gradients.text colors.brand.primary

Variants: default with-3d-background

CSS Classes: .hero .hero-content .hero-title .gradient-text .btn-primary .btn-secondary

HTML

<section class="hero">
  <div class="hero-content">
    <h1 class="hero-title"><span class="gradient-text">Headline Text</span></h1>
    <p>Subtitle description text</p>
    <div>
      <button class="btn-primary">Primary CTA</button>
      <button class="btn-secondary">Secondary CTA</button>
    </div>
  </div>
</section>

Usage: Landing page hero — sets visual tone with dark gradient and cyan accents

Navigation Bar

layout

Sticky top navigation with logo, links, and search

Tokens: colors.brand.surfaceCard colors.brand.primary typography.families.title

Variants: default transparent

CSS Classes: .nav .nav-inner .nav-brand .nav-links .nav-link

HTML

<nav class="nav">
  <div class="nav-inner">
    <a class="nav-brand">
      <img src="logo.svg" alt="AITransformers">
      <span>AI<span style="color:#00BDD6">Transformers</span></span>
    </a>
    <div class="nav-links">
      <a class="nav-link active">Home</a>
      <a class="nav-link">Use Cases</a>
    </div>
  </div>
</nav>

Usage: Top of every page — brand navigation with dark surface

Use Case Card

card

Card for displaying a GenAI use case with title, description, priority badge, and category

Use Case Name

Low Priority

Description of the GenAI use case and its business impact.

Proven

Tokens: colors.brand.surfaceCard colors.semantic borders.radius.lg

Variants: default featured compact

CSS Classes: .card .card-title .badge .badge-low .badge-medium .badge-high

HTML

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Use Case Name</h3>
    <span class="badge badge-low">Low Priority</span>
  </div>
  <p>Description of the GenAI use case and its business impact.</p>
  <div class="card-footer">
    <span class="badge-proven">Proven</span>
  </div>
</div>

Usage: Use case catalog listings, search results

Stats Card

card

Metric display card with large number, label, and optional trend indicator

142

Use Cases

+12%

Tokens: colors.brand.surfaceCard colors.brand.primary typography.families.title

Variants: default highlighted compact

CSS Classes: .stats-card .stat-value .stat-label .stat-trend

HTML

<div class="stats-card">
  <div class="stat-value">142</div>
  <div class="stat-label">Use Cases</div>
  <div class="stat-trend positive">+12%</div>
</div>

Usage: Dashboard metrics, catalog statistics

Search & Filters

layout

Search input with filter pills for categories and priority levels

Tokens: colors.brand.surfaceCard colors.brand.primary borders.radius.full

Variants: default compact

CSS Classes: .search-input .filter-pills .pill .pill-active

HTML

<div class="toolbar">
  <input class="search-input" placeholder="Search use cases...">
  <div class="filter-pills">
    <button class="pill active">All</button>
    <button class="pill">Proven</button>
    <button class="pill">Emerging</button>
  </div>
</div>

Usage: Top of catalog pages for filtering content

Priority Badge

indicator

Color-coded badge for use case priority levels

Low Medium High

Tokens: colors.semantic

Variants: low medium high proven emerging

CSS Classes: .badge .badge-low .badge-medium .badge-high .badge-proven .badge-emerging

HTML

<span class="badge badge-low">Low</span>
<span class="badge badge-medium">Medium</span>
<span class="badge badge-high">High</span>

Usage: Priority indicators on use case cards and tables

Detail Section

layout

Content section with heading, description, and optional sidebar

Section Title

Detailed description of this section.

Content goes here

Tokens: colors.brand.surfaceDark typography.families.title spacing.scale

Variants: default with-sidebar

CSS Classes: .section .section-heading .section-subheading .section-content

HTML

<section class="section">
  <h2 class="section-heading">Section Title</h2>
  <p class="section-subheading">Detailed description of this section.</p>
  <div class="section-content">
    Content goes here
  </div>
</section>

Usage: Use case detail pages, category overviews

Data Table

data

Styled table with dark header, hover rows, and status indicators

Use Case	Priority	Status
Invoice Processing	High	Proven
Report Generation	Medium	Emerging

Tokens: colors.brand.surfaceCard colors.neutral.deepSlate borders.radius.lg

Variants: default compact sortable

CSS Classes: .data-table .table-header .table-row .table-cell

HTML

<table class="data-table">
  <thead>
    <tr><th>Use Case</th><th>Priority</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Invoice Processing</td><td><span class="badge badge-high">High</span></td><td>Proven</td></tr>
    <tr><td>Report Generation</td><td><span class="badge badge-medium">Medium</span></td><td>Emerging</td></tr>
  </tbody>
</table>

Usage: Use case comparison tables, catalog views

Impact Chart

data

Horizontal bar chart showing business impact by category

Cost Savings

85%

Tokens: colors.brand.primary colors.brand.secondaryBlue colors.neutral.slateLight

Variants: default stacked

CSS Classes: .impact-chart .impact-bar .impact-label .impact-value

HTML

<div class="impact-chart">
  <div class="impact-row">
    <span class="impact-label">Cost Savings</span>
    <div class="impact-bar-track">
      <div class="impact-bar" style="width: 85%"></div>
    </div>
    <span class="impact-value">85%</span>
  </div>
</div>

Usage: Business impact visualization, ROI summaries

CTA Banner

card

Call-to-action banner with gradient border and primary button

Tokens: gradients.border colors.brand.primary colors.brand.surfaceCard

Variants: default compact

CSS Classes: .cta-banner .gradient-border .btn-primary

HTML

<div class="cta-banner">
  <h3>Ready to transform your business?</h3>
  <p>Explore our catalog of proven GenAI use cases.</p>
  <button class="btn-primary">Get Started</button>
</div>

Usage: Section footers, promotional blocks

Category Pill

indicator

Rounded pill for categorizing use cases by domain or maturity

Proven Emerging Industry

Tokens: colors.brand.primary colors.brand.primaryGlow borders.radius.full

Variants: proven emerging industry

CSS Classes: .category-pill .pill-industry .pill-proven .pill-emerging

HTML

<span class="category-pill pill-proven">Proven</span>
<span class="category-pill pill-emerging">Emerging</span>
<span class="category-pill pill-industry">Industry</span>

Usage: Category labels on use case cards and filters