Datalumina Learn

Overview

Datalumina Learn is a technical documentation platform designed for AI engineers and developers building production-grade systems. The design system embodies 'Functional Minimalism'—a philosophy that prioritizes information hierarchy, code legibility, and developer ergonomics over decorative flourishes. The interface uses a clean white canvas (rgb(255, 255, 255)) with a deep navy primary accent (#0d1226) that appears on interactive elements, navigation highlights, and focus states. The emotional response is one of clarity and confidence: users feel guided through complex technical concepts by a layout that respects their cognitive load and rewards precision.

The brand voice is direct, technical, and encouraging—never patronizing, never breathless. Datalumina speaks to developers as peers: 'Install Herdr, run it for the first time, and connect your coding agents.' The vocabulary is precise (using 'workspace', 'pane', 'agent' with consistent meaning), the tone is calm and methodical, and the examples are always production-relevant. The design reinforces this voice through generous whitespace (16px gutters, 24px section breaks), monospace code blocks with 14px GeistMono at 20px line-height, and a sidebar navigation that never overwhelms.

Colors

The color system is rooted in a high-contrast, accessibility-first approach. Primary (#0d1226) is the deep navy used exclusively for CTAs, active navigation states, focus rings, and brand-critical interactive elements—it commands attention without aggression. On-surface text (#0f111a) is a near-black with oklch(0.18 0.02 275) precision, ensuring 7:1+ contrast on white backgrounds and readability at 16px body text. The surface stack progresses from pure white (surface: #ffffff) through subtle grays (surface-container-low: #f5f5f5, surface-container: #ebebeb) to create depth without darkness. Outline tokens (#8e9192 for primary borders, #c4c7c8 for secondary dividers) are muted grays that separate regions without visual noise. Secondary (#6a737d) supports metadata, timestamps, and muted UI t

Typography

The type system uses Manrope as the primary sans-serif family, chosen for its geometric clarity and excellent readability at small sizes (12px labels, 14px UI text). Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) is used for section headings and modal titles. Headline-md (28px, 600 weight) breaks up content into logical chunks—each 'Install', 'First run', 'Agent integrations' section uses this weight. Title-lg (20px, 600 weight) marks subsections and card headers. Body-lg (18px, 400 weight, 28px line-height) is the default for long-form documentation prose, providing 1.56x line-height ratio for comfortable reading. Body-md (16px, 400 weight, 24px line-height) is used in UI labels, sidebar navigation, and inline descr

Layout

The page layout uses a three-column grid: a fixed 268px sidebar (navigation), a fluid main content area (max 1280px container), and a 240px table-of-contents column on desktop. On mobile, the sidebar collapses and the TOC moves into a popover. The grid uses CSS Grid with named areas (sidebar, header, main, toc) and CSS custom properties for dynamic column widths. Container max-width is 1280px, enforced on the main content column to prevent line-length from exceeding 80 characters at body-md (16px). Spacing follows a 4px unit system: xs (4px) for micro-spacing, sm (8px) for component padding, md (16px) for gutter and card padding, lg (24px) for section breaks, xl (32px) for major layout shifts. Section separation uses lg spacing (24px) above and below to create visual rhythm. The sidebar us

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and list items at rest, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards on hover and dropdown menus, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and popovers. Cards at rest have a 1px border in outline-variant (#c4c7c8) and sm shadow. On hover, the shadow elevates to md and the background shifts from surface-container-lowest (#fafafa) to surface-container-low (#f5f5f5), creating a subtle lift effect with 200ms transition ti

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the technical aesthetic. Buttons use lg radius (1rem / 16px) for a slightly rounded appearance that feels modern but not playful. Cards and input fields use DEFAULT radius (0.5rem / 8px) for a subtle softness that distinguishes them from sharp rectangles. Code blocks use md radius (0.75rem / 12px) to create visual separation from body text. The sidebar and modals use no border-radius (0px) to anchor them as structural elements. Badges use full radius (9999

Components

Action Elements Buttons use a 40px height with 8px vertical and 16px horizontal padding, lg radius (16px), and label-md typography (14px, 500 weight). Primary buttons have background #0d1226 (primary) and white text, with a hover state that darkens to #0a0e1a over 150ms. Secondary buttons have a 1px border in outline-variant (#c4c7c8) and transparent background, shifting to surface-container-high (#e0e0e0) on hover. Ghost buttons have no border or background, only text color, and shift to surface-container-low (#f5f5f5) on hover. All button state transitions use cubic-bezier(0.4, 0, 0.2, 1) timing for a snappy, responsive feel.

Containers & Surfaces Cards use surface-container-lowest (#fafafa) background, 1px outline-variant border, sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)), md pa