What is the golden ratio + how can it elevate your designs?

What do the Great Pyramid of Giza and the Pepsi logo have in common? No, this isn’t the setup for a bad joke; it’s your introduction to the timeless allure of the golden ratio in design.

Throughout history, the golden ratio has been used to create a variety of beautiful works you’re probably already familiar with. In the Renaissance era, for example, it became a proper part of design theory, influencing countless works of art and architecture.

Today, the golden ratio serves as a guide to achieve balance and cohesion in contemporary design. Designers can use it to determine optimal placement of elements and ensure each piece relates proportionally to the others in a composition.

Read on to learn:

• What the golden ratio is
• Examples of the golden ratio in different applications
• How and when to use the golden ratio in your own design

Golden ratio definition

What is the golden ratio? The magic number, approximately 1:1.618, is a mathematical proportion that holds the key to aesthetic harmony.

The golden ratio (Φ) can be expressed as:

Φ = 1.618 = a/b = (a + b)/a

This ratio, sometimes represented by the Greek letter phi (Φ), is observed when certain conditions are met:

1. A line is split into two parts.
2. The ratio of the whole line to the longer segment must be 1.618.
3. The ratio of the longer segment to the shorter one must also be 1.618.

This principle has close ties to the Fibonacci sequence, where each number in a sequence is the sum of the two preceding ones and, as the numbers increase, the ratio between them approaches 1.618.

The origin of the golden ratio can be traced back to ancient Greek mathematicians Euclid and Pythagoras. However, some evidence suggests that the ratio was used even earlier in Egyptian and Mesopotamian architecture. Renaissance painters further explored the concept of the golden ratio in art and design. This included Leonardo da Vinci, who incorporated it into masterpieces like The Last Supper and The Annunciation.

To break it down further, the golden ratio can be applied in three different ways: an arrangement of rectangles, an arrangement of circles, or a spiral.

Rectangles

One basic application of the golden ratio in design is the golden rectangle grid. This layout maintains the 1:1.618 proportion through six rectangular compartments, often used as a foundational structure for compositions.

The consistent modular structure means the shape can be divided into infinitely smaller pieces. It’s also the basis for the circle and spiral methods.

Circles

Using the golden rectangle grid as a starting point, you can draw circles inside each rectangle segment to maintain proportional harmony across curvier design elements. The diameter of each circle should match the side lengths of its corresponding outer square.

These golden circles can also be used to construct a separate bullseye-like formation. Even when rearranged and overlapped, as seen in the logo examples below, the golden circles act as placement guides to help maintain design consistency and establish proportional spacing between elements.

Spiral

Another popular golden ratio layout is a spiral that grows outward while maintaining a consistent 1:1.618 proportion. You can create this logarithmic spiral by drawing circular arcs through the series of golden rectangles, each one smaller than the last.

Golden spirals guide a viewer’s eye across a composition, creating organic movement and visual flow. This draws attention to focal points in a dynamic yet natural way.

Golden ratio examples

Examples of the golden ratio are all around you. Chances are, you’ll see several in daily life.

Golden ratio in Web design

Golden spirals help define website layouts by organizing content in a way that draws users toward important areas like calls to action. Golden ratio grids can help Web designers define button placements, column widths, and harmonious screen layouts.

Golden ratio in logo design

The golden ratio can be a great starting point when you’re interested in learning how to design a logo. In fact, many famous types of logos are built using a set of overlapping golden circles to establish a natural balance.

The golden rectangle also ensures that as a design scales up or down, it maintains proportional consistency across different screen sizes and print formats.

Golden ratio in art and architecture

From the Taj Mahal to the Mona Lisa, the golden ratio creates harmonious proportions in many iconic works of art. In architecture, structures can incorporate the golden ratio into their facades and columns. Visual artists use the golden ratio to divide their canvas, guide the viewer’s eye, position key focal points, and create balance.

Golden ratio in nature

Did you know the golden ratio equation is found in naturally occurring patterns, too? From the spirals of galaxies and hurricanes to the arrangement of leaves on a stem and the whorls of nautilus shells, you can observe this design everywhere.

How to use the golden ratio in your design

When applied to design elements such as layout grids, typography, and logo proportions, the golden ratio helps guide the viewer’s eye naturally, creating a sense of harmony and visual stability.

