Honcho

Overview

Honcho is an AI-Native Memory platform that transforms how stateful agents learn and reason over time. The design system embraces **Computational Minimalism**—a philosophy that treats the interface as a transparent window into algorithmic processes rather than a decorative layer. The aesthetic is deliberately austere: deep charcoal (#1a1a1a) backgrounds, monospace typography (departureMono), and surgical use of accent colors (sky blue #b4d9fd, coral #f87683, amber #ffab70) that signal data states and interactive affordances. The emotional response is one of precision and control—users feel they are operating a finely-tuned system, not a consumer product. The brand personality is technical but not cold: direct, unadorned, and respectful of the user's intelligence. Voice: terse, imperative, occasionally playful. Example: 'Continual learning for stateful agents. Better context. Fewer tokens.'

Colors

The color system is built on a dark-first foundation with surgical accent placement. **Surface Stack**: The base is #1a1a1a (surface), with container variants ranging from #141414 (lowest) to #333333 (highest) to create subtle depth without visual noise. Text is #e3e3e3 (on-surface), a warm off-white that reduces eye strain on dark backgrounds. **Primary Accent** (#b4d9fd, a cool sky blue) is reserved exclusively for interactive elements—buttons, links, focus states, and data highlights. It appears in the hero CTA and throughout the UI as the signal for 'actionable.' **Secondary** (#f87683, coral) and **Tertiary** (#ffab70, amber) are used sparingly for status indicators, warnings, and secondary data series in charts. Outlines use rgba(255, 255, 255, 0.2) for borders and rgba(255, 255, 255

Typography

The type system is monospace-first, using departureMono as the primary family with ui-monospace and SFMono as fallbacks. This choice reinforces the computational identity: every character is equally weighted, creating a grid-like visual rhythm that mirrors code and data structures. **Display** (60px, 700 weight, -0.04em tracking) is used for hero headlines like 'MEMORY THAT REASONS'—the tight negative letter-spacing creates visual compression and urgency. **Headline-lg** (48px, 700 weight) for section titles. **Body-md** (16px, 400 weight) for body copy and UI labels. **Label-sm** (12px, 500 weight) for badges, tags, and small UI text. All sizes maintain a 1.5x line-height ratio (e.g., 48px headline gets 56px line-height) to ensure readability in the dark theme. Apply text-shadow: 0 2px 4p

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered on the viewport. Spacing uses an 8px unit system: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major content blocks, md (24px) for component groups, and sm (12px) for internal component padding. The hero section uses a full-bleed background with a grid overlay (visible in the screenshot as subtle 4px squares), creating a sense of infinite computational space. Cards and containers use md padding (24px) with a 1px border at rgba(255, 255, 255, 0.08) to define edges without visual heaviness. White-space is aggressive: the page breathes, with generous gutters around text and interactive elements. This prevents cognitive overload and emphasizes the precision of

Elevation & Depth

Depth is conveyed through layered shadows and border treatments rather than color shifts. **Level 1 (Base)**: No shadow; flat surface at #1a1a1a. **Level 2 (Cards/Modals)**: box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08). This creates a soft halo effect that lifts the card off the background while maintaining the dark aesthetic. **Level 3 (Dropdowns/Tooltips)**: box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1). The dual-shadow technique (near + far) creates a sense of floating without appearing disconnected. Hover states increase shadow in

Shapes

The shape philosophy is **Architectural Sharpness**—minimal rounding that respects the grid and computational nature of the product. **Buttons** use 6px border-radius (rounded.md), a subtle curve that softens the hard edge without appearing organic. **Cards** use 4px (rounded.DEFAULT) for a more technical feel. **Inputs** use 4px as well, maintaining consistency with data containers. **Badges and pills** use 9999px (rounded.full) only when semantically necessary (e.g., status badges). The rationale: sharp corners evoke precision and code; excessive rounding would undermine the technical brand.

Components

Action Elements **Button-Primary** uses #b4d9fd background with #1a1a1a text, 12px 24px padding, 44px height, 6px border-radius. On hover, shift to primary-fixed-dim (#7fb5f0) with a 0.15s ease transition. Apply a 1px transparent border in the default state to maintain layout stability. **Button-Secondary** has a transparent background with a 1px border at rgba(255, 255, 255, 0.2), text color on-surface (#e3e3e3). On hover, add rgba(255, 255, 255, 0.08) background and brighten border to rgba(255, 255, 255, 0.3). **Button-Ghost** (used for secondary CTAs like 'DOCS') uses rgba(180, 217, 254, 0.15) background with on-surface text. Hover to rgba(180, 217, 254, 0.25). All buttons use label-md typography (14px, 600 weight) and transition all properties in 0.15s ease.

Containers & Surfa

Do's and Don'ts

**Do**

• Do use departureMono exclusively for all typography—it reinforces the computational identity and ensures visual consistency across all screen sizes.
• Do reserve the primary accent (#b4d9fd) for interactive elements only: buttons, links, focus states, and data highlights. Never use it for passive text or backgrounds.
• Do apply the full shadow stack (0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08)) to elevated surfaces to maintain depth hierarchy without visual noise.
• Do maintain 40px (lg spacing) between major content sections and 24px (md spacing) between component groups to create breathing room and reduce cognitive load.
• Do use 6px border-radius for buttons and 4px for cards to maintain the architectural sharpness philosophy—avoid excessive rounding that would soften the technical aesthetic.

**Don't**

• Don't mix typefaces or use sans-serif fonts; departureMono is the only approved family. System fonts and variable fonts dilute the computational brand identity.
• Don't apply color to passive elements like backgrounds or body text; reserve accent colors (#b4d9fd, #f87683, #ffab70) for interactive and status-driven UI only.
• Don't use gradients, blur effects, or glassmorphism; the design system is flat and shadow-based. Depth comes from layered shadows and border treatments, not visual effects.
• Don't reduce padding or spacing below the sm (12px) unit to fit content; instead, reconsider the content hierarchy. Aggressive white-space is a core brand principle.
• Don't apply hover effects to non-interactive elements or use color changes without accompanying shadow or border shifts; all state changes must be multi-dimensional to maintain visual clarity.