Skip to main content

KnowB Visual Design System

KnowB AI Design System

Canonical reference for the Autumn and Gold palettes, three channels, six themes, five styles, fixed typography, component patterns, and accessibility requirements.

Autumn + Gold Internal / External / Artistic WCAG 2.2 AA Fixed Type System

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.

Design Model

Four independent axes

Every KnowB page, asset, product surface, or brand expression can be specified as channel + palette + theme + style + product vocabulary. The axes compose without forcing every product into the same look.

Palette

Autumn or Gold sets color family, signal hierarchy, surface depth, and contrast.

Channel

Internal, External, or Artistic sets the role and destination of the thing.

Theme

Space-race, Psychedelic, Retrowave, Editorial, Arcade, or Comic sets the world and energy.

Style

60s, 70s, 80s, 90s, or 2000s sets the formal visual grammar and finish.

Internal default

Gold + Space-race + 60s primary + 70s secondary. Space-age workspaces use launch, orbit, dock, relay, command, archive, and recovery vocabulary.

External default

Autumn + Arcade + 80s primary + 90s secondary. Public work uses strong silhouettes, color blocking, title-card clarity, and editorial polish.

Artistic default

Autumn or Gold + Comic or Arcade + 90s primary + 2000s secondary. Characters, avatars, mascots, posters, and illustrations remain palette-independent assets.

Typography is fixed brand infrastructure. Rendering treatments such as pixel-art, line-art, inked-comic, graphic-poster, synth-grid, vector, or 3d are optional finish notes, not additional axes.

Channels

Where the design is used

Channels are roles and destinations, not palettes, themes, or eras.

Internal

Product interfaces, workspaces, hubs, control panels, command decks, cockpits, run views, instrumentation, system maps, and operational references. Shared grammar: internal-facing space age with product-owned vocabulary.

External

Marketing, narrative, promotional material, public websites, publishing, product launches, and outward-facing polish. Shared grammar: arcade-informed clarity with composed editorial energy.

Artistic

Characters, avatars, mascot art, posters, editorial scenes, and other authored visual assets. Artistic construction is independent of palette and can appear inside either destination channel.

Themes

World and energy

Themes guide subject matter, motifs, emotional register, and interaction attitude. They do not dictate a palette or font.

ThemePropertiesTypical expression
Space-raceOptimistic, exploratory, engineered, mission-oriented, progress-drivenOrbits, trajectories, launch states, docking, modular craft, technical diagrams, purposeful progression
PsychedelicPlayful, fluid, surprising, surreal, pattern-ledOptical rhythm, warped geometry, repetition, unexpected scale, flowing transitions, dreamlike juxtaposition
RetrowaveSynthetic, signal-driven, nocturnal, cinematic, nostalgic, energeticHorizon lines, grids, scanlines, glow bands, signal traces, CRT atmosphere, perspective, controlled gradients
EditorialAuthored, composed, contextual, image-led, confident, curatedStrong hierarchy, margins, captions, pull quotes, pacing, key-art composition, considered negative space
ArcadeImmediate, playable, competitive, bold, responsive, readableTitle cards, marquees, score and state language, color blocking, silhouettes, fast feedback, repeatable hooks
ComicExpressive, sequential, dramatic, character-led, tactile, narrativePanels, ink contours, action framing, expressive poses, ensemble hierarchy, visual sequencing, impact moments

Styles

Formal visual grammar

Styles are historical reference frames that control geometry, composition, line treatment, pacing, density, and finish. They are not literal reproductions.

StyleProperties
60sSpace age, optimistic modernism, atomic and aerodynamic forms, clean line art, capsule and orbit geometry, confident reduction, forward motion
70sInstrumentation, dials, gauges, radial systems, analog marks, measured density, tactile control logic, system feedback
80sBold title cards, CRT logic, dramatic diagonals, high-impact framing, chunky display forms, hard transitions, strong first read
90sConsole interfaces, arcade-fighter energy, chunky digital forms, darker contrast, industrial futurism, status-heavy layouts, assertive feedback
2000sTechno, controlled comic pop art, polished gradients, compact digital ornament, sleek interfaces, signal gloss, restrained retro-futurism

Theme is the world. Style is the method. For example, Space-race + 70s means orbital operations expressed through dials and radial systems. Arcade + 80s means public clarity expressed through title cards and dramatic diagonals.

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 Palette Families

Autumn and Gold are independent palette options. Choose one primary family per surface, use opacity variants when needed, and never introduce an unapproved hue. Saber Blue is the optional shared cool signal.

KnowB Autumn

#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
#7A2217 Charcoal Bark Primary dark surface --charcoal-bark
#77584F Muted Wood Secondary text & metadata --muted-wood
#E9C2B3 Terracotta Border Separators & borders --terracotta-border

KnowB Gold

Gold is the high-signal technical palette for internal workspaces, command decks, control panels, cockpits, workflows, and active system state.

#FFD500 Gold Primary Primary action & active state --gold-primary
#FFB300 Gold Attention Pending & elevated emphasis --gold-attention
#F7C700 Gold Secondary Supporting highlight --gold-secondary
#FFC61A Gold Highlight Selected detail & cue --gold-highlight
#F2C14E Gold Muted Inactive & historical signal --gold-muted
#15163D Gold Midnight Default dark field --gold-midnight
#1E2259 Gold Indigo Workspace surface --gold-indigo
#2D1F5B Gold Purple Raised panel & controls --gold-purple
#221338 Gold Plum Deep cockpit & modal layer --gold-plum

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%)

Gold Command Gradients

linear-gradient(135deg, #1E2259 0%, #15163D 100%)
linear-gradient(180deg, #2D1F5B 0%, #221338 100%)
linear-gradient(135deg, #FFD500 0%, #FFB300 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
Headings / Navigation LabelsSpace Grotesk500 / 700Section kickers, chips, 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.

Space Grotesk: interface labels & chips

External Channel

Internal Channel

Static Surface

JetBrains Mono: code & technical snippets 
const knowB = 'knowledge continuity';
--autumn-fire: #FF4A1A;  /* Accent highlight */
linear-gradient(132deg, #FF4A1A 0%, #8E2F2A 34%, #7A2217 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 Space Grotesk, uppercase, and increased tracking. Two accent variants, ember and saber, pair 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 signal summaries, feature notes, and at-a-glance metrics. Ember and saber variants.

Power Signal

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

Memory Signal

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

Operator Signal

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."  (too fragmented)

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