TrueMemory

Overview

TrueMemory is a technical memory architecture for AI agents, designed with a philosophy of computational clarity and minimalist precision. The brand serves developers and AI engineers who demand zero-cloud, single-file simplicity without sacrificing sophistication. The aesthetic movement is 'Retro-Technical Minimalism'—a fusion of 1980s computing aesthetics (pixel art, monospace typography, grid overlays) with contemporary clean-design principles. The UI evokes a sense of control, transparency, and technical mastery: every element is intentional, every interaction is predictable, and the visual language never obscures the underlying architecture.

The brand voice is direct, precise, and unapologetically technical. Vocabulary favors concrete nouns (SQLite, layers, accuracy) over marketing abstractions. Tone is confident but never breathless—the product speaks through data and capability, not hype. Example sentence in brand voice: 'Six layers. One SQLite file. 93.0% LoCoMo accuracy. No cloud. No compromise.'

Colors

The color system is built on a high-contrast, minimal palette anchored by a clean white canvas (#ffffff) and a vibrant electric blue accent (#3b82f6). Primary (#3b82f6) is the signature accent used exclusively for interactive elements (buttons, links, focus states, badges) and the pervasive grid overlay. It appears at 8% opacity in backgrounds (rgba(59,130,246,0.08)) and 13% opacity in button fills (rgba(59,130,246,0.13)), creating a subtle but unmistakable visual hierarchy. The surface stack ranges from pure white (#ffffff) to a cool slate gray (#cbd5e1) for borders, with intermediate steps at #f8fafc, #f1f5f9, and #e8eef5 for container differentiation. On-surface text uses #0f172a (near-black) for primary content and rgba(15,23,42,0.65) for secondary text, ensuring legibility without har

Typography

The type system employs a three-family strategy: Space Grotesk (sans-serif, display and headlines), IBM Plex Mono (monospace, UI labels and code), and Inter (body text and prose). Display (72px, 800 weight, -0.035em letter-spacing) and Headline-lg (44px, 800 weight) use Space Grotesk's geometric boldness to command attention; Headline-md (28px, 800 weight) scales down for section titles while maintaining visual weight. Body text uses Inter at 16–18px with 1.5–1.75 line-height for comfortable reading. All UI labels, navigation, and interactive text use IBM Plex Mono at 11–12px with 0.1–0.12em letter-spacing, reinforcing the technical aesthetic. Monospace is applied with uppercase text-transform and tight tracking (0.1em–0.2em) to create a 'command-line' visual metaphor. Code blocks use IBM

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px and a persistent 48px × 48px grid overlay (opacity: 1, rgba(59,130,246,0.07)) that spans the entire viewport. This grid is non-interactive (pointer-events: none) and serves as a visual rhythm reference. Horizontal padding is consistently 48px at desktop, creating a 1344px content width. Sections use 120px vertical padding (top and bottom) to establish breathing room between major content blocks. The hero section spans full viewport height (min-height: 100vh) with a two-column grid layout (1fr 1fr) for desktop, collapsing to single-column on mobile. Spacing follows a semantic scale: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Gap between major sections is lg (40px) for internal rhythm and xl (64px) fo

Elevation & Depth

Depth in this system is achieved through a combination of subtle shadows, border treatments, and background color shifts rather than dramatic drop shadows. Level 1 (Base): The white canvas (#ffffff) with the persistent grid overlay (rgba(59,130,246,0.07) at 48px intervals) and a fixed film-grain texture (opacity: 0.04, SVG fractal noise) creates the foundational layer. Level 2 (Cards & Containers): Cards use a 0.5px solid border in {colors.outline} (#e2e8f0) and a subtle 8px × 8px micro-grid background pattern (rgba(59,130,246,0.03) or rgba(59,130,246,0.04) depending on context). Hover state s

Shapes

The shape philosophy is 'Sharp-Technical Minimalism': all primary elements use 0px border-radius (sharp corners), reinforcing the computational, grid-based aesthetic. This sharp approach is interrupted only by functional necessity: badge elements use border-radius: 50% (full circles) for visual distinctiveness, and the pixel-art grid cells use 1px border-radius for subtle softening. The nav-tag uses 3px border-radius for a slightly rounded appearance that bridges sharp and soft. Input fields and code blocks maintain 0px radius, aligning with the technical aesthetic. Buttons use 0px border-radi

Components

Action Elements Buttons are the primary interactive component and use a consistent 44px height with 14px vertical and 28px horizontal padding. Primary buttons (button-primary) use rgba(59,130,246,0.13) background with a 0.5px border in rgba(59,130,246,0.18), text color {colors.primary} (#3b82f6), and an 8px × 8px micro-grid background pattern. On hover, background shifts to rgba(59,130,246,0.20) and border to rgba(59,130,246,0.30) with a 0.15s transition. Active state uses rgba(59,130,246,0.25). Secondary buttons (button-secondary) use rgba(59,130,246,0.04) background with a 0.5px border in rgba(59,130,246,0.12) and text color {colors.on-surface-variant}. Hover state shifts to rgba(59,130,246,0.08) with border rgba(59,130,246,0.20). All buttons use IBM Plex Mono at 12px, 600 weight, 0.

Do's and Don'ts

**Do**

• Do use the 48px grid overlay as a visual rhythm reference—it should remain visible and reinforce the computational aesthetic.
• Do apply the 8px × 8px micro-grid background pattern to all interactive elements (buttons, inputs, cards) to create visual cohesion.
• Do maintain sharp 0px border-radius on all primary elements except badges (50%) and the glow background (50%).
• Do use IBM Plex Mono with 0.1–0.2em letter-spacing and uppercase text-transform for all UI labels and navigation.
• Do apply 0.15s transitions to all interactive state changes (hover, focus, active) using cubic-bezier timing.
• Do use the primary accent (#3b82f6) exclusively for interactive elements and the grid overlay—never for body text or backgrounds.
• Do maintain consistent 44px button height with 14px × 28px padding across all button variants.
• Do use the reveal animation (opacity 0.8s + transform 0.8s) with staggered delays for scroll-triggered content.

**Don't**

• Don't use rounded corners (border-radius > 0) on buttons, inputs, or cards—maintain sharp 0px radius to preserve the technical aesthetic.
• Don't apply heavy shadows (box-shadow > 0 16px 40px)—use subtle borders and background shifts instead.
• Don't mix font families within a single UI element—use Space Grotesk for headlines, IBM Plex Mono for labels, Inter for body.
• Don't use the primary accent (#3b82f6) for body text or large background fills—reserve it for interactive elements and the grid.
• Don't apply transitions longer than 0.3s—keep interactions snappy and responsive (0.15s is preferred).
• Don't hide the grid overlay or film-grain texture—they are core to the brand identity and should remain visible.
• Don't use color to convey status alone—pair color changes with text labels or icons for accessibility.
• Don't apply text-shadow or text-outline effects—maintain crisp, clean typography with -webkit-font-smoothing: antialiased.