HOPFIELD LABS/DESIGN SYSTEM SPEC v1.0

Energy Landscape Tokens & Primitives

Dark-first, engineered, restrained visual language. No gradient soup, no drop shadows. Precise 1px structural borders, Geist typography, and energy-minimizing attractor fields.

CALIBRATED
01 // COLOR SPECIFICATION

Design Tokens Matrix

11 core variables defined in app/globals.css. Inverts seamlessly to light mode while preserving strict contrast ratios (body copy ≥ 6.5:1).

--bg

Page base background

DARK: #08090CLIGHT: #FAFAFB
--surface

Cards, panels & nav container

DARK: #101319LIGHT: #FFFFFF
--surface-2

Raised surfaces, chips, hover states

DARK: #161A22LIGHT: #F1F3F7
--border

Default 1px structural outlines

DARK: #232935LIGHT: #E1E5ED
--border-strong

Hover outlines & high-emphasis dividers

DARK: #323A4ALIGHT: #C4CBD6
--fg

Primary text, headers, prominent UI

DARK: #E9ECF2LIGHT: #0A0B0F
--fg-muted

Body copy, subtitles, mono labels (≥ 4.5:1)

DARK: #939CB0LIGHT: #535D71
--accent

Primary CTAs, links, focus ring

DARK: #4F7DFFLIGHT: #3A69F0
--accent-soft

Soft contextual highlight backgrounds

DARK: rgba(79, 125, 255, 0.1)LIGHT: rgba(58, 105, 240, 0.08)
--signal

Active dots, metric counters, metrics

DARK: #00D6A4LIGHT: #00A880
--danger

Validation errors & critical alerts

DARK: #FF5C5CLIGHT: #E03636
02 // TYPOGRAPHY HIERARCHY

Geist Sans & Geist Mono Type Scale

Engineered readability: Hero clamp, tight tracking on headings, wide mono tracking on eyebrows and instrumentation readouts.

HERO CLAMP — clamp(2.75rem, 6vw, 4.5rem) / font-medium / leading-[0.95]
GEIST SANS

We engineer intelligent software.

SECTION HEADING — text-3xl md:text-4xl / font-medium / tracking-tight
GEIST SANS

Production-Grade AI & Web Architecture

MONO EYEBROW — text-xs / tracking-[0.12em] / uppercase
SOFTWARE & AI STUDIO // CAPABILITIES
SYSTEM STATUS: OPERATIONAL
TAKING PROJECTS FOR APRIL 2026
STAT METRIC — text-4xl / font-mono / text-[--signal]
99.4%TEST COVERAGE4-6wAVG DELIVERY
BODY COPY — text-[15px] / leading-relaxed / text-[--fg-muted] (Contrast ≥ 6.5:1)

We build dependable web applications, native mobile experiences, and custom GenAI integrations. Every deliverable is structured for long-term maintainability with comprehensive tests, clear documentation, and measurable outcomes.

03 // INTERACTIVE PRIMITIVES

Button States & Variants

Engineered with 150ms transitions, subtle active compression (scale 0.98), and visible focus rings.

VARIANTS
SIZES
DYNAMIC STATES (LOADING & DISABLED)
04 // SURFACE SPECIFICATION

Card Treatments & Hover Behavior

Zero drop shadows. 1px --border outlines that lift to --border-strong and --surface-2 upon hover.

GenAI Integration

Production RAG pipelines, autonomous agents, and custom LLM API orchestration.

RAG
VECTOR DB
LANGCHAIN
STATIC SURFACE (CARD)

Full-Stack Web

High-performance web applications built on Next.js 15, TypeScript, and resilient serverless architectures.

NEXT.JS
TYPESCRIPT
TAILWIND
HOVER TO TEST SURFACE LIFT →
STATISTICAL OUTCOME
42%
Latency Reduction

Achieved for medical image inference platform through edge caching.

CLIENT CASE STUDY METRIC
05 // FORM CONTROLS

Inputs, Textareas & Validation

Precision inputs with --accent focus rings and --danger error indicators.

MAX 1000 CHARACTERSZOD VALIDATED
06 // SIGNATURE MOTIF

Attractor Field (Hopfield Network Motif)

Dynamic node-graph settling into energy minima basins. Max opacity ≤ 0.35, radial edge fade mask, interactive mouse perturbation, and static fallback for prefers-reduced-motion.

HOPFIELD BASIN MINIMA // ACTIVE

Energy Landscape Simulation

CANVAS 2D / DPR SCALED

Hover over the field with your cursor to perturb nodes. Watch them settle back toward stable equilibrium points.

HOPFIELD LABS // DESIGN SYSTEM v1.0COMPLIANT: NEXT.JS 15 • TAILWIND V4 • RADIX UI© 2026 HOPFIELD LABS