Layout

Spark's layout guidelines and templates promote consistency across platforms and screen sizes. Consistent layout principles enable designers and developers to build user-friendly products across various devices and screen sizes.

 

Layout grids originated in early print design to define text and image blocks, and their basic principles still apply to how we organize two-dimensional information on the web today. As the number of devices and screen sizes has grown, grids have become even more essential in maintaining consistency and creating a seamless design experience.

Advanced functionality in Figma, such as styles, sizing constraints, and nested frames, has made grids more flexible and powerful (learn more in the How to Use Grid Styles section).

The following sections include recommendations for designing interfaces that are well-structured and consistent.

 

 

Layout Principles


 

  • Predictability: Create layouts that are easy to understand and navigate, with regions and spatial organization that are predictable and intuitive.
  • Consistency: Use grids, margins, and padding to maintain consistency. This helps ensure that the design is visually appealing and functional.
  • Responsiveness: Design adaptive layouts that respond to various devices and UI elements, ensuring the content is displayed optimally.

 

 

Page Layout Templates Anatomy


 

Basic Layout Template

Layout regions are essential for interactive experiences. They group elements and components that serve a similar purpose and can also contain smaller containers.

The three main regions in a desktop screen layout are the Top App Bar, the Side Navigation Panel, and the Content-Safe Area (Body).

 

Anatomy of the basic layout template

Anatomy of the basic layout template

1. Top App Bar
2. Side Navigation Panel
3. Content-Safe Area (Body)

 

Advanced Layout Template

 

 

Layout Regions


 

Top App Bar

The top app bar displays and groups elements that help users perform primary actions or take action on elements in the content-safe area.

The top app bar region maintains a consistent height of 64px.

Top bar

Top bar

The height of the top bar remains consistent across all states of the side panel menu.

 

Side Navigation Panel

The side navigation region holds two levels of navigational panels that help users navigate between app destinations. It expands when the user clicks the "menu" button on the top app bar.

The navigation region maintains a consistent width of 280px when one navigation level is expanded and 580px when two levels are expanded, and it is completely hidden when collapsed.

Side Navigation Panel

Side Navigation Panel

The side navigation panels can compress the content-safe area when open.

 

Content-Safe Area (Body)

The area used for displaying most of the content uses the layout grids, covering:

  • Vertical and horizontal dimensions that respond to the menu side panel state
  • Columns and gutters
  • Margins

Between 1024px and 1920px desktop screen sizes, the grid layout is fluid, and the content section expands relative to the screen's width; upon reaching the maximum width of 1920px, the content area grid becomes fixed and continues to scale the screen horizontally. At mobile screen sizes, margins are 16px, and the grid is fluid. 

Content-Safe Area

Content-Safe Area

The content-safe area can compress when the side navigation panels open.

 

 

Specs & Variants


 

To design a responsive layout, establish minimum/maximum dimensions for the content-safe area, margins, and scaling behavior. The following sections cover Spark's guide to baseline dimensions and grid behavior recommendations.

 

Sizes

We have templates preset at three different sizes based on popular desktop screen sizes among Genesys users: 

  • Large 1920x1080px
  • Medium 1440x1024px
  • Small 1280x1024px

Recommended grid style and behavior per device or screen size:

Grid Style

Layout Size

Content-Safe Area (px)

Columns

Behavior

Desktop

- Large 1920x1080 px

 

- Medium 1440x1024 px

 

- Small 1280x1024 px

1000+

12

- Under 1920px: Fluid

 

- Above 1920px: Fixed (recommended unless otherwise defined)

Mobile

N/A

320 - 767

4

Fluid

 

Versions

As teams transition versions from legacy v3.0 into Flare v4.0 at different paces, we have templates in both libraries so all teams can align to the same layout standards regardless of their version.

 

 

Composition


 

Responsive grids

Our responsive grids organize content within a content-safe area. Components align with the column grid, ensuring a consistent layout across screen sizes.

 

Spacing and Sizes

All measurements align with the Spark 4px-unit spatial scale to maintain a visually balanced layout. Our components are consistently sized in 4px increments to ensure a rhythmic visual experience throughout each screen.

 

Background Color

Lavender Haze 100 is Flare's standard surface color for content backgrounds. It provides a subtle contrast against the Global Navigation top bar's white surface and other components with a white base, such as inputs, cards, side sheets, etc.