Johanes Antonius — Product Designer

Color palette

Type scale

H172/1.1

H240/1.2

H324/1.3

Body16/1.6

Components

Primary Button →

Secondary Button →

DefaultHoverActiveDisabled

8px

/system.log

// research → synthesis

// prd → user stories

// design.md → skills.md

> shipping_

prompt.input

> map this flow to components_

generating

72%

signal

ideascodeimpact

function Button() {
  return (
    <button className="btn">
      Ship it
    </button>
  )
}

Design → code

Figma→

design.md→

skills.md→

mapping.md

Design tokens

#0a5be8

#16c784

#ea3943

#16120d

#f5efe4

Mobile

375px

Tablet

768px

Desktop

1280px

◇ Button

Default

Hover

Icon

User needs

Accessible for all

Problem solved

Identity check

✓Citizenship

✓Liveness

3Data verification

Step 2 of 3

4.8 : 1

contrast passed

Support tickets

ResearchDefinePrototypeTest

−36%

KYC abandonment

−37%

support tickets

88%

TP/SL adoption

Hi, I’m

View my work About me

Brands I’ve worked with

Selected work

Also shipped

Not everything gets a case study. Two of these you can go and click.

Agel Langgeng
Designed and built solo, with Claude
Corporate site for the Kapal Api Group confectionery arm — brand portfolio, manufacturing, global distribution. Next.js, from blank file to live.
Visit site
Favorite Medium
Designed and built from scratch
The agency's own site, in Webflow. Still live and still theirs — clients on it include PayPal, Standard Chartered, Abbott and Genentech.
Visit site
Lingo — Abbott
Product design · Under NDA
Ketone and glucose biosensor app. Sensor onboarding and lifecycle states, and the Bluetooth and notification permission architecture across Android 12 and 13.

Johanes Antonius — Product Designer, Creative Technologist, Design Engineer, Helping People

Selected work

Also shipped