Design System

The Mubashir design language

The tokens, type, and components that keep every page consistent — dark and light, first-class. Toggle the theme (top right) to see both.

Color

A clean warm-white canvas with a gold → orange → coral (sunrise) signature gradient. Semantic tokens flip automatically between themes.

Brand gradient#FDBB2D→#F97316→#FF5E4D
Brand#F97316
Brand 2#FBBF24
Brand 3#FF6B4A
Backgroundvar(--bg)
Surfacevar(--surface)
Textvar(--text)
Mutedvar(--muted)

Typography

Space Grotesk for display & headings, Inter for body & UI, JetBrains Mono for code and data.

Display / H1Intelligent systems
H2 · SectionSelected case studies
H3 · CardGrounding agents in tools
H4 · LabelMachine Learning
Body · LargeReliable AI systems that quietly do the work.
Body · RegularPractical write-ups on the systems I build and the ideas behind them.
Body · Small11 min read · July 12, 2026
Mono / Codefrom langchain.tools import tool

Components

Reusable building blocks — buttons, chips, inputs, pills, badges, and cards.

Buttons

Skill / Tech chips

PythonLangChainn8nRAGPyTorchDocker

Filter pills

AllCheat sheetsPromptsDatasets

Input field

Content card

Building production agents

A field guide to grounding autonomous agents.

Stat

30K+
Learners reached

Effects & motion

Glassmorphism, brand glow, gradient fills, generous radii, and soft depth — used sparingly for a premium, uncluttered feel. Reveal-on-scroll, hover lift, and count-up animations run across the site.

Glassmorphism
blur + translucent surface
Brand glow
soft orange halo
Gradient fill
135° signature
Radius 26px
cards & bands
Elevation
layered soft shadow
Hover-lift + gradient border
on interactive cards

Core tokens

Everything is driven by CSS custom properties, so porting to Tailwind or a Next.js theme is a copy-paste.

--brand: #F97316;
--grad: linear-gradient(135deg,#FDBB2D,#F97316,#FF5E4D);
--radius: 18px;  --radius-lg: 26px;  --radius-sm: 12px;
--shadow: 0 20px 50px -20px rgba(0,0,0,.7);
--ease: cubic-bezier(.22,1,.36,1);  --nav-h: 70px;
--maxw: 1180px;  /* spacing scale: 8px base */