Sugeng Priyanto
Back to work
Design systems

A good system creates consistency without flattening the character that makes a product feel like yours.

Design systems case study

Tools & stack

FigmaStorybookZeroheightGitHub

Deliverables

  • Foundations, tokens, and guidelines
  • Reusable component patterns
  • Accessibility and interaction states
  • Documentation and team handoff

Overview

Field Notes was growing across web, social, and events, but every new touchpoint required a fresh design decision. We built a system that gave the brand structure without making it feel rigid.

Challenge

The team had strong creative instincts but no shared source of truth. Small inconsistencies accumulated, slowing production and making the brand harder to recognize across channels.

Approach

We audited the existing work, defined the foundations, built reusable patterns, and documented the decisions in a practical system designed for everyday use.

Outcome

The team gained a reliable toolkit for making new work faster, with enough flexibility to keep the identity expressive as the community grows.

How we get there

01

Audit

Understand what exists, what is working, and where inconsistency creates drag.

02

Define

Create the foundations and component rules that make decisions easier.

03

Enable

Document the system so designers and engineers can use it with confidence.

Have a good problem to solve?

Tell me what you're building, what feels stuck, and what better could look like. I'll help you find the clearest next step.