Building Scalable AI systems with LLMs, SLMs, Semantic Search, NLP, and AI Agents.
Creative North Star: “The Field Notebook”
The site reads as a working engineer’s technical notebook, not a marketing template: high-contrast ink-on-paper for reading, a single committed signal color (burnt-orange) used sparingly and deliberately, and monospace reserved for exactly the places a developer expects it — code, dates, tags, source labels — never as costume. This replaces the prior “SaaS Template” baseline (royal-blue #2563eb, Slate-50/white, Inter-everywhere, ambient-shadow hover-lift cards), which PRODUCT.md named as an explicit anti-reference undermining credibility with an NLP/ML practitioner audience.
The structural skeleton from the previous system is preserved (hero → content sections → grid/list → footer) because it was sound information architecture; what changed is the surface treatment and, on the blog specifically, the decision to stop giving original technical notes and syndicated reposts the same visual weight.
Key Characteristics:
hero-role marker) — a real contrast axis, not size/weight variation on one face.Restrained-to-committed strategy: a near-black ink on near-white paper carries almost all of the surface; one saturated accent (signal orange) is spent deliberately on interactive and identity moments, never as background wash.
// hero-role marker, read-more CTAs, tag-badge accents, blockquote mark. The one color that means “interactive” or “brand” anywhere on the site.<pre> code blocks — the only intentionally dark surface on the site.The One Accent Rule. Signal orange is the only saturated color on the site. If a new component reaches for a second bright hue, that’s drift — stop and ask whether ink, paper, or an existing neutral would do the job instead.
Documented exception: the copy-code button’s .copied success state uses green (rgba(34,197,94,*) / #86efac) on the dark code surface. This is universal success semantics, not brand color, and is scoped to a two-second transient state — it doesn’t violate the One Accent Rule.
Display/Body Font: Archivo (Google Fonts, weights 400–800), fallback sans-serif.
Mono/Label Font: JetBrains Mono (Google Fonts, weights 400–700), fallback monospace.
Character: A geometric grotesk (Archivo) for everything a reader parses as prose or UI, paired with a monospace face (JetBrains Mono) for everything that’s technically precise — code, dates, tags, source labels, the hero-role line. The pairing itself is the “engineer’s notebook” signal: prose reads cleanly, metadata reads like annotations in the margin.
clamp(2.25rem, 4vw, 2.9rem), letter-spacing -0.03em): homepage hero name (.hero-name)..writing-hero h1).max-width: 72ch and left-aligned (previously justified, which produced uneven rivers).The Mono-Is-Metadata Rule. JetBrains Mono is reserved for metadata and code — dates, tags, source labels, badges. It never appears in headings or body prose. This keeps the mono accent earned (this is a genuinely technical site) rather than costume.
Flat by default. No ambient shadows anywhere in the system; depth and interactivity are communicated entirely through a 1px border shifting from neutral to signal-orange on hover, plus (on cards) a background tint on repost list rows. This directly replaces the prior ambient-shadow + translateY(-4px) hover-lift pattern, which is now a Don’t (see below).
The Flat-By-Default Rule. No box-shadow for elevation anywhere outside the .blog-post container’s structural 1px border (which is a border, authored as a shadow only for a legacy reason and should migrate fully to border over time). Cards, buttons, and badges use border-color changes, not shadows, to signal state.
--radius), sharper than the prior 8px — deliberate, precise geometry..cta-btn): ink fill, white text; hovers to signal-orange fill and border. No shadow, no lift..cta-btn.secondary): surface background, 1px border-strong border; hovers to signal-orange border/text..btn-outline): same shape family; hovers to signal-orange border/text.--border, no default darkening — color is the only signal..repost-item), hairline dividers, mono source label at fixed width, sans title, external-link glyph. Background tints to paper on hover; title turns signal-orange..card-tag): paper background, ink-soft mono text, 1px border, 3px radius..tag-badge): outlined pill, signal-orange border/text on paper, inverts to solid signal-orange with white text on hover — no shadow, no translate..category-badge): solid ink fill, white mono text — flat, no gradient (previously a Royal-Blue→Purple gradient, now removed)..post-pager): two-column older/newer navigation at the foot of each post; bordered cards, mono label + sans title, border turns signal-orange on hover..related-posts): same-tag notes surfaced below the pager as a compact list, mono tag label on the right of each row.// Data Science Architect, NLP) above the bio, giving a fast credibility signal before any body copy. The condensed body.writing-page header (used on the blog index and posts) remains visually distinct from the homepage hero — this reconciliation is deferred, not solved, in this pass.#2563eb royal-blue, Slate-50/white, or Inter — that system is retired, not just “not currently used.”translateY(-4px) hover-lift or ambient box-shadows on cards; flat-by-default is the rule now.border-left accent stripe on quotes, callouts, or preview copy (removed from .writing-preview-copy and .blog-post-content blockquote in this pass) — use background tint, a leading glyph, or nothing..card treatment as an original post; route new external-content types through .repost-item, not the card grid.text-align: justify) — left-aligned with text-wrap: pretty is the standard for .blog-post-content p.