A hidden math formula behind the apps you love: how 1.618 makes your UI look better — even if your users can’t explain why.

Image created by author with using Remarker AI

We are actually more mobile app users than developers. Every day, we open many screens, move through menus, sometimes leave quickly, and sometimes spend more time on a screen. And sometimes, right at that moment, we think without even noticing:

“This design is so simple and professional.”

But why? Is it the color palette? The typography? The animations? Maybe all of them. But often, there are also things that look nice to the eye: Ratios and symmetry.

There is a special ratio that sits at the center of what we call beauty: 1.618. In math, it’s called phi (φ), and designers call it the golden ratio. As software developers, we use it many times without even knowing. But when we start to use it on purpose, our UI/UX level gets much better.

And the best part is this:
If you ever look at an app and ask, “Why does this look so nice?”, it shows that you are growing not just as a developer, but also as a craftsman. Because being curious and making a connection between beauty and logic means you think differently from a regular coder.

The spacing we use in modern UI components, card placements, text sizes, and even constraint-based layouts — all carry the soul of the golden ratio. Whether you use Compose or XML, when you follow this ratio, you can build designs that don’t tire the user and look nice to the eye.

In this article, I’ll start with a short history of the golden ratio and then show how it’s used in mobile app designs with examples. Because as developers, we need to understand not only what works, but also what looks good.

The Short but Interesting History of the Golden Ratio

The golden ratio, which is about 1.618, is not just a number in math. It’s more like a beauty guide through human history. It wasn’t discovered at once; in fact, it was noticed in different places and at different times — as a natural way to measure beauty.

Image created by author

A Journey Starting from Ancient Egypt

One of the first known examples of this ratio is the Great Pyramid of Giza. The ratio between the height of the pyramid and half of its base is close to 1.618.

People still argue whether this was done on purpose or just a lucky result. Some scientists even say, “Not everything that looks nice has to be golden ratio, okay?” But still, the fact that one of the oldest man-made structures is this close to the golden ratio is pretty impressive.

Image created by author.

Geometric Depth in Ancient Greece

The ones who brought the golden ratio into philosophy and math were the Pythagoreans and Euclid. The pentagram used by the Pythagoreans naturally includes the golden ratio in its diagonals.

Image created by author

Euclid, around 300 BC, explained this ratio in his geometry book called Elements. He called it the “extreme and mean ratio.”

It means: divide a line at a point where the ratio of the whole line to the bigger part is the same as the ratio of the bigger part to the smaller part.

This idea is the base of the formula we now call the golden ratio.

Image by Leonardo da Vinci

Becoming the “Divine Ratio” in the Renaissance

The golden ratio started to feel almost holy during the Renaissance. In the 1490s, Italian mathematician Luca Pacioli wrote a book called De Divina Proportione, where he described the golden ratio as the math behind divine order.

The drawings in the book were made by his close friend, Leonardo da Vinci. Da Vinci didn’t just use this ratio in his sketches — he also used it on purpose in his famous works like the Vitruvian Man, The Last Supper, and Mona Lisa. (I have to admit — I used to think Da Vinci was the one who discovered the golden ratio…)

Images created by Leonardo da Vinci and author draw the golden ratio lines.

From this point on, the golden ratio became more than just a math idea — it turned into a guide for beauty. People started to notice that many things that “look nice” in painting, sculpture, architecture, and even music were shaped by this ratio.

Today, the golden ratio is also one of the building blocks of modern digital design. And it’s not only used by artists — we, as developers, use it too, often without even knowing.

The Golden Ratio Is Everywhere: The Hidden Order You Secretly Love

Looking for the golden ratio only in pyramids or old geometric drawings would be a big miss. This ratio shows up in nature, in art, and even when we look at a human face. When used on purpose, it’s often the secret behind what we call “beautiful.”

For example: seashells, the seed patterns of sunflowers, pinecones, even the shape of a pineapple — all of them grow and form through the golden ratio using the Fibonacci sequence. Each seed is placed at about a 137.5° angle from the one before it — this is called the golden angle. Even plants use this ratio to get the most sunlight they can.

Image created by author.

In art history, the golden ratio shows up in many great works — from the Parthenon to Notre Dame Cathedral, from Michelangelo to Da Vinci.
One of the most iconic examples is Leonardo’s drawing of the Vitruvian Man, which shows how the human body follows this special ratio.

Image is taken from an article

The human body is almost a perfect guide when it comes to symmetry and ratio. The proportions of the face, the joints of the fingers, even the ratio between your belly button and your full height — all are quite close to the golden ratio.

The “rule of thirds” used in photography is actually a simpler version of the golden ratio.

When we see apps, websites, or ads that look really professional, it’s usually not just luck. The golden ratio works like a compass for designers. But this compass doesn’t belong only to artists anymore. A developer can also understand this visual language — and even code it.

The Golden Ratio Reflected in Modern UI Kits

The golden ratio may not be clearly written in the UI kits (frameworks) we use today, but it quietly works in the background — behind the things they describe as “aesthetic” or well-designed.

Image is taken from an article

Image by Author.

Material Design & Ant Design

Let’s look at the spacing values used in Google’s Material Design system:
8dp, 16dp, 24dp, 40dp, 64dp… These numbers are all multiples of the Fibonacci sequence (1, 2, 3, 5, 8, 13…).
Because of this, the spaces between elements on the screen feel natural and nice to the human eye. Even if we don’t notice it, this spacing system creates a visual structure that fits the golden ratio.

• At the edges: 24dp
• Between content: 16dp
• Between sections: 40dp

