As demonstrated in another case study, Webber is a design system I built from scratch following Figma's introduction of variable features in July 2023. This design system employs a multi-variable collection approach, enabling seamless adaptation across various digital products—websites, applications, and web apps—by simply toggling variable modes for font styles, color schemes, element styles, and even language. All component configurations are consolidated within a single collection, facilitating easy adjustments to any part of the included web elements.

Since it was not designed under the Jejak Creativate brand, I named this design system Webber. The name 'Webber' is a play on 'Weber's Line,' an imaginary boundary separating the central and eastern Indonesian fauna. The unique biodiversity of central Indonesia stems from its historical isolation, separated by straits and seas, resulting in flora and fauna distinct from both western and eastern regions.

After settling on the name, the design process began. Initially, I created hand-drawn sketches on white A4 paper with a 2B pencil (unfortunately, these sketches are now lost). Following the sketches, I developed the logo using the golden ratio principle. The color scheme collection features gradient modes, each named after Indonesian locations with similar color tones: Pink Beach Komodo, Deep Sea Blue Wakatobi, Blue Sky Toraja, and Grey Ashes Tambora.

Got a vision for your next project? ✦ Book a Call with Me ↗