Want to try it out for yourself? You can manually integrate the golden ratio into your Figma workflow using grids and guides. Simply follow these steps:

Method 1: Create a golden rectangle in Figma

To manually create a golden rectangle:

1. Open a new Figma file and select the Frame tool (F) to create your main layout frame.
2. Set the width and height to your desired dimensions, but make sure the ratio between them is 1:1.618 (width = 1,000px, height = 618px).
3. Duplicate the rectangle (Command + D on Mac or Control + D on Windows) and scale it down proportionally using the golden ratio. Calculate the new dimensions by dividing the width or height by 1.618.
4. Continue duplicating and scaling using this process to form a nested series of golden rectangles.

Method 2: Add golden ratio guides in Figma

To align your design elements along golden proportions, you can also set up golden ratio guides:

1. Select your main frame and click View > Rulers (Shift + R) to enable rulers.
2. Drag guides from the rulers to match the key divisions of your golden rectangles.
3. Use numeric positioning. For example, if your frame is 1,000px wide, place guides at:
   • 618px (1,000 / 1.618)
   • 382px (618 / 1.618)
   • 236px (382 / 1.618)

Repeat this process for the vertical guides, ensuring proportional alignment.

Method 3: Use golden ratio grids for layouts

To create a golden ratio grid for your project:

1. Select your main frame and go to Layout Grid settings (Shift + G).
2. Add a grid with column widths based on golden ratio divisions (1,000px / 1.618 = 618px, then 618px / 1.618 = 382px, etc.).
3. Set up rows using the same proportions, ensuring a balanced vertical structure.
4. Adjust margins and padding so elements align naturally to golden proportions.

Need some extra guidance? Grab a golden ratio template from the Figma Community or use a plugin to align and resize your design elements.

Featured Figma Community design files:

• Golden Ratio by Miggi
• Grid Golden by viktoria.design
• The Golden Ratio by Nouri Islam
• Golden Ratio by Qaisha

When to use the golden ratio

The golden ratio works best in settings where proportion, balance, and visual flow are key. Below are some areas where applying the golden ratio can enhance your design:

• Logos and branding. By anchoring elements around rectangles or circles, the golden ratio helps create aesthetically balanced logos.
• Photo and video composition. The golden ratio helps frame subjects in an intuitive way, leading the eye naturally through the image.
• Typography. For visually pleasing text, let the golden ratio steer your font size hierarchy and leading.
• Web and UI Design. The golden ratio can guide button placements and layout grids to improve user experience and encourage intuitive navigation.
• Architectural and interior design. When planning physical spaces, the golden ratio ensures structural harmony and balance.
• Product and packaging design. The golden ratio aligns key elements to create a balanced product presentation.

Avoid strictly following the golden ratio when working with abstract or extremely minimalist designs or when it threatens the usability or readability of your design. Always prioritize practical design needs and accessibility in your UI/UX projects.

Using the golden ratio with other design principles

The golden ratio works best alongside other design principles rather than in isolation. Below are some key principles that complement the golden ratio and how they integrate effectively:

• Rule of thirds. The rule of thirds divides a composition into a three-by-three grid, while the golden ratio divides it based on 1:1.618 proportions. Place your focal points where the golden ratio intersects with rule-of-thirds gridlines for optimal balance.
• Grid systems. Many grid-based layouts use column-based structures that can align with golden ratio proportions. Use golden rectangles to define column widths, ensuring a visually harmonious layout.
• Hierarchy and spacing. The golden ratio naturally defines size relationships between elements to create visual hierarchy. Apply phi scaling (1.618) to font sizes, margins, and element spacing for consistency.
• Symmetry. Symmetry enhances order, while golden ratio layouts provide structured asymmetry for visual interest. Try using symmetry for your main layout and the golden ratio for the details.

By combining the golden ratio with other principles, designers can boost visual appeal while maintaining a structured foundation for their sketches and layouts.

Bring balance to your designs with Figma

From ancient temples to mobile app logos, the golden ratio remains one of the most powerful tools for crafting effortlessly appealing iconography.

By understanding and applying the golden ratio in design, you can create visuals that are as harmonious as they are memorable—and Figma can help. Here’s how:

• Explore helpful golden ratio plugins.
• Browse templates and examples of the golden ratio in action from the Figma Community.
• If you’re planning a website, start with Figma’s online wireframing tool and pre-made wireframe kit.