Lykdat Design System - Rabiat's Portfolio

My Role

I led the entire initiative, from audit to documentation to evangelism. My role included:

Auditing existing UI across platforms
Designing the foundational styles (typography, color, spacing)
Building a scalable component library in Figma
Documenting usage and edge cases
Collaborating with engineers for naming consistency and future handoff

Tools used: Figma, Notion (for guidelines), Invision DSM (for dev handoff), Slack (for feedback and rollout)

Overview

When I joined Lykdat, one thing was clear: we were building fast, but not always cohesively. There were multiple digital products in play, each with their own visual quirks, patterns, and interpretations of “the button.”

To streamline design work and improve collaboration with engineers, I created a design system from scratch, a unified library of UI components, styles, and interaction patterns. The goal was simple: design once, use everywhere.

Context & Challenge

Before the system, Lykdat’s product team was moving quickly—shipping features and iterating based on customer feedback. But design consistency was suffering:

Buttons had different corner radii and color shades across pages
Typography styles were ad hoc and manually applied
Developers had no single source of truth to follow
New designers (including me!) had to reverse-engineer components just to get started

It wasn’t just a cosmetic issue. Inconsistent UI created rework, slowed down development, and made the user experience feel fragmented. It was time to fix that.

Goals & Success Criteria

My goals for the system were clear:

Establish a shared visual language across products
Create reusable, responsive components in Figma
Improve design-to-dev handoff by aligning naming and structure
Reduce the time spent recreating common patterns
Make onboarding easier for new team members

Success looked like this:

Engineers could build directly from documented designs
Designers didn’t have to ask, “Which button style are we using here?”
Stakeholders noticed cleaner, more consistent interfaces

Research & Audit

I started by auditing all live products - screenshots, Figma files, and in some cases, straight from the codebase. I created a UI inventory with a collection of every version of buttons, inputs, modals, etc. It was chaos, but it gave me a map.

I also conducted informal interviews with devs and PMs to understand where friction lived. Common feedback were:

“We never know which version to use.”
“Designs change, and we don’t hear about it.”
“There’s no centralized place to reference components.”
Perfect. That gave me my checklist.

Design & Structure

I structured the system into three key levels:

FOUNDATION

Color System

Refined the palette for stronger contrast ratios and WCAG compliance. Introduced semantic tokens (e.g., success, warning, info) for accessibility. Scalable to light/dark themes and future brand extensions.

Typography

Standardized type hierarchy with clear headings, body, and captions. Improved legibility across devices and ensured accessible line height and font sizing. Scalable to multiple languages and weights without losing consistency.

Spacing & Grid

Established a consistent spacing scale to reduce visual clutter and improve rhythm. Designed token-based values for accessibility (touch-friendly tap targets). Scalable across components, layouts, and new breakpoints.

COMPONENTS

Buttons

Standardized sizes (small, medium, large) for consistent use across the system. Improved contrast ratios and focus states for accessibility. Scalable to different variants (primary, secondary, ghost, icon-only) without breaking hierarchy.

Input Field

Redesigned with consistent spacing, clear focus states, and accessible labels. Added support for error, success, and helper text for clarity. Scalable to multiple sizes (mobile, desktop) and types (text, email, password, search).

Table Component

Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way.

Container & Card

Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way.

Info State

Introduced clear color contrast and icon support for better readability. Standardized success, error, and warning states for scalability across the system.

Chip & Label

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips are compact elements that represent an input, attribute, or action.

Product Card

Structural components used to group and present content. Containers provide layout boundaries, while cards highlight specific pieces of information or actions in a visually distinct way

Selection Control

PATTERN

Form

Dialog

Dropdown

Table

Introduced clear color contrast and icon support for better readability. Standardized success, error, and warning states for scalability across the system.

Navigation

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips are compact elements that represent an input, attribute, or action.

Collaboration & Adoption

I didn’t build the system in a silo. From early stages, I:

Shared audit findings with the product team to build urgency
Created Notion pages with “How to Use This Component” docs
Set up weekly demos for designers and developers to test drive components
Integrated feedback loops via Slack and design reviews
Engineers loved that Figma and code started speaking the same language. PMs appreciated faster prototyping. Designers? Let’s just say they stopped cursing at duplicate buttons.

Impact & Outcomes

Here’s what changed:

Design time dropped by 30–40% on new screens
Devs used Figma inspect mode more confidently—less back and forth
Visual consistency improved across the board, reducing UI QA revisions
New hires got up to speed in days instead of weeks
I became the go-to for design system onboarding

Email | Linkedin | Blog