AionDB

Overview

AionDB is a PostgreSQL-compatible multimodal database engine written in Rust, designed for developers who need relational records, graph relationships, and vector search unified in a single query surface. The design system embraces "Technical Minimalism"—a philosophy that strips away decorative elements to expose the precision and power of the underlying technology. The aesthetic is deliberately austere: deep charcoal backgrounds (rgba(4, 4, 5, 0.88)), crisp white typography (rgba(255, 255, 255, 0.97)), and surgical use of accent colors (pure white #ffffff for CTAs, muted green #36b875 for secondary actions). This creates an environment where complex database concepts feel approachable rather than intimidating.

The brand voice is direct, technical, and unapologetically precise. Sentences are short and declarative: "Vector search is now a first-class AionDB surface." "Normal app stack." The vocabulary favors concrete terms (pgwire, HNSW, IVF-flat, Qdrant-style filters) over marketing abstractions. The UI communicates through restraint—every pixel serves a function, every color choice signals hierarchy or interactivity. Example sentence in brand voice: "AionDB v0.3 brings pgvector-style SQL, HNSW, IVF-flat, Qdrant-style filters, graph relationships, and relational records into one Rust engine."

Colors

The color system is built on a dark-first foundation optimized for technical documentation and code-heavy interfaces. The primary surface is near-black (#040405, rgba(4, 4, 5, 0.88)), with a carefully calibrated container stack that provides depth without introducing visual noise. Surface-container ranges from #050506 (lowest, used for subtle backgrounds) through #2d2d32 (highest, for elevated modals or panels), allowing designers to create visual hierarchy through luminance alone. On-surface text is off-white (#f8f8f8, rgba(248, 248, 248, 0.74)) for body copy, with outline-variant (#8b8e95) reserved for secondary labels and disabled states.

Primary is pure white (#ffffff), used exclusively for high-emphasis CTAs ("v0.3 vector update" button) and interactive focus states. This creates max

Typography

The type system uses Inter exclusively for UI and body text, paired with JetBrains Mono for code and technical labels. Display (140px, fontWeight 400, lineHeight 140px, letterSpacing -0.04em) is reserved for the hero "AionDB" heading and conveys scale and authority. Headline-lg (40px, fontWeight 500, lineHeight 48px, letterSpacing -0.022em) anchors major sections; headline-md (28px, fontWeight 500, lineHeight 36px) handles subsection titles. Body-md (15px, fontWeight 400, lineHeight 24px, letterSpacing -0.012em) is the workhorse for paragraph text and maintains readability at 1.55 line-height. Label-md (13px, fontWeight 500, lineHeight 20px, letterSpacing 0.01em) is applied to buttons, nav links, and form labels—the 500 weight provides visual emphasis without increasing size. Label-sm (11p

Layout

The layout system uses a 12-column grid with a max-width of 1200px, but content is constrained to 760px for optimal reading rhythm. The header is sticky with a frosted-glass effect (backdrop-filter: saturate(180%) blur(8px), background: rgba(250, 250, 250, 0.92)) and a 1px bottom border in #e6e7ea. The main content area uses a single-column layout with generous vertical spacing: 72px (lg spacing) between major sections, 40px (md spacing) between subsections, and 24px (sm spacing) between paragraphs. The hero section breaks this pattern—it uses a two-column grid (hero-copy on the left, hero-card on the right) to showcase both narrative and code simultaneously. Container padding is 32px (gutter) on desktop, scaling down to 16px on mobile. The footer is minimal: a single line of metadata ("ai

Elevation & Depth

Depth in this system is achieved through layered transparency and subtle shadows rather than dramatic drop-shadows. The base layer is the fixed background canvas (a subtle gradient: linear-gradient(135deg, #f0f1f3 0%, #ffffff 50%, #e6e7ea 100%)), which provides a neutral, almost imperceptible texture. Level 1 (standard cards and containers) uses a 1px border in rgba(255, 255, 255, 0.08) with no shadow, relying on the border alone to define the edge. Level 2 (elevated cards, modals) escalates to rgba(255, 255, 255, 0.12) border and applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a s

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are minimal and functional, never decorative. Buttons and inputs use border-radius: 999px (full roundness) to signal interactivity and softness, creating a visual contrast with the sharp, technical nature of the content. Cards and code blocks use border-radius: 4px (DEFAULT), a subtle rounding that suggests structure without distraction. Modals and elevated surfaces use border-radius: 6px (md) to provide slightly more visual breathing room. The hero query card uses border-radius: 0px (sharp corners) to emphasize its role as a co

Components

Action Elements Buttons follow a strict hierarchy. Primary buttons ("v0.3 vector update") use backgroundColor: #ffffff, textColor: #111114, padding: 9px 18px, border-radius: 999px, and typography: label-md (13px, fontWeight 500). On hover, the background shifts to #e6e7ea (primary-container) with text color #2a2a2e (on-primary-container), maintaining contrast while signaling interactivity. The transition is 120ms ease. Secondary buttons ("Vector benchmarks") use backgroundColor: rgba(255, 255, 255, 0.035), textColor: #fffaf4 (tertiary), and a 1px border in rgba(255, 255, 255, 0.1). On hover, the background escalates to rgba(255, 255, 255, 0.08) and the border to rgba(255, 255, 255, 0.2). Tertiary buttons are text-only links with no background, using textColor: #111114 and text-decorati

Do's and Don'ts

**Do**

• Do use white (#ffffff) exclusively for primary CTAs and focus states—it creates maximum contrast and instant recognition against the dark background.
• Do apply border-radius: 999px to all interactive elements (buttons, inputs, badges) to signal clickability and create visual softness.
• Do constrain body text to 760px max-width and use 1.55 line-height (24px for 15px text) to maintain readability in the dark theme.
• Do use rgba-based transparency (e.g., rgba(255, 255, 255, 0.08)) for hover states instead of hue shifts—it maintains visual cohesion with the dark background.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels placed over busy backgrounds or gradients.
• Do use JetBrains Mono at 13px with 1.6 line-height for code blocks to ensure syntax highlighting legibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for body text—use #f8f8f8 (on-surface) for light text and #111114 (on-primary) for dark text to reduce eye strain.
• Don't apply shadows with pure black (rgba(0, 0, 0, ...))—use rgba(15, 23, 42, ...) for a warmer, more sophisticated shadow palette.
• Don't round corners on code blocks or query cards—use border-radius: 0px to emphasize their role as technical artifacts.
• Don't use secondary green (#36b875) for primary CTAs—reserve it for supporting actions and status indicators only.
• Don't exceed 1200px container max-width or 760px content max-width—the layout rhythm depends on these constraints.
• Don't use color alone to convey state changes—pair color shifts with opacity changes (e.g., hover states should increase background opacity from 0.035 to 0.08).