Knowledge Base Design System

The Challenge

Plain articles weren't working

The default KnowledgeOwl theme rendered all article content as uniform paragraphs. During live customer interactions, agents had to read full articles to locate a single policy detail - slowing handle time and increasing errors.

The Approach

A modular component library

Designed and built a complete CSS component system injected via KnowledgeOwl's custom CSS field. Components are written as reusable HTML snippets that any article author can insert - no coding knowledge required.

The Outcome

Faster, more consistent lookups

Articles became immediately scannable. Color-coded alerts, structured steps, and collapsible sections let agents locate the exact information they need in seconds - during active calls, without reading full articles.

700+

Lines of CSS written

15+

Reusable components

Zero

Dependencies or frameworks

Live

In production today

Interactive Showcase

See the System in Action

Browse the complete rendered article, or explore individual components alongside the HTML that produces them.

Secure support.apexpro.io/knowledge-base/subscription-tiers-access

Scrollable article preview with fictional content demonstrating the component system in context

<!-- Standard header -->
<div class="kb-sec kb-swipe--peach">
  <div class="kb-sec__label">
    <i class="fa-regular fa-tag"></i>
    Plans & Pricing
  </div>
  <div class="kb-sec__title">
    What We Sell
  </div>
</div>

<!-- Available swipe colors -->
<!-- kb-swipe--peach    (warm amber) -->
<!-- kb-swipe--blue     (cobalt)     -->
<!-- kb-swipe--mint     (green)      -->
<!-- kb-swipe--lavender (purple)     -->
<!-- kb-swipe--gray     (neutral)    -->

Live render

Plans & Pricing

What We Sell

Website & Access

Key URLs & Login

Refund Policy

By Product

Escalation

Who to Contact

<!-- Tip / best-practice -->
<div class="tip-card">
  <span class="tip-label">
    <i class="fa-solid fa-lightbulb"></i>
  </span>
  <strong>Pro tip</strong> - Content here.
</div>

<!-- Alert / warning -->
<div class="alert-card">
  <span class="alert-label">
    <i class="fa-solid fa-triangle-exclamation"></i>
  </span>
  <strong>Warning</strong> - Content here.
</div>

<!-- Info / informational -->
<div class="info-card">
  <span class="info-label">
    <i class="fa-solid fa-circle-info"></i>
  </span>
  <strong>Note</strong> - Content here.
</div>

<!-- Did you know -->
<div class="dyk-card">
  <span class="dyk-label">
    <i class="fa-solid fa-circle-question"></i>
  </span>
  <strong>Did you know?</strong> - Content here.
</div>

Live render

Pro tip - Verify pricing against the customer's order confirmation before quoting.

Escalate immediately - Do not process this refund independently.

Note - Recordings are provided case-by-case; do not guarantee access.

Common confusion - Two separate $99 charges can appear on the same order.

<!-- Auto-numbered step list.
     CSS handles all counter logic -
     authors just write <li> items. -->

<ol class="kb-steps">
  <li>
    Navigate to <code>app.apexpro.io/admin</code>
    and enter the admin key.
  </li>
  <li>
    Enter the customer's email address
    as it appears on their order.
  </li>
  <li>
    Select the correct tier and
    any applicable add-ons.
  </li>
  <li>
    Generate and send the link.
    Valid for <strong>6 hours</strong>.
  </li>
</ol>

<!-- CSS does all the styling.
     No classes needed on <li>. -->

Live render

Navigate to app.apexpro.io/admin and enter the admin key.
Enter the customer's email address as it appears on their order.
Select the correct tier and any applicable add-ons.
Generate and send the link. Valid for 6 hours.

<!-- Add kb-table--striped for
     zebra-stripe rows. -->

<table class="kb-table kb-table--striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Policy</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>Standard</strong></td>
      <td>30-day full refund</td>
      <td>Original payment method.</td>
    </tr>
    <tr>
      <td><strong>Professional</strong></td>
      <td>30-day full refund</td>
      <td>Original payment method.</td>
    </tr>
    <tr>
      <td><strong>Members</strong></td>
      <td>TBD - escalate</td>
      <td>Try retention first.</td>
    </tr>
  </tbody>
</table>

Live render

Product	Policy	Notes
Standard	30-day full refund	Original payment method.
Professional	30-day full refund	Original payment method.
Members	TBD - escalate	Try retention first.

<div class="kb-tier-compare">

  <!-- Column headers -->
  <div class="kb-tier-compare__head">
    <div class="kb-tier-compare__head-blank"></div>
    <div class="kb-tier-compare__head-tier
          kb-tier-compare__head-tier--silver">
      <div class="kb-tier-compare__tier-name
            kb-tier-compare__tier-name--silver">
        Standard
      </div>
    </div>
    <div class="kb-tier-compare__head-tier
          kb-tier-compare__head-tier--gold">
      <div class="kb-tier-compare__tier-name
            kb-tier-compare__tier-name--gold">
        Professional
      </div>
    </div>
  </div>

  <!-- Section label -->
  <span class="kb-tier-compare__section">
    Core features
  </span>

  <!-- Data row -->
  <div class="kb-tier-compare__row">
    <div class="kb-tier-compare__feature">
      API access
    </div>
    <div class="kb-tier-compare__cell
          kb-tier-compare__cell--no">&mdash;</div>
    <div class="kb-tier-compare__cell
          kb-tier-compare__cell--yes">
      <i class="fa-solid fa-check"></i>
    </div>
  </div>

</div>

Live render

Feature

Standard

$39-$99

Professional

$99-$249

Core features

Template library

API access & webhooks

—

White-label reports

—

SLA guarantee (99.9%)

—

Process

How It Was Built

AUD

Audit & Pain-Pointing

Reviewed existing articles with operations team members during live call simulations. Identified friction points: buried alerts, no visual hierarchy, no way to distinguish warnings from tips, inconsistent formatting across authors.

UX

Component Design

Sketched a component vocabulary based on agent information needs: procedural steps, caution flags, quick-reference tables, and tier comparisons. Designed for fast visual scanning, not linear reading.

CSS

CSS Implementation

Built entirely in native CSS - no preprocessors, no frameworks. Injected via KnowledgeOwl's custom CSS field. Used CSS custom properties for consistent theming and easy color overrides by article authors.

DOC

Author Documentation

Wrote an internal style guide and HTML snippet library that lets non-technical content authors insert any component by copying a short code block - no CSS knowledge required to use the system.

Technology

Tech Stack

CSS3 Custom Properties

Semantic HTML5

KnowledgeOwl

Font Awesome 6

Google Fonts (Poppins)

CSS Grid & Flexbox

CSS Animations

No build step - pure CSS

Plain articles weren't working

A modular component library

Faster, more consistent lookups

See the System in Action

How It Was Built

Audit & Pain-Pointing

Component Design

CSS Implementation

Author Documentation

Tech Stack

See More Projects