Shape’s Lightweight Design System

Shape is a lucid dreaming app for iPhone and iPad, helping people wake up within their dreams.

—

In crafting Shape’s design system, simplicity was at the forefront of my mind. I wanted this build phase to go quickly (1 month), and I knew that a simple set of rules and a limited quiver would allow for the greatest agility and speed of execution. I also knew that Shape’s design needed to evoke the dreamworld — this would be key to inspiring people to really give the app a try.

I settled on a series of gradients that animate so slowly that the changes are almost imperceptible, with a monospace typeface reminiscent of science fiction, and an absence of in-app symbols to further evoke Shape’s dream-like quality.

(This essay displays static gradients — to see the full effect of animated gradients please download Shape.)

Key Screens

Here are the four most important visual experiences within Shape: the introductory tutorial slide, the dream guide audio controls, the dream journal, and an example settings screen.

More than a settings screen, the am-i-dreaming preferences also strengthen the brand and provide practical guidance.

The intro slides are the most important visual experience in the app. Everyone sees these screens, and they are the first point that Shape begins to build trust and inspire dreamers.

The audio player is as simple as possible while providing full control over audio playback. Upon completing one guide, dreamers can press a button to start playing the next.

A dream journal designed for nighttime. The always-dark display is gentle on the eyes. Always-uppercased text encourages dreamers to embrace typos and mistakes and focus on rapidly recording their dreams.

Visual Elements

These components make up the interactive visual elements.

Tab bar devoid of icons to reduce overall symbolism within the Shape app.

Primary button in use throughout the Shape app for performing important actions, making in-app purchases, and enabling key features.

Lucidity toggle showing the inactive and active states. In the dream journal, dream entries can be marked as lucid.

Typeface and Font Styles

The type system is elegant. Shape has 6 sizes/weights/levels-of-emphasis and they all scale with Apple’s Dynamic Type. The typeface is JetBrains Mono, which evokes a dreamlike unreality, further strengthening Shape’s ever-changing motif.

JetBrains Mono in all six of Shape’s font styles.

(While type is generally all uppercased, we do plan for a variant that uses sentence case in some instances to address readability and accessibility.)

Changing Gradients

The gradients are one of my favorite elements of the design system. To accomplish that subtle, slow, almost imperceptible animation, the hue rotates around the 360° spectrum. Within the app, the gradient colors are chosen semi-randomly.

To see the gradients animate, download Shape.

The Role of Symbols

Shape is a lucid dreaming app, and within the dreamworld symbols have this outsize weight. In order to respect that quality and avoid interfering with dreamers’ personal experiences, I opted to minimize symbols within the Shape app. Icons only appear where they are truly supportive.

In software design, I believe that icons are either overused or poorly selected. When I encounter an icon-rich visual experience, I tend to ignore everything. When the icons are instead reserved for the most important actions, my attention automatically goes there. It’s a form of hierarchy.

Shape uses SF symbols and keeps their application sparse.

Regarding SwiftUI

This is my first full SwiftUI app, and I want to acknowledge something fresh and remarkable: for the first time, the design system (its rules, recommendations, and resources) lives almost entirely in the codebase. SwiftUI is semantic in this very human way. So “human” that code composition even follows certain human language patterns like mimicry and imprecise heuristics. It’s ideal for a built-in design system that just works.

The gradients’ hue rotation animation is a standardized view modifier.

Halfway through the build phase, I was surprised to stumble upon a wonderful benefit of such a simple design system: an ease of process that makes everything feel almost already accomplished by the time I sit down to get to work.

That’s the power of simplicity — instead of spending time and effort to decide how to work with the system, the system allows for creations to come forth…not unlike the contents of a dream appearing in the mind.

Thanks for diving in to Shape’s design. My name is Arthur Van Siclen, and I crafted Shape alongside other meditation-inspired apps designed to improve self-awareness, open the mind, and help us achieve our most beautiful aspirations.