Skip to main content

Design System Reference

KnowB AI Brandbook

Canonical reference for the KnowB Autumn palette, typography, component patterns, gradients, and accessibility requirements.

KnowB Autumn WCAG 2.2 AA Arcade Front End Mission Control Layer

Player Side

90s arcade pacing, clear interaction cues, readable at speed.

System Side

Portal-like command surfaces for memory and orchestration.

Low Carbon

Static delivery, restrained motion, reduced compute overhead.

01 — Origin

Mission & Manifesto

KnowB AI solves the data management and knowledge fragmentation problem at its root. In the AI era, output quality is tied directly to input clarity. Isolated silos and rigid access hierarchies are no longer acceptable.

We build intelligent knowledge infrastructures that bundle durable storage with intelligent agents and operators, managing context, state, and evolution over time.

In a world of chaotic context, KnowB AI builds knowledge systems that think.

We specialize in

  • Architecting Knowledge Bases that scale across people, roles, and machines
  • Developing autonomous Knowledge Agents that understand and maintain knowledge spaces
  • Building middleware tooling for memory continuity, context transfer, and model interoperability

Key Tenets

Local-First, Globally Aware

Your knowledge lives where you are and follows where you go. Start local; enable global memory sync through context-aware agents.

Fork, Switch, Clone

Context is not static. Switch models, fork conversations, and clone threads with full memory-state preservation.

Memory is Portable

Knowledge continuity is the default, not the exception. Across machines, models, and modalities, working memory must never be lost.

02 — Glossary

Core Concepts

Knowledge Base

A structured, queryable store of contextually rich, durable knowledge. Built for interoperability with AI models, human teams, and agents.

Knowledge Agent

An intelligent system that performs actions, answers questions, manages memory, and evolves the Knowledge Base in real time.

Operators

Lightweight rule-driven tools that handle tagging, summarizing, syncing, or enforcing hygiene and structure in Knowledge Bases.

Context

Everything surrounding a task, thread, or decision: tone, intention, dependencies, entities, and prior steps. Context is both local and portable.

Memory

The accumulated state of what was said, done, asked, answered, linked, or concluded. Memory must be stored, scoped, and revived when needed.

Knowledge OS

A modular stack that lets KBs, Agents, and Operators function together with synchronization, switching, versioning, and recall features.

03 — Colour System

KnowB Autumn Palette

Eight canonical tokens only. Opacity variants are permitted; new hues are not. Saber Blue is the sole approved cool accent.

#FF4A1A Autumn Fire Accent & display highlight --autumn-fire
#8E2F2A Deep Rust Primary high-contrast control --deep-rust
#F59A52 Soft Ember Warm highlight & focus --soft-ember
#FCF6F3 Paper Ivory Primary light surface --paper-ivory
#86E8FF Saber Blue Signal accent — only cool hue --saber-blue
#1D1514 Charcoal Bark Primary dark surface --charcoal-bark
#867268 Muted Wood Secondary text & metadata --muted-wood
#E9C2B3 Terracotta Border Separators & borders --terracotta-border

Approved Contrast Pairings

All meet WCAG 2.2 AA: ≥4.5:1 normal text, ≥3:1 large text.

Charcoal on Ivory

Body text, light surfaces

Ivory on Deep Rust

High contrast dark

Saber on Charcoal

Signal on dark surface

Charcoal on Ember

Warm highlight pairing

Prohibited for Normal Body Text

✗ body

Fire on Ivory

✗ body

Ivory on Fire

✗ body

Saber on Ivory

Exception: Autumn Fire is allowed for large display text (≥24px regular or ≥18.66px bold) where the 3:1 large-text threshold is met.

04 — Gradients

Canonical Gradients

These formulas are exact. No deviation allowed. Use them as-is or with opacity.

Dark / Depth

