AI Coding Dictionary

Overview

The AI Coding Dictionary is a reference interface for technical vocabulary in AI and agentic systems, designed with an ethos of 'Intellectual Minimalism'—a movement that strips away visual noise to expose pure information architecture. The brand serves developers, researchers, and curious technologists who demand precision over decoration. The aesthetic is deliberately austere: a warm, off-white canvas (#eaeae8) paired with deep charcoal text (#1a1a19) and a 3D node graph visualization that transforms abstract concepts into spatial relationships. The interface evokes the clarity of a technical manual crossed with the contemplative depth of a knowledge map—every pixel earns its place.

The voice is precise, unadorned, and conversational without being casual. Sentences are direct and definition-forward: 'A token is the atomic unit a model reads and writes. Roughly word-sized but not exactly.' The brand avoids marketing speak, jargon inflation, and false authority. Personality emerges through intellectual honesty—acknowledging complexity while explaining plainly. The tone treats the reader as a peer: informed, impatient, and hungry for clarity.

Colors

The color system embraces a monochromatic foundation with strategic depth through tonal variation rather than hue diversity. Primary (#1a1a19, deep charcoal) is the dominant text and interactive accent—used on CTAs, node highlights, and focus states. It commands attention not through brightness but through contrast and weight. Surface (#eaeae8, warm off-white) is the canvas, chosen for its slight warmth (avoiding pure white's clinical coldness) and its ability to reduce eye strain during extended reading. The surface stack progresses through carefully calibrated grays: surface-dim (#d9d9d7) for subtle backgrounds, surface-container (#e9ecef) for card and panel fills, and surface-container-high (#d0d0d0) for hover and active states. Outline (#1a1a1924, charcoal at 14% opacity) defines subtl

Typography

The type system is built entirely on ServerMono, a custom monospace font that reinforces the brand's technical, reference-material identity. Unlike proportional typefaces that soften information, monospace creates visual rhythm and emphasizes code-like precision—every character occupies equal width, mirroring how developers read. Display (64px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px) and headline-md (28px) establish section hierarchy without weight variation, relying instead on size and line-height (48px and 36px respectively) for breathing room. Body-lg (18px, 28px line-height) and body-md (16px, 24px line-height) are optimized for definition lists and explanatory prose, with generous line-height (1.56x and 1.5x) to prevent monospac

Layout

The layout operates on a fixed 800px container (max-width: 800px) centered on the viewport, a constraint that enforces reading-friendly line lengths and prevents the interface from sprawling. The grid system uses 12 columns with 24px gutters (--gap: 24px), allowing flexible 2-, 3-, 4-, and 6-column layouts within the container. Spacing follows a semantic scale: unit (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for page-level rhythm. The hero section uses lg spacing (40px) above and below to establish visual weight; definition lists use md (24px) between terms and sm (12px) between term and definition. White-space is treated as structure, not waste—negative space around the

Elevation & Depth

Depth in this system is achieved through shadow and scale rather than layering or blur. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle UI elements like disabled states and secondary buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and hover states; lg (0 10px 26px -18px rgba(0, 0, 0, 0.55)) for modals and elevated graph nodes. The 3D node graph uses md shadows on standard nodes and lg shadows on hover/focus states, with a 200ms ease-out transition to signal interactivity. Dropdowns and select panels apply md shadows with a 4px mar

Shapes

The shape philosophy is 'Technical Precision with Approachability'—sharp corners where structure demands clarity, rounded corners where interaction invites touch. Buttons and interactive elements use rounded-full (border-radius: 9999px) to signal affordance and soften the otherwise austere interface; this pill-shaped form is familiar from modern UI patterns and reduces visual harshness. Cards and panels use rounded-md (0.75rem / 12px) for a subtle, professional finish that avoids the clinical feel of sharp corners without the playfulness of large radii. Input fields use rounded-DEFAULT (0.5rem

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses background-color: {colors.primary} (#1a1a19), text-color: {colors.on-primary} (#f2f2f0), rounded-full (9999px), padding: 12px 24px, and height: 44px for touch-friendly targets. On hover, transition to background-color: {colors.primary-container} (#505050) with a 150ms ease-out transition. button-secondary is transparent with a 1px border at {colors.outline-variant}, text in primary, and the same rounded-full and padding; on hover, fill with surface-container-high (#d0d0d0). Both buttons use label-md typography (14px, 400 weight, 20px line-height). The 3D graph nodes (node-graph-node) are circular with background-color: {colors.primary}, box-shadow: {elevation.md}, and a 200ms ease-out transition. On h

Do's and Don'ts

**Do**

• Do use monospace typography (ServerMono) for all body copy and UI labels to reinforce the technical, reference-material identity—never substitute with proportional fonts.
• Do apply the full surface stack (surface, surface-dim, surface-container, surface-container-high) to create tonal hierarchy; avoid pure white or pure black backgrounds.
• Do transition interactive elements with 150ms ease-out timing (or 200ms for graph nodes) to signal state changes without feeling sluggish.
• Do use primary (#1a1a19) exclusively for CTAs, focus states, and interactive accents; never introduce secondary colors into interactive elements.
• Do maintain the 800px container max-width on desktop to preserve reading comfort and prevent line-length sprawl.
• Do use rounded-full (9999px) only on buttons and interactive affordances; use rounded-md (12px) for cards and rounded-DEFAULT (8px) for inputs.

**Don't**

• Don't use proportional typefaces (serif, sans-serif) in body copy; the monospace constraint is core to the brand's technical identity.
• Don't introduce new hues beyond the primary/secondary/tertiary/error palette; the monochromatic discipline is a key differentiator.
• Don't apply blur, glassmorphism, or translucency effects; the design relies on shadows and scale for depth, not opacity tricks.
• Don't use weight variation (bold, semibold) for emphasis; instead, increase font-size, adjust color, or apply letter-spacing.
• Don't exceed 150ms transition timing on standard UI elements; faster feels jarring, slower feels unresponsive in a technical context.
• Don't break the 800px container constraint on desktop; the fixed width is intentional for readability and visual focus.