Gemini Design System

My role
Senior UX Designer
Font-end Dev Manager

Company
IQVIA

Timeline
Multi-phase, cross-team initiative

Focus
Strategy, Design Systems, Front-End Integration

Highlights (TL;DR)

I led the cross-functional team to build a unified, token-driven Framer component library—and I partnered directly with the Framer X team to unlock product features our workflow required.

  • Role & scope: Senior UX Designer + Front-end Dev Manager · tokens → atomic components → patterns → docs.

  • External partnership: Worked with Framer UXR/PM to tailor features and roadmap to our needs.

  • Business problem: Inconsistent UI and ad-hoc components slowed releases and created governance issues.

  • Impact: cleaner specs, clearer variants, stronger tokens, reduced time to product delivery.

  • What I did

    • Set vision & roadmap for a token-first atomic library; defined naming, variants, and theming strategy.

    • Established governance & contribution model (review criteria, versioning, deprecations, release notes).

    • Baked in accessibility (contrast, focus order, keyboard paths) and wrote clear specs/usage guidance.

    • Built core atomic components & patterns in Framer with reusable variants and documented do/don’ts.

    • Partnered with Framer X on feature requests, beta validation, and rollout

    • Drove adoption via onboarding sessions, migration support, and measurable success criteria.

Design Bugs

↓ 41%

Design Handoff Time

↓ 30%

Design ↔ Dev Intake Cycles

↓ Down

Overview

Multiple teams were prototyping in Sketch and copy-pasting from older files without a shared source of truth, which led to drift in spacing, color, and behavior. I set out to lead a single, documented component library in Framer that designers and engineers could trust—and partnered with the Framer X team to overcome vendor limitations and secure the features our system needed.

  • Users: Designers, PMs, and engineers building prototypes and reference UIs

  • Constraints: Runtime environments, accessibility, performance, naming/versioning, governance

  • Scope: Tokens → primitives → core components → documentation → adoption

Research & Discovery

I audited existing interfaces, interviewed designers/engineers, and mapped how components moved from idea to build to release. These inputs shaped the roadmap and what to ship first.

  • Inventory of components, gaps, and accessibility issues

  • Most-reused patterns and common edge cases

  • Insight: tokenization would solve ~80% of inconsistencies; contribution rules were essential to avoid drift

Design Principals

These principles kept speed and quality aligned while we scaled the library across teams.

  • Token first — color, spacing, type, elevation as the single source of truth.

  • Atomic by design — build from tokens → primitives → atomic components → patterns (no forks, easy composition).

  • Accessible by default — contrast, focus order, keyboard paths, and clear labels baked into every component.

  • One system, many brands — theming and variants without duplicating components.

  • Govern, don’t gatekeep — clear contribution and versioning keep the system healthy and evolving.

Foundation & Core Components

I created tokens and core UI with variants and states, then validated them in real product scenarios.

  • Design tokens: color (light/dark), spacing scale, type ramp, elevation

  • Primitives: grid, layout, container, icon rules

  • Core components: Button, Input, Select, Textarea, Checkbox/Radio, Modal/Sheet, Tabs, Tooltip, Toast, Card, Navbar, Footer, etc.

  • Variants & states: size, emphasis, loading/disabled, error, focus; theming

Documentation & Distribution

The final phase was about building trust and momentum. I partnered with product teams to onboard them into Gemini, hosted training sessions, and championed the system as a collaborative tool — not a constraint.

  • Accelerated product timelines by reducing duplicate design and dev work.

  • Improved accessibility compliance across experiences.

  • Shifted the culture toward design + engineering collaboration at the start of projects, not the end.

Validation & Adoption

I piloted the library with partner teams, ran feedback cycles, and measured time savings and reuse. Even without code integration, teams reported faster delivery and fewer style conflicts.

Implementation

I treated the library like a product: naming, tokens, variants, and a release cadence kept it stable while evolving.

  • Token taxonomy and naming conventions aligned to brand/theming

  • Versioned releases with changelogs and migration guidance

  • Accessibility verification per component (contrast, focus order, keyboard behavior)

“We stopped rebuilding buttons and started shipping flows.”

Results

The library became the trusted source of truth in Framer, improving speed and consistency while raising accessibility coverage.

  • ↓ design+dev time per feature [25–40%]

  • ↑ component reuse [~3×]

  • AA contrast coverage across the core set

  • Adoption: 4 teams using v1.x within 6 weeks