linear-gradient(135deg, #FF4A1A 0%, #8E2F2A 100%)
linear-gradient(180deg, #8E2F2A 0%, #7A2217 100%)

Warm Accent

linear-gradient(145deg, #F59A52 0%, #FF4A1A 100%)
linear-gradient(135deg, rgba(255,74,26,0.88) 0%, rgba(245,154,82,0.58) 34%, rgba(142,47,42,0.84) 100%)

Light / Neutral

linear-gradient(135deg, #FCF6F3 0%, #F59A52 100%)
linear-gradient(90deg, #FCF6F3 0%, #8E2F2A 6%, #FCF6F3 100%)

Signature

linear-gradient(135deg, #FF4A1A 0%, #8E2F2A 40%, #7A2217 100%)
linear-gradient(120deg, #FCF6F3 0%, #F59A52 30%, #8E2F2A 70%, #E9C2B3 100%)

Signal Accent — Saber-enabled

linear-gradient(132deg, #FF4A1A 0%, #8E2F2A 34%, #7A2217 72%, #86E8FF 100%)
linear-gradient(90deg, #FCF6F3 0%, #8E2F2A 8%, #86E8FF 16%, #FCF6F3 100%)

05 — Typography

Type System

Five font roles. Each has a defined purpose and must not be used outside it.

RoleFontWeightUse
Wordmark / IdentityAudiowideDisplayLogo, product name, brand hero
Display / HeadingsSpace Grotesk500 / 700H1–H4, section titles, card headings
Body CopyInter400 / 600Paragraphs, lists, supporting copy
Arcade UI LabelsPress Start 2P400Chips, section kickers, button labels, nav
Code / TechnicalJetBrains Mono400 / 500Inline code, CSS values, hex tokens
Audiowide — wordmark & identity

KNOWB AI

Knowledge Systems

knowb.run

Space Grotesk — display & section headings

H1 — Page Title (5xl, 700)

H2 — Section (4xl, 600)

H3 — Card Heading (3xl, 600)

H4 — Label (2xl, 500)

Inter — body copy & supporting text

Large body (text-xl): KnowB AI builds context-aware systems with durable memory, stable state transitions, and governance-first operation.

Body (text-base): We specialize in architecting knowledge bases that scale across people, roles, and machines, developing autonomous agents that maintain context over time.

Small / metadata (text-sm): Secondary details, timestamps, source labels, and supporting metadata.

Press Start 2P — arcade UI labels & chips

Arcade Front End

Mission Control Layer

Low Carbon Mode — Static Surface

JetBrains Mono — code & technical snippets 
const knowB = 'knowledge continuity';
--autumn-fire: #FF4A1A;  /* Accent highlight */
linear-gradient(132deg, #FF4A1A 0%, #8E2F2A 34%, #1D1514 72%, #86E8FF 100%)

06 — Components

UI Component Library

Live examples of every pattern used across the KnowB interface surface.

Section Kickers + Rules

Label each section with Press Start 2P, uppercase. Two accent variants: ember and saber. Always follow with a section-rule line.

Saber Kicker

.section-kicker.section-kicker-saber + .section-rule

Ember Kicker

.section-kicker.section-kicker-ember + .section-rule-ember

Arcade Chips

Saber (default) and Ember (.ember / even-child) variants. Used for tagging, profiling, and feature labels.

Saber Chip Ember Chip Static-first Surface Reduced Motion WCAG 2.2 AA Low Carbon Mode
.arcade-chip .arcade-chip.ember

Arcade Buttons

Saber (primary) and Ember (.alt) variants. Both carry hover lift, active reset, and focus-visible outline states.

.arcade-button .arcade-button.alt disabled attr + opacity:0.38

Signal Cards

Three-column grid for hero profiles, feature summaries, and at-a-glance metrics. Ember and saber theme variants.

Power Profile

Lean visual primitives, no heavy runtime animations, and clear hierarchy for fast scan speed.

Memory Profile

State and context are treated as product layers, not hidden behavior.

Operator Profile

Arcade cues for users, mission-control semantics for teams and agents.

.signal-card.card-theme-ember .signal-card.card-theme-saber

Arcade Cards — Bottleneck Style

Left-border accent + full-card inner glow. Used for deep content blocks with structured lists.

Saber Variant

  • Left border: border-l-2 border-saber-blue
  • Inner glow: rgba(134,232,255,0.16)
  • Heading: text-saber-blue with soft shadow

Ember Variant

  • Left border: border-l-2 border-soft-ember
  • Inner glow: rgba(245,154,82,0.18)
  • Heading: text-soft-ember with warm shadow
bg-charcoal-bark/55 border-l-2 border-saber-blue .arcade-card .card-theme-saber

Use Case Cards — Top Stripe

A 2px saber-to-fire gradient stripe crowns each card. Hover amplifies the card border glow.

RFP Label

Ember Use Case

Hover this card to see the ember border glow animate in. The 2px saber-to-fire stripe sits at top.

Outcome text and source note goes here.

RFP Label

Saber Use Case

Hover this card to see the saber border glow animate in. Both cards share the same top stripe.

Outcome text and source note goes here.

.use-case-card .arcade-card .card-theme-ember

Contact Callout Frame

Gradient-border CTA frame. Ember-to-saber border with dual-spectrum glow. Used for high-priority collaboration blocks.

Collaboration Callout

Contact us to build with us

We are actively looking for partners who want to ship practical context-agent systems in controlled pilots.

Contact ping@knowb.run
.contact-callout-frame

Shadow / Glow Tokens

Four canonical definitions for depth and signal emphasis.

ember-glow

rgba(245,154,82,0.35)

fire-glow

rgba(255,74,26,0.30)

saber-glow

rgba(134,232,255,0.30)

paper-shadow

rgba(252,246,243,0.15)

07 — Accessibility

Accessibility Requirements

All pages and components must meet WCAG 2.2 AA. These rules are non-negotiable.

Contrast

  • Normal text: ≥ 4.5:1
  • Large text (≥24px reg / ≥18.66px bold): ≥ 3:1
  • UI boundaries and focus indicators: ≥ 3:1

Keyboard & Focus

  • Full keyboard accessibility for all controls
  • Visible focus-visible style on every interactive element
  • Skip-to-content link on long pages with persistent nav
  • Semantic landmarks: <main>, proper heading order

Motion

  • Respect prefers-reduced-motion on all pages
  • All transitions set to 0.01ms under reduced-motion
  • CRT jitter: ≤120ms active, ≥8s between bursts
  • All CRT motion effects disabled under reduced-motion

CRT Exception Scope

  • Chromatic split: display text only, ≥32px
  • Scanlines, vignette: hero and high-priority callouts only
  • Body text and small labels: no flicker, no chromatic split
  • Legibility degrades: remove CRT from that component first

Live Focus Demo

Tab through these elements to verify the saber-blue focus ring: outline: 2px solid #86E8FF; outline-offset: 2px

Or this link

08 — Copy & Tone

Writing Guidelines

Public-facing copy must be concrete, operational, and privacy-safe.

Rules

  • Position around capabilities, reliability, and measurable outcomes
  • No em dashes (U+2014). Use commas, semicolons, colons, or short sentences
  • Direct, scannable sentence structure
  • No internal hierarchy labels in public copy
  • Concrete and operational; prefer specifics over hype
  • Privacy-safe language for data collection or crawling features
  • Consistent product naming, capitalization, and punctuation

Do vs. Don't

Do

"We ship controlled pilots with measurable delivery milestones."

Don't

"We're revolutionizing AI with our groundbreaking platform!"

Do

"Context isn't static; it evolves."

Don't

"Context isn't static — it evolves."  (em dash)

Acceptance Checklist

☐ Requirement Section
☐ All colors from the 8-token palette (or opacity variants) §03
☐ Gradients are exact canonical formulas §04
☐ All normal text and controls meet WCAG 2.2 AA (≥4.5:1) §07
☐ Focus-visible, keyboard navigation, and reduced-motion support are present §07
☐ Skip-to-content link present on long pages §07
☐ Brand tone is warm, structured, and signal-forward §08
☐ No em dashes in copy §08