> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding & Layout

> Customize Web SDK UI appearance with branding guidelines and layout options

<div className="quick-summary-wrapper">
  <div className="quick-summary-header">
    <span className="quick-summary-icon" aria-hidden="true" />

    <span className="quick-summary-title">Quick summary</span>
  </div>

  <div className="quick-summary-content">
    The Suki SDK comes with an out-of-the-box UI component that automatically manages user states, recording flows, and error handling. The default recommended dimensions for optimal display are 360 pixels in width and 912 pixels in height.

    <br />

    <br />

    Widths exceeding 360 pixels are acceptable, and the height can be adjusted to match the enclosing window's dimensions.
  </div>

  <div className="quick-summary-footer">
    <span className="quick-summary-footer-icon" aria-hidden="true" />

    <span className="quick-summary-footer-text">Last updated:</span>
    <span className="quick-summary-footer-date">June 2026</span>
  </div>
</div>

Customize the Suki SDK UI appearance with branding guidelines and layout options.

<img src="https://mintcdn.com/suki-1e08f176/8ZbqOHQ5xwHlf7Ms/web-sdk/assets/branding-1.webp?fit=max&auto=format&n=8ZbqOHQ5xwHlf7Ms&q=85&s=eabac52e99360b96bf64559ce29e7f83" alt="branding" width="3300" height="1766" data-path="web-sdk/assets/branding-1.webp" />

## Spacing and layout guidelines

The Suki SDK comes with an out-of-the-box UI component that will automatically manage user states, recording flows and error handling, allowing you to provide your users with a seamless experience.

Below are a set of recommended guidelines on the width and height of the SDK UI when embedding it in your application.

<img src="https://mintcdn.com/suki-1e08f176/8ZbqOHQ5xwHlf7Ms/web-sdk/assets/branding-2.webp?fit=max&auto=format&n=8ZbqOHQ5xwHlf7Ms&q=85&s=ca468b83a08c3057feef449cc5ca3037" alt="spacing" width="3300" height="1766" data-path="web-sdk/assets/branding-2.webp" />

The default recommended dimensions for optimal display are **360 pixels** in width and **912 pixels** in height. However, widths exceeding **360 pixels** are acceptable, and the height can be adjusted to match the enclosing window's dimensions.