Design System & Brand Core

Blueprint of AI Visual Engine

The premium design system specs, design tokens, UI components, code modules, and brand assets powering the entire builder interface.

1. Color System & Accents

Dark Background

#09090B (Carbon)

Dark Surface

#121214 (Plate)

Light Background

#FAF8F5 (Plaster)

Light Surface

#FFFFFF (White)

Accent Indigo

#6366F1 (Orchestra)

Accent Cyan

#06B6D4 (Metrics)

Accent Amber

#F59E0B (Warnings)

Accent Emerald

#10B981 (Verified)

Accent Violet

#7C3AED (Bridges)

Micro Bordersrgba(255,255,255,0.08)

2. Typography

DISPLAY HEADINGS (Geist Sans, Tight Tracking)

Geist Sans Bold • tracking-tight

MONOSPACE SYSTEM (Geist Mono)class AgentGraphNodeConfig: pass

BODY TEXT

Our verbal style uses brevity and system primitives, avoiding generic hype structures.

3. Spacing & Grid

GRID INCREMENT BOXES

4. Elevation & Shadows

Micro-Border Shadow

Standard Ambient

5. Glassmorphism

Glass Overlay Panel

blur(16px) saturate(190%)

6. Buttons

7. Inputs

MODEL PROVIDER KEY

8. Code Blocks

retriever.py

def get_relevant_chunks(query: str):
  vector = embedding_model.embed(query)
  return db.vector_search(vector, limit=5)

9. Badges

DEFAULT BADGEACTIVE STATEVERIFIED COHORTWARNING STATS

10. Charts (SVG Engine Metrics)

LATENCY DRIFT BY MODEL LOAD

11. Technical Tables

Model Type	Avg Latency
GPT-4o Agent Node	1,240 ms
Claude Haiku Router	280 ms

12. Timeline Checkpoints

Step 01: Connect Vector Store

Step 02: Run Assertion Traces

14. specialized Widgets

Bootcamp Course

AI Agents Engineering

Cohort program covering state machines, advanced tool routing, and LLMOps.

8 Weeks

PROD-READY

Enterprise RAG API

FastAPI database ingestion layer with hybrid vector indexes.

FastAPI • pgvector

Production thinking

Evaluations, security configurations, and token budgets built into assignments.

15. Illustration & System Schema

SCHEMA: AGENT ORCHESTRATION PIPELINE

Planner

Vector RAG

Guardrails