Prepared by author with using DataWrapper.

Just like that, UI kits like Ant Design and Quasar also build their component sizes and alignment logic using these kinds of proportional systems. The separation between the sidebar and content area often follows ratios like 38/62 — which are close to the golden ratio.

Golden Ratio in Popular Apps

The golden ratio doesn’t only appear in design systems — it also shows up in the apps we all use every day:

• Instagram: On the profile page, the placement of the square (or rectangular) photo and username creates a layout that feels like the golden ratio. The way “stories” and “highlights” are placed also follows this visual balance.
• Spotify: On playlist covers and album detail pages, there’s usually a large image on top, and the content below it is placed in a way that follows about a 1.6x ratio. The spacing between cards and the font sizes are also close to the classic 1.618 proportion.
• Apple: On product pages, the image + text areas look like they were designed using a golden ratio ruler. A big, bold image on top, and a smaller, focused text area below. This pattern shows up from iPhone launch pages to App Store detail screens.

Of course, these apps don’t say “hey, we used the golden ratio.” But in the end, they feel clean and powerful to the user.

Because the golden ratio passed the test of nature long before it passed any user test. And anything that fits nature well, also feels natural to our eyes.

The Developer’s Eye Test: Why Do Some Designs Feel Nicer?

As developers, we care about making the app work well, load fast, and not crash — and yes, those are top priorities. But for the user, the top priority is often something else: how the app feels at first glance. And that feeling mostly comes from the visual balance on the screen — in other words, from the ratios.

If you leave 23dp space between two cards instead of 24dp, users won’t really notice (well… some people might, you’d be surprised what eyes can catch). But why do users stay longer in some apps, and close others right away? One reason is the visual balance you apply in your design — how well it follows the natural rhythm of the eye.

And that leads us to one simple truth:

An interface that doesn’t pass the user’s eye test can still fail emotionally, even if it’s technically perfect.

Spacing, Margin, and Padding: The Eye’s Geometric Instinct

In modern UI kits, spacing values aren’t random — they are chosen based on ratios the eye is used to seeing. For example, if there’s a space between an image and its title below that follows a 1.6x ratio, the user sees it as clean and well-organized.

Now imagine the opposite: all margin values are equal, everything is centered, but the spacing was done “just by guessing.” The eye quickly feels something is off. That strange feeling of “Hmm… something’s not right, maybe move it a bit to the side…” — that’s exactly where it starts.

Why Is It Important for Developers to Use the Golden Ratio?

• Because today, developers are not only building things that work — they also need to build things that feel good.
• Because spacing, layout, and padding decisions are no longer just the designer’s job — they are your job too. You’re the one who writes those values from the design tool into the code.
• Because in modern UI kits, using these ratios is actually very easy.

So when you write layout_constraintDimensionRatio="1.618" in ConstraintLayout, or use aspectRatio(1.618f) in Compose, you’re not just adding visual beauty — you’re improving the user experience.

Coding the Golden Ratio with Compose and ConstraintLayout

Now we know — the golden ratio isn’t just for artists. It’s also a practical rule that we, as developers, can use when designing interfaces. Let’s try a few examples using Android.

📐 Proportional Image Area:

 

Box(
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1.618f)
) {
    Image(
        painter = painterResource(id = R.drawable.banner),
        contentDescription = null,
        contentScale = ContentScale.Crop
    )
}

 

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,1.618"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

 

This makes sure the image follows a golden ratio height based on its width, which feels more natural and balanced on the screen.

📏 Typography Close to the Golden Ratio:

In UI design, using font sizes with a 1.6x ratio between text levels helps create a clear and pleasing visual hierarchy. Here’s how you can do it:

Column {
    Text(
        text = "Başlık",
        fontSize = 32.sp
    )
    Text(
        text = "Alt açıklama",
        fontSize = (32 / 1.618).sp // ≈ 20sp
    )
}

 

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Başlık"
    android:textSize="32sp"
    android:textStyle="bold"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:paddingTop="16dp" />

<TextView
    android:id="@+id/subtitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Alt açıklama metni"
    android:textSize="20sp" 
    app:layout_constraintTop_toBottomOf="@id/title"
    app:layout_constraintStart_toStartOf="@id/title"
    android:paddingTop="8dp" />

 

32 / 1.618 ≈ 19.78

You don’t have to use these exact numbers every time — but keeping this relative proportion helps the text flow better visually. It creates a sense of balance that the eye naturally likes.

🧱 Dividing Layouts with the Golden Ratio

You can use the golden ratio to split screen space in a way that feels right to the user. A common use is separating a sidebar and content area, or header and body.

Row(modifier = Modifier.fillMaxWidth()) {
    Box(
        modifier = Modifier
            .weight(0.618f)
            .background(Color.LightGray)
    )
    Box(
        modifier = Modifier
            .weight(0.382f)
            .background(Color.DarkGray)
    )
}

 

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/goldenGuideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.618"/>

 

Conclusion: Where Code Meets Aesthetics

The golden ratio is a quiet power — something the user never sees, but always feels. This ratio, which started in ancient times, is now not just in art, but also in the code you write line by line.

And remember: Users often don’t know why they like something. But if you, as a developer, know it — that’s what makes a difference.

A beautiful design is not an accident — it’s a mathematical choice. And you can make that choice with just one line: aspectRatio(1.618f)

If you found this article helpful, feel free to clap or leave a comment. I share more content about Android, UI design, and developer insights.

See you at more article:

This article was previously published on proandroiddev.com.