System Overview
Brand primitives + reusable patterns
Portfolio
I craft modern digital products with focus on clarity.
Strategic designer & UI engineer who builds interfaces that are fast, elegant, and easy to scale.
Case Study Header
Title + metadata + link
Atlas Platform
End-to-end redesign untuk SaaS analytics dengan fokus pada clarity dan speed.
Role
Lead Designer
Timeline
12 Weeks
Scope
Product + UI
Impact
+32% Activation
Foundations
Color, type, spacing, radius, shadows
Color Tokens
Diambil dari CSS variables
Typography
Type scale utama
Hero Heading
Section Heading
Subsection Heading
Body text dipakai untuk deskripsi. Fokus pada keterbacaan, spasi yang longgar, dan tone yang tenang.
Eyebrow Label
Spacing
Scale konsisten
Radius
Corner system
Shadows
Depth system
Core Components
Buttons, inputs, links, badges
Buttons
States utama
Links & Badges
TextLink / Badge
Inputs
Form style
We'll only use this for your project reply.
Role is required.
Textarea
Message input
Project Patterns
Cards, grids, media
Tabs
Project filters
Atlas System
Modular UI kit for a fast-growing startup.
Nova Commerce
Checkout optimization for mobile-first users.
Pulse Mobile
Fitness product with data-rich dashboards.
Gunakan TagList untuk highlight skill, tools, atau kategori project.
info
Now booking for Q3
Slot konsultasi dibuka minggu depan. Join waitlist sekarang.
Experience & Credibility
Timeline, stats, testimonials
Lead Product Designer
Atlas Studio
Memimpin sistem desain dan pengembangan pengalaman digital.
- Audit dan refactor UI untuk 3 produk utama.
- Kolaborasi lintas tim: product, engineering, dan branding.
UI Engineer
Nova Labs
Membangun front‑end performa tinggi untuk platform SaaS.
- Meningkatkan Lighthouse score ke 95+.
- Mendesain komponen reusable untuk tim.
End-to-end builds
Product & UI
Core Web Vitals
Design Systems
92%
“We shipped faster and the UI finally feels premium. The system is clear and easy to maintain.”
Testimonials
Carousel with multiple quotes
“Clear, reliable delivery with strong UX. The system feels production‑ready.”
— Product Lead, Atlas Studio
Code Blocks
Authentic terminal-style snippets
#!/usr/bin/env bash
set -e
pnpm install
pnpm run build
pnpm run startexport async function getStatus() {
const res = await fetch("/api/status");
if (!res.ok) throw new Error("Request failed");
return res.json();
}Utilities
Lists, icons, empty states
List
Consistent bullets
- Strategic product direction
- Design system governance
- High-performance front-end builds
IconButton
Small actions
Card
Basic wrapper
Card Title
Use this wrapper for simple content blocks.
MediaImage
Image with fallback
No case studies yet
Mulai tambahkan proyek agar portfolio kamu terisi.
Something went wrong
We couldn’t load this content. Please refresh or try again.
Divider
Rhythm helper
info
Availability Update
Currently accepting 2 new projects for Q2. Book a call to reserve a slot.
Scroll Reveal
Subtle motion
Focus Ring
Accessibility helper
Skeleton
Loading state
Loading content
Fetching the latest project data.
Inline Loader
Lightweight feedback
Theme Toggle
Light / dark switch
Scroll To Top
Floating back-to-top button
Button appears after scroll in real pages.
Meta
Components list