LJ | Agentic AI and Product Design

01 · Color Tokens

Background & Surface

--color-bg#0a0a0a

--color-surface-1#111111

--color-surface-2#1a1a1a

--color-surface-3#242424

Text

--color-text#e8e4dc
AAA 16.8:1

--color-text-muted#adadad
AAA 7.1:1

--color-text-dim#6b6b6b
decorative only

Brand

--color-teal#00bfa6

--color-teal-hover#00d4b8

--color-teal-dimrgba(0,191,166,0.12)

--color-teal-dark#0d2926

02 · Typography

Intelligent systems meet human design.

.heading-hero

Cormorant Garamond 300
64px / lh 1.15
tracking -0.02em

Work that moves numbers

.heading-section

Cormorant Garamond 300
48px / lh 1.15

The coach that shows up between sessions

.heading-sub

Cormorant Garamond 300
36px / lh 1.15

What the industry assumed

.heading-sm

Cormorant Garamond 300
24px / lh 1.15

I design AI-enabled workflow systems that help organizations think clearly and act decisively.

.text-lead

DM Sans 300
18px / lh 1.6
#e8e4dc

The continuity gap isn't a coaching problem. It's a systems design problem. What was missing wasn't more sessions — it was an intelligent system that could hold the thread.

.text-body

DM Sans 300
15px / lh 1.6
#e8e4dc

System architecture, UX, cognitive design, safety model

.text-muted

DM Sans 300
15px / lh 1.6
#adadad · AAA 7.1:1

Case Study 01 · Featured

.text-label

DM Mono 400
11px / tracking 0.20em
#00bfa6 · uppercase

Lead AI Product Designer · 2024

.text-caption

DM Mono 300
11px / tracking 0.10em
#adadad

03 · Metrics & Numbers

62%

Call center reduction

2×

Study participation

4.1×

Payment plan adoption

82%

Faster completion

.metric-display — DM Serif Display 400 · 44px · #00bfa6
.metric-label — DM Sans 300 · 13px · #adadad · margin-top 8px

04 · Tags & Labels

AI Coaching Conversational UX Agentic Systems

Health Equity NIH Research Systems Design

FastAPI · Next.js Human-in-the-Loop 2024

.tag-teal — bg #0d2926 · text #00bfa6 · contrast 4.8:1 AA ✓
.tag-neutral — bg #1a1a1a · text #adadad · contrast 7.1:1 AAA ✓
.tag-outline — transparent · border rgba(255,255,255,0.15) · text #adadad · AAA ✓
All tags: DM Mono · 11px · tracking 0.10em · padding 6px 12px · uppercase

05 · Buttons

Explore the Work → Let's Talk Read the case study →

.btn-primary — bg #00bfa6 · text #0a0a0a · DM Sans 400 · 13px · tracking 0.04em
.btn-secondary — transparent · border rgba(255,255,255,0.07) · text #adadad
.btn-ghost — transparent · text #00bfa6 · no padding-left
All: padding 12px 24px · hover: translateY(-1px) · transition 0.2s ease

06 · Cards & Surfaces

Default card

Standard content surface. Used for project details, context blocks.

Raised card

Elevated surface. Used for featured content or hover states.

Teal card

Brand accent surface. Use sparingly for emphasis.

"Paloma doesn't try to be a coach. It's the infrastructure that makes coaching work."

.card — bg transparent · border rgba(255,255,255,0.07) · padding 32px
.card-raised — bg #1a1a1a · border rgba(255,255,255,0.15)
.card-teal — bg #0d2926 · no border
.callout — bg #111111 · border-left 2px #00bfa6 · Cormorant italic 36px

07 · Case Study Components

Case Study 01 · Featured · Fintech

Due Notice

Redesigned a debt collection platform by transforming compliance friction into clarity.

Fintech UX Strategy Enterprise

The Problem

"Compliance was treated as the enemy of good experience. It didn't have to be."

62%

Call center reduction

4.1×

Payment plan adoption

89%

Disclosure acknowledgment

Style Guide

Due Notice