KnowB Visual Design System
Canonical reference for the Autumn and Gold palettes, three channels, six themes, five styles, fixed typography, the space-age editorial layer, the tailfin arcade layer, and accessibility requirements.
Design Model
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.
Autumn or Gold sets color family, signal hierarchy, surface depth, and contrast.
Internal, External, or Artistic sets the role and destination of the thing.
Space-race, Psychedelic, Retrowave, Editorial, Arcade, or Comic sets the world and energy.
60s, 70s, 80s, 90s, or 2000s sets the formal visual grammar and finish.
Gold + Space-race + 60s primary + 70s secondary. Space-age workspaces use launch, orbit, dock, relay, command, archive, and recovery vocabulary.
Autumn + Arcade + 80s primary + 90s secondary. Public work uses strong silhouettes, color blocking, title-card clarity, and editorial polish.
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
Channels are roles and destinations, not palettes, themes, or eras.
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.
Marketing, narrative, promotional material, public websites, publishing, product launches, and outward-facing polish. Shared grammar: arcade-informed clarity with composed editorial energy.
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
Themes guide subject matter, motifs, emotional register, and interaction attitude. They do not dictate a palette or font.
| Theme | Properties | Typical expression |
|---|---|---|
| Space-race | Optimistic, exploratory, engineered, mission-oriented, progress-driven | Orbits, trajectories, launch states, docking, modular craft, technical diagrams, purposeful progression |
| Psychedelic | Playful, fluid, surprising, surreal, pattern-led | Optical rhythm, warped geometry, repetition, unexpected scale, flowing transitions, dreamlike juxtaposition |
| Retrowave | Synthetic, signal-driven, nocturnal, cinematic, nostalgic, energetic | Horizon lines, grids, scanlines, glow bands, signal traces, CRT atmosphere, perspective, controlled gradients |
| Editorial | Authored, composed, contextual, image-led, confident, curated | Strong hierarchy, margins, captions, pull quotes, pacing, key-art composition, considered negative space |
| Arcade | Immediate, playable, competitive, bold, responsive, readable | Title cards, marquees, score and state language, color blocking, silhouettes, fast feedback, repeatable hooks |
| Comic | Expressive, sequential, dramatic, character-led, tactile, narrative | Panels, ink contours, action framing, expressive poses, ensemble hierarchy, visual sequencing, impact moments |
Styles
Styles are historical reference frames that control geometry, composition, line treatment, pacing, density, and finish. They are not literal reproductions.
| Style | Properties |
|---|---|
| 60s | Space age, optimistic modernism, atomic and aerodynamic forms, clean line art, capsule and orbit geometry, confident reduction, forward motion |
| 70s | Instrumentation, dials, gauges, radial systems, analog marks, measured density, tactile control logic, system feedback |
| 80s | Bold title cards, CRT logic, dramatic diagonals, high-impact framing, chunky display forms, hard transitions, strong first read |
| 90s | Console interfaces, arcade-fighter energy, chunky digital forms, darker contrast, industrial futurism, status-heavy layouts, assertive feedback |
| 2000s | Techno, 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.
Origin
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.
Your knowledge lives where you are and follows where you go. Start local; enable global memory sync through context-aware agents.
Context is not static. Switch models, fork conversations, and clone threads with full memory-state preservation.
Knowledge continuity is the default, not the exception. Across machines, models, and modalities, working memory must never be lost.
Glossary
A structured, queryable store of contextually rich, durable knowledge. Built for interoperability with AI models, human teams, and agents.
An intelligent system that performs actions, answers questions, manages memory, and evolves the Knowledge Base in real time.
Lightweight rule-driven tools that handle tagging, summarizing, syncing, or enforcing hygiene and structure in Knowledge Bases.
Everything surrounding a task, thread, or decision: tone, intention, dependencies, entities, and prior steps. Context is both local and portable.
The accumulated state of what was said, done, asked, answered, linked, or concluded. Memory must be stored, scoped, and revived when needed.
A modular stack that lets KBs, Agents, and Operators function together with synchronization, switching, versioning, and recall features.
Colour System
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.
The dark canvas of every public page. Depth comes from stacking these solids, never from gradient washes. Charcoal Bark stays the ink and stroke colour on light surfaces.
Gold is the high-signal technical palette for internal workspaces, command decks, control panels, cockpits, workflows, and active system state.
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
Fire on Ivory
Ivory on Fire
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.
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%)
Typography
Five font roles. Each has a defined purpose and must not be used outside it.
| Role | Font | Weight | Use |
|---|---|---|---|
| Wordmark / Identity | Audiowide | Display | Logo, product name, brand hero |
| Display / Headings | Space Grotesk | 300 / 500 | Display headlines at 300, section and card titles at 500 |
| Body Copy | Inter | 400 / 600 | Paragraphs, lists, supporting copy |
| Headings / Navigation Labels | Space Grotesk | 500 / 700 | Section kickers, chips, button labels, nav |
| Code / Technical | JetBrains Mono | 400 / 500 | Inline code, CSS values, hex tokens |
KNOWB AI
Knowledge Systems
knowb.run
Display: page title (300)
Section heading (300)
Card title (500)
Kicker label (500)
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.
Internal Channel
Static Surface
const knowB = 'knowledge continuity';
--autumn-fire: #FF4A1A; /* Accent highlight */
linear-gradient(132deg, #FF4A1A 0%, #8E2F2A 34%, #7A2217 72%, #86E8FF 100%)
Components
The page speaks in space-age editorial: calm solids, light type, wide spacing. Everything that signals, alerts or frames art switches to the tailfin arcade layer and sits behind the CRT pass.
Editorial layer
Arcade layer
One tracked word behind a small orbit, followed by a short saber line. Saber lines divide and underline; they never fill a surface.
Saber kicker
.section-kicker + .section-rule
Ember kicker
.section-kicker.section-kicker-ember + .section-rule-ember
Headlines run light at 300 with only the highlighted phrase at 500. Navigation and quiet links are tracked uppercase with a hairline.
Knowledge for the world of tomorrow
Lede copy introduces a page or section in Inter at a relaxed measure.
.display-hero.display-section.lede.nav-link.text-link
A vast planet rises between deep space and the first surface section, rimmed in saber light. One per page, under the hero.
Hover lifts the cabinet and lights the fins, pressing drops it into its shadow, focus swaps the edge for an ivory ring in the same shape.
.tf-btn.tf-btn-saber.tf-btn-fire.tf-btn-smmacros::fins()
Small tailfins with a square LED. Labels only; chips are not buttons.
.chip.chip-ember.led
Every card is a cabinet: tailfin shape, title with a phosphor glow, fin stairs, a saber seam and the CRT pass. Hover or focus inside lights the rim and fills the fins.
Default for memory, systems and reference content.
Warm variant for people, pilots and calls to action.
RFP 00
Outcome lines use terracotta.
.cabinet.cabinet-ember.cabinet-head.cabinet-title.cabinet-label.saber-line
Full-edge cabinets that carry a message. A pixel icon names the kind, the title is tracked uppercase, the action is a small tailfin.
.cabinet.alert.cabinet-ember.alert.cabinet-fire.alertmacros::pixel_icon()
Small tailfin toasts. The fin stairs count down in place of a progress bar.
.cabinet.alert.toast
One full-width cabinet at a time, with a mission path below: a saber orbit line whose stops are planets, the current one lit with a ring. Travelling narrows the cabinet shut and widens the next one open. Each cabinet shows a teaser and folds the rest of its brief into a drawer that opens smoothly. Tailfin arrows, the path, swipes, and the arrow keys all travel; there is no autoplay. Without JavaScript every cabinet is listed in full.
[data-orbit-carousel].orbit-track.orbit-slide.orbit-controls.orbit-path.orbit-stop.cabinet-more.cabinet-more-togglemacros::porthole()/js/orbit-carousel.js
Illustration sits behind a fine pixel mask and the full CRT pass, so vector art reads as a lit arcade screen.
.art-screenmacros::spaceport_art()macros::transmission_art()
A modern, lit-glass take on a CRT, built into every cabinet fill. Each layer paints behind the content, so text keeps full contrast.
| Layer | Treatment | Value |
|---|---|---|
| Phosphor light | Cyan falls in from the top left, ember warms the far corner | radial-gradient 9% saber, 8% ember |
| Scanlines | Hairline rows every 3px | 3.5% ivory |
| Glass sweep | One diagonal specular highlight | 118deg, 5% ivory |
| Vignette | Soft inner falloff toward the edges | inset 0 0 44px, 38% black |
| Split edge | CRT convergence fringe on the outline | --fringe: 1px saber left, 1px fire right |
| Hard shadow | Unblurred offset; buttons in rust, cabinets in ink | 5px rust, 6px #0D0A09 |
| Pixel mask | Art screens only | 6px grid, 55% screen |
Accessibility
All pages and components must meet WCAG 2.2 AA. These rules are non-negotiable.
<main>, proper heading orderprefers-reduced-motion on all pages0.01ms under reduced-motionTab through these elements. Tailfin buttons swap their edge for a 3px ivory ring; links get outline: 2px solid #86E8FF; outline-offset: 3px.
Copy & Tone
Public-facing copy must be concrete, operational, and privacy-safe.
| ☐ | Requirement | Section |
|---|---|---|
| ☐ | All colors from the palette tokens and space-age surfaces (or opacity variants) | Colour System |
| ☐ | Gradients are exact canonical formulas | Gradients |
| ☐ | Arcade treatment only on buttons, chips, cabinets, alerts, notifications, and art | Components |
| ☐ | CRT pass layers sit behind text, never over it | Components |
| ☐ | All normal text and controls meet WCAG 2.2 AA (≥4.5:1) | Accessibility |
| ☐ | Focus-visible, keyboard navigation, and reduced-motion support are present | Accessibility |
| ☐ | Skip-to-content link present on long pages | Accessibility |
| ☐ | Brand tone is warm, structured, and signal-forward | Copy & Tone |
| ☐ | No em dashes in copy | Copy & Tone |
Concept Book
The full art book behind this system, kept as reference. The chosen direction comes first; the two earlier explorations follow so their ideas stay available.
Plates are generated from design/concept-book/ by scripts/build_concept_book.py. They are pictures of a design, so their controls are inert. Scroll a plate sideways on small screens.
Editorial calm for the page, arcade cabinets for everything that signals. This is what the site and the components above implement.
Tailfin arcade
Googie curves on two corners, pixel steps on the other two. Everything that signals, alerts or frames art uses this shape, sits behind a CRT pass, and casts a hard shadow with a split-colour edge.
Buttons
Alerts
Notifications
Cabinet card
Knowledge tooling
Most tooling is prompt-first and session-bound.
Knowledge tooling
Most tooling is prompt-first and session-bound.
Art frame
The CRT pass
A modern, lit-glass take on a CRT: soft light falloff, fine scanlines, one specular sweep and a split-colour edge. It sits behind the words, never over them, so text keeps full contrast.
The most Jetsons of the three: pills, orbits, portholes and console knobs. The tailfin from this round became the chosen shape.
Four capsules from the World of Tomorrow, each with one arcade hook
The first round: coin-op keys, marquee outlines, pixel-stair corners and scoreboard chips on a World of Tomorrow page.
Editorial calm, arcade at the edges
World-of-Tomorrow surfaces carry the page: smooth, solid, rounded. Arcade art lives only on the parts people touch or read at a glance: buttons, chips, toasts, card headers, meters.
1 · Solid surfaces
Depth comes from stacked solids and big radii (28–44px). No gradient washes, no scanline overlays on content.
2 · Saber lines (kept)
Saber lines divide and underline. They never fill a surface, and appear at most once per component.
3 · World of Tomorrow shapes
Starburst, atom, boomerang, ringed planet. One per view, as illustration in its own solid panel, never behind text.
4 · Arcade edges
Stepped pixel corners, hard shadows with no blur, square LEDs. Never round a pixel corner; never blur an arcade shadow.
5 · Pixel icons
8×8 grid, crisp edges, two colors at most. Used in toasts, buttons and status chips; decorative unless they carry meaning.
6 · Type stays fixed
The arcade feel comes from shape and color, not a pixel font. Press Start 2P stays retired, as the design canon requires.
Scoreboard chips
Cabinet messages
Cabinet cards: marquee header, solid body, lit on hover
Knowledge Tooling
Knowledge Tooling
RFP Projects