Hila Akzin
Résumé
All work

ASAPP · 2019–25

One design system, many products

Quarks is the unified design system behind ASAPP’s products: a component library, layout system, and guidelines shared by design and engineering.

Role
Design contributor and system keeper
Team
Design and engineering
Scope
Components, layout and spacing, governance

Overview

Quarks is the single source of truth for UI patterns, components, and layouts across ASAPP’s products. I helped define its visual identity, built core components, set layout and spacing standards, and kept the system consistent as the product suite grew.

Components

Built for reuse

Tables

Dense data that stays readable, with sorting, bulk actions, and pagination.

Table anatomy: header row, rows, pagination, checkbox, sort button, container, with heights and padding
Anatomy
Table behavior: cursor states and sorting states
Behavior
Table scrolling behavior: fixed column and fixed header
Scrolling

Notifications

Toasts for quick feedback; inline notifications for persistent messages that can expand into detailed validation results.

Toast types: neutral, success and alert variants
Toast types
Toast anatomy: status icon, title, description, action and close button, with sizing rules
Toast anatomy
Expandable inline notification: a success message that expands into grouped validation details
Expandable inline notifications

Dialogs

Standard, alert, and media dialogs with flexible content and action zones.

Dialog type guidelines with a standard dialog example
Types
Alert dialog type guidelines with an example
Alert dialog
Alert dialog anatomy: title, actions, media, content and stepper
Anatomy

Layouts and spacing

Page templates and spacing rules so tables and pages behave the same across products.

Page placement spec: table width, margins and spacing tokens
Placement
Page scrolling spec: sticky page header, table header and pagination
Sticky and scrolling areas

One source of truth

Shared components and patterns keep products consistent and stop new, conflicting ones from appearing.

Accessible from the start

Keyboard navigation, clear hierarchy, and semantic variants are part of every component.

Keeping the system healthy

As the system’s keeper, I reviewed new work, guided designers adopting Quarks, and evolved it with the products.

Outcome

Faster, more consistent products

Quarks gave ASAPP a unified visual language, reduced design and engineering time through reusable components, and created a scalable foundation for new products.