Layout Library

Create a hero section whose backdrop is a large gradient area filling the section's
background. Center a heading, one supporting line, and a CTA button group
in the middle of that gradient area. Keep a slim navigation bar above the
hero. On narrow screens, keep the gradient full-bleed and let the centered
copy block use the full width.

Create a hero section dominated by a single oversized headline that fills
most of the section's height. Add only one short supporting line and one
CTA below it, both kept small relative to the headline. Keep the
navigation bar minimal above. On narrow screens, reduce the headline's
size but keep it as the section's dominant element.

Create a hero section built around a centered heading, one supporting sentence, and
a row of CTA buttons, all center-aligned near the top of the section. Below
that copy, place one large screenshot or product visual spanning most of
the section's width. Keep a slim navigation bar above the hero. On narrow
screens, shrink the screenshot but keep it directly below the copy in the
same order.

Create a hero section anchored by a centered heading, one supporting line, and a
CTA button group in the middle. Place two or three product screenshot
cards around that central copy, offsetting them at different heights so
they read as floating rather than lined up in a grid. Keep a slim
navigation bar above the hero. On narrow screens, collapse the floating
cards behind or below the centered copy.

Create a hero section split into two halves. On the left, stack a large
heading, one supporting sentence, and a row of two buttons (one primary, one
quiet). On the right, place a single product visual that bleeds toward the
outer edge of the viewport. Keep a slim navigation bar above the hero that
stays fixed while scrolling. On narrow screens, stack the copy above the
visual instead of side by side.

Create a hero section led by a centered heading and one supporting line,
followed directly by a single-row form: one email input placed beside one
submit button, kept inline rather than as a separate call to action. On
narrow screens, stack the input above the button instead of placing them
side by side.

Create a hero section split into two halves. On one side, stack a heading,
one supporting line, and a CTA button group. On the other side, place a
terminal or code-editor panel as the visual, with a small header strip
above its lines of code so it reads as a window. On narrow screens, stack
the terminal panel below the copy.

Create a hero section where a looping video or animated clip fills the
entire background of the section. Layer a centered heading, one
supporting line, and a CTA button group on top of that video, keeping
enough contrast that the text stays readable. Keep the navigation bar
transparent as it sits over this section. On narrow screens, keep the
video as the full background and let the text block use the full width.

Create a navigation bar fixed to the bottom edge of the viewport, made of
four or five equally sized tabs in a row. Give each tab a small icon with
a short label stacked beneath it, and mark the active tab distinctly from
the rest. Keep this bar in place while the page content scrolls above it.

Build a horizontal nav bar. Center the logo in the middle, and place two
groups of navigation links, one flanking each side, sized to roughly
equal width. Keep the
whole bar a single fixed-height row. On narrow screens, collapse both
link groups behind a menu icon and keep the centered logo visible.

Build a nav bar whose centerpiece is a wide, prominent search or command
input, placed in the middle of the row. Keep only a couple of links or
icons on either
side of that input, so the search field reads as the dominant element in
the bar. On narrow screens, collapse the side links and let the search
input take the full width.

Build a nav bar shaped as a short, centered pill that floats clear of the
page's upper boundary, leaving visible space around it on every side.
Keep only the logo, a couple of links, and one CTA inside the pill. On
narrow screens, shrink the pill down to just the logo and a menu icon.

Create a horizontal nav bar with a row of top-level links. Below one of
those links, place a full-width panel holding several columns of grouped
sub-links plus one small visual block. On narrow screens, collapse the
whole structure into a single expandable menu.

Build a horizontal nav bar. Anchor the logo to the left edge, run a row
of nav links across the middle-to-right area, and end with a single
prominent call-to-action button hugging the right edge. Keep the whole
bar a single fixed-height row. On narrow screens,
collapse the links behind a menu icon and keep the logo and CTA visible.

Create a vertical navigation sidebar fixed to one side of the page. Place
the logo at the top, a stacked list of navigation links below it, and a
user or account section anchored to the bottom of the sidebar. Let the
main page content fill the remaining width beside it. On narrow screens,
collapse the sidebar into a slide-out panel.

Create a nav bar that sits directly on top of the hero section with no
background of its own, so the hero visual shows through behind it.
Include the logo, links, and a CTA in that overlay row, with the hero's
own heading and visual immediately beneath it. On scroll, give that same
nav bar a solid background so it stays legible against page content.

Create a features section as a three-column grid of equal-width cards. Start
with a centered heading above the grid. In each card, stack an icon, a short
feature title, and one line of supporting copy, top to bottom. Repeat the
same card shape across all three columns so the grid reads as a uniform
set. On narrow screens, drop to a single column with the cards stacked.

Create a features section as a vertical list of collapsible rows, one per
feature. Each closed row shows only a title and an expand control. Open the
first row by default: below its title, show a paragraph of detail and a
small supporting visual. The remaining rows stay closed, showing just their
titles stacked below. On narrow screens, keep the same single-column list
and let row width fill the screen.

Create a features section as a stack of full-width rows, one per feature.
Each row splits into a text half, holding a heading and a short paragraph,
and a visual half, holding a screenshot placeholder. On the first row, put
the text on the left and the visual on the right; on the next row, swap
them so the visual is on the left; keep alternating down the stack. On
narrow screens, every row becomes text above visual, in that order
regardless of which side it was on.

Create a features section as a two-panel side-by-side comparison. Label the
left panel as the plain, unimproved state and give it a muted visual with a
short caption. Label the right panel as the state with the product applied,
giving it a stronger visual and a highlighted caption so the contrast
between the two is immediate. On narrow screens, stack the left panel above
the right panel.

Create a features section as an asymmetric bento grid. Start with a short
centered heading. Below it, lay out five cards in an uneven grid: one large
featured card spanning two thirds of the width and the full height of the
left side, holding a heading, two lines of copy, and a product visual; on the
right third, stack two smaller cards, each with an icon and one line. Under
those, run a bottom row of two medium cards, the second one twice as wide as
the first. On narrow screens, everything becomes a single column with the
featured card first.

Create a features section as a dense wall of small identical tiles, five or
more per row. Each tile holds only an icon and a short label, with no
further copy. Keep every tile the same size so the wall reads as a single
even texture rather than a set of distinct cards. On narrow screens, reduce
the number of tiles per row while keeping the same tile shape.

Create a features section split into two vertical halves. Pin a visual
placeholder in the left half so it stays in view. In the right half, stack
a tall column of feature entries, each with a short title and one line of
copy; mark the entry nearest the top as the active one. As the page
scrolls, the active entry changes and the pinned visual updates to match.
On narrow screens, drop the pinned behavior: show one visual per entry,
stacked in a single column.

Create a features section built around a row of tabs, one per feature, with
the current tab visually marked as selected. Below the tabs, show one large
panel for the active feature only, holding a short description beside a
visual placeholder. Selecting a different tab
replaces the panel's content in place. On narrow screens, let the tab row
scroll horizontally and stack the description above the visual in the
panel.

Create a pricing section showing three plan cards side by side. Give each card
a plan name, a price, a short feature list, and a call-to-action button.
Raise the middle card slightly above the other two and mark it as the
recommended plan, with the outer two cards kept at the same lower height.
On narrow screens, stack the three cards in a single column with the
recommended card first.

Build the pricing section as one wide table. Give each plan its own column with the
plan name and price in the header row. List every feature down the left
column, with a rule separating each row from the next. In each plan's
column, mark whether that row's feature is included. Highlight one plan's
column to draw the eye to the recommended tier. On narrow screens, let the
table scroll horizontally with the feature column pinned in place.

Lay the pricing section out as a tile grid of one-time credit bundles
instead of subscription tiers. Give each tile a credit amount and its price, keeping
every tile the same shape. Mark one tile with a small badge calling it out
as the best-value pack, and give that tile a highlighted border so it
stands out from the rest of the grid. On narrow screens, reduce the grid to
two tiles per row.

Create a pricing section as two panels side by side, one for a free plan
and one for a paid plan. Keep the free panel plain, with a short feature
list and a quiet outline. Give the paid panel a stronger visual weight,
with a larger price, a fuller feature list, and a filled call-to-action
button, so the paid panel clearly outranks the free one. On narrow screens,
stack the panels with the paid panel first.

Create a pricing section headed by a two-way billing toggle centered above the
plan cards, labeled for monthly and annual billing, with a small savings
badge next to the annual option. Below the toggle, lay out the plan cards
as usual; switching the toggle updates the price shown in every card
together. On narrow screens, keep the toggle centered above the stacked
cards.

Create a pricing section built around a single large card centered on the
page. Inside it, stack a plan name, a large price, a full list of included
features, and a prominent call-to-action button. Give the card generous
internal spacing and an outlined border so it stands apart from the page
background rather than sitting among other cards. On narrow screens, let
the card fill the width with the same stacked order.

Build the pricing section as a vertical stack of full-width plan cards, one
per tier, with no side-by-side comparison at any width. Give each card its
own complete feature list and call-to-action so it can be read on its own
without scanning across other cards. Mark the recommended tier's card with
a highlighted border. Keep this same stacked, full-width arrangement at
every screen size rather than switching to columns on wider screens.

Create a pricing section driven by a horizontal slider near the top for choosing
a usage amount, such as seats or requests, with a handle marking the
current position. Below the slider, show a large price figure that reflects
the chosen amount, plus a short line describing what is included at that
level. On narrow screens, keep the slider full width with the price
directly beneath it.

Build a CTA banner where a heading and one line of supporting copy sit
above a pair of buttons positioned next to each other. Give one button
strong visual weight and let the other read as a quieter, secondary
option. On narrow screens, stack the two buttons full-width instead of
placing them side by side.

Create a CTA banner that spans the entire width of the viewport with no
side margins. Center a heading, one short line of supporting copy, and a
single button along the middle of the section, stacked in that order.
Leave generous space above and below the centered content so the band
reads as one deliberate statement. On narrow screens, keep everything
centered but tighten the vertical spacing.

Build a CTA banner where a heading and a short subheading sit above an
email field paired with a submit button on the same row. Keep the
field and the button at matching height. On narrow screens, stack the
field above the button instead of placing them side by side.

Fill a CTA banner's section with a repeating background texture, such
as a fine dot grid, then center a heading, one line of supporting copy,
and a single button on top of that textured field. On narrow screens,
keep the texture but reduce the vertical spacing around the centered
content.

Frame the CTA as a bordered card inset from the page edges rather than
a full-width band. Inside the card, place a heading and one line of
supporting copy on one side, and align a single button to the opposite
side at the same vertical center. On narrow screens, stack the button
beneath the copy instead of beside it.

Create a CTA as a bar pinned along the lower edge of the browser window,
layered above the page content rather than sitting inside its normal
flow. Place a short message on one side of the bar, a single action
button next to it, and a small dismiss control at the far end. Keep the
bar visible while the rest of the page scrolls beneath it. On narrow
screens, let the message wrap to a second line before the button drops
below it.

Create a CTA banner that opens with a short customer quote and a small
avatar mark, placed ahead of the heading and button below it. Let the
quote read as evidence backing the action rather than the main focus.
On narrow screens, keep the quote above the heading but shrink it
relative to the button beneath.

Create a stats bar with three large numbers in a row, each paired with
a short label beneath it. Have the numbers animate by counting up from
zero once the section scrolls into the viewport, settling on their
final value. On narrow screens, stack the three stats vertically
instead of side by side.

Present each stat inside its own bordered card, arranged in a single
row. Inside each card, place the number above its label with
consistent padding around both, and give every card equal width and
even spacing between them. On narrow screens, wrap the cards into two
per row instead of four across.

Lay out four equal columns of stats in one horizontal band. In each
column, place one large number above a short label describing it, with
the number carrying noticeably more visual weight than the label. On
narrow screens, wrap the row into two columns per line instead of four
across.

Create a stats bar with a row of stat blocks, each combining a small
icon with a number and a short label. Place the icon beside its number
rather than above it. On narrow screens, stack the blocks into a single
column, each keeping its icon next to the stat.

Stack two bands into one combined section: small customer or partner
logos on the upper band, and key stats with their numbers and labels
on the band beneath it. Give the stats more visual weight than the
logo row. On narrow screens, let the logo row wrap onto multiple lines
while the stats stay on a single row.

Create a stats bar set against a full-width background image or
gradient, with the stats displayed in a band that stays legible
against that background. Give each stat enough contrast to read
clearly over the image beneath it. On narrow screens, keep the
background but let the stats wrap onto two rows if needed.

Arrange stats as a vertical list, suited to a narrow column or sidebar
rather than a wide row. Stack each stat directly under the previous
one, pairing its number with a label on the same line, and run a thin
rule between consecutive stats. On wide screens this can sit as a
narrow column beside other content instead of spanning the full width.

Create a testimonials section as three equal-width cards in a row. Start
with a short centered heading above the row. In each card, place a round
photo, the person's name and role on one line beneath it, and a short
quote under that. Keep all three cards the same height regardless of
quote length. On narrow screens, stack the cards into a single column.

Create a testimonials section as a carousel showing one testimonial at a
time, centered in the frame. Place a left and right arrow at the outer
edges to move between testimonials, and a row of small dots beneath the
quote marking position, each one clickable to jump straight to that
testimonial. Advance automatically after a pause, and reset the timer
whenever the visitor interacts.

Create a logo cloud section with a short centered heading above a single
row of partner or customer logos. Space the logos evenly along the row
and give them equal visual weight so none dominates. On narrow screens,
wrap the row onto two lines instead of shrinking the marks.

Create a testimonials section as one continuous horizontal strip of small
tiles that scrolls sideways on its own, looping endlessly. Fill the strip
with identical tiles, each holding a short quote and a name, running edge
to edge past the viewport so the motion never visibly restarts. Pause the
scroll while the pointer hovers over the strip, and place a short heading
above it.

Create a testimonials section as a masonry grid spanning three columns.
Vary each card's height so quotes of different lengths pack into the
columns without leaving matched gaps, the way a Pinterest-style board
does. Give every card a quote and a short attribution line beneath it. On
narrow screens, collapse the grid to a single column, keeping the
original top-to-bottom order.

Create a testimonials section built around a single large featured quote,
centered on the page with generous space around it so nothing competes
with it. Beneath the quote, place the speaker's photo, name, role, and
their company's logo mark in one row. Keep that row small relative to the
quote so the quote stays the clear focal point.

Build the testimonials section as a dense wall of small cards that read
like social media posts. In each card, place a round avatar and handle on one line with a
timestamp beside it, then two or three lines of quoted text beneath.
Give every card the same header shape so the wall reads as one
consistent feed. On narrow screens, stack the cards into a single
column.

Create a testimonials section as a grid of video thumbnails, three per
row. Give each tile the same aspect ratio and a play control centered
over it, with the speaker's name and company in a short caption beneath
the frame. Keep the grid uniform so every tile reads the same size. On
narrow screens, drop to two tiles per row.

Create an FAQ section as one column of stacked question rows. Each row
shows the question text with a small toggle mark on the right; clicking
it expands the row to reveal the answer directly beneath, pushing the
rows below it down the page. Show one row already open so the expanded
state is visible, and close it again when a different row opens. Place a
heading above the list.

Create an FAQ section organized by a row of category tabs above the question
list. Highlight the active tab, and swap the list beneath it to show
only the questions belonging to that category when a different tab is
selected. Keep the tab row and the list at the same width so switching
categories never shifts the surrounding layout.

Present the FAQ as a chat thread. Show each question as a
bubble aligned to one side of the column, with its answer as a bubble
aligned to the opposite side directly beneath it, alternating down the
page like a conversation. Keep every bubble narrower than the full
column width so the alternating alignment is easy to follow. Place a
heading above the thread.

Create an FAQ section topped by a search field, above the question
list. As the visitor types, filter the list live to only the matching
questions, and show a plain message when nothing matches. Keep the rows
beneath the search field simple, each one expandable to its answer, the
same as any other accordion row.

Create an FAQ section as an accordion split across two columns side by
side. Divide the full question list evenly between the columns, keeping
every row collapsed by default with a toggle mark on the right. Let any
row in either column expand on its own without affecting the other
column. Stack the columns into one on narrow screens.

Create a sign-in screen as one card centered on a full-page background.
Inside the card, stack a heading, an email field, a password field, a
primary button, and a small link for switching to account creation. Keep
generous space around the card on every side so the background reads
clearly behind it. On narrow screens, let the card expand to fill most of
the viewport width.

Create a passwordless sign-in screen. Place a heading, a single email
field, and one primary button that sends a login link - do not include a
password field anywhere. Below the button, add a brief one-line note
clarifying that a sign-in link will be sent via email.

Create a sign-in screen with no surrounding card or panel. Stack a small
logo, a heading, an email field, a password field, and a primary button
directly down a single narrow column, centered on the page. Keep the
column width consistent from logo to button so the whole stack reads as
one clean line.

Create a sign-up flow broken into steps with a progress indicator across
the top showing which step is active. Below it, place a heading and the
fields for the current step only. At the bottom, place a back control and
a next/submit button side by side. Advance the progress indicator and swap
the field set as the user moves through steps, without changing the
overall frame.

Create a sign-in screen that leads with social sign-in options. Stack
three social provider buttons at the top of the form. Below them, place a
labeled divider line, then a smaller email field, password field, and
submit button as the secondary path. Keep the social buttons visually
dominant and the email path compact underneath.

Create a sign-in screen split into two equal-width halves. On one side,
stack a small logo mark, a heading, an email field, a password field, and
a primary button. On the other side, fill the entire height with a single
large visual panel - a product shot, illustration, or brand graphic. On
narrow screens, drop the visual half entirely and let the form column take
the full width.

Create an empty state for a dashboard with no data yet. Center a small
icon or illustration in the middle of the content area, with a short
heading below it explaining what's missing, and a single primary button
beneath that to start filling the space. Keep everything vertically
centered within the content area rather than pinned to the top.

Build a dashboard laid out like a kanban board. Arrange several columns side by
side, each with a title naming its stage and a vertical stack of cards
beneath it. Vary the number of cards per column so the board looks
populated unevenly, the way a real workflow would. Let columns scroll
independently when a column holds more cards than fit on screen.

Create a dashboard with a row of compact metric cards across the top,
each showing one key number and its label. Below that row, place a single
large panel that spans the full width for a chart or visualization. Give
the chart panel most of the vertical space so it reads as the page's main
focus, with the metric cards as a supporting summary above it.

Create a dashboard with a fixed vertical sidebar on the left holding a
list of navigation items, and a main content area filling the remaining
width. In the main area, place a page header followed by a row of content
cards. Collapse the sidebar to icons only on medium screens, and hide it
behind a toggle on narrow ones.

Create an application dashboard with a slim top bar spanning the full width,
and three panes beneath it. Left: a narrow navigation rail with icon-and-label
items. Center: a wide scrollable list of records, one row each, with the
active row highlighted. Right: an inspector panel showing the details of the
selected record, grouped under small headings. The three panes scroll
independently; the top bar and rail stay fixed. Collapse the rail to icons
only on medium screens, and hide the inspector behind a toggle on narrow ones.

Build a dashboard whose top edge carries a full-width horizontal
navigation bar, holding a logo, primary links, a search field, and an
action button. Beneath it, let the content area use the entire width with
no side rail: a row of summary stats followed by a larger content panel.
Keep the top bar fixed while the content below scrolls.

Create an onboarding checklist that lists the setup tasks a new user needs
to complete. Stack each task as a row with a status marker on one side and
a short label on the other, marking completed tasks distinctly from
pending ones. Let a task expand in place to show instructions and a
completion button when the user taps it.

Create an empty state built around a custom illustration. Center the
illustration in the available space, with a short heading directly below
it, one supporting sentence beneath that, and a single clear button to
take the next action. Keep the whole group centered both vertically and
horizontally within its container.

Create a guided product tour that overlays the real interface. Dim the
background UI slightly and highlight one element at a time. Next to the
highlighted element, place a small callout box with a short explanation
and a next button paired with a skip control. Move the highlight and
callout together as the user advances through the tour.

Create an onboarding modal that overlays the page on a dimmed background.
Center the modal on a large embedded video area, with a short title above
it and a single button below to dismiss the modal or jump into the
product. Keep the video the dominant element in the modal, with the
surrounding chrome minimal.

Create a blog listing page with a row of filter tags above a grid of post
cards. Highlight the active filter tag. Each card in the grid pairs a
thumbnail image with a title and a short excerpt, arranged in even rows
and columns. Clicking a tag narrows the grid to the matching posts. On
narrow screens, let the filter row scroll horizontally and drop the grid
to a single column.

Create a blog index page. At the top, give the most recent or most important
post a wide featured treatment with a large image and a prominent title.
Below it, arrange the remaining posts in an even grid of smaller cards, each
pairing a thumbnail image with a title and a short excerpt. On narrow
screens, drop the grid to a single column and keep the featured post full
width.

Create a blog post page with a narrow table-of-contents sidebar running
alongside the article body. List each section heading as a link in the
sidebar, and mark the one matching the reader's current scroll position.
Keep the sidebar fixed in place while the article scrolls beneath it. On
narrow screens, collapse the sidebar into a toggled panel above the
article.

Create a blog post page as a single centered column of text, narrower than
the full page width so lines stay short and easy to read. Place the title
and byline above the body copy, and give paragraphs generous space between
lines. Keep any sidebar or secondary content out of view so the column is
the only focus. On narrow screens, keep the same single-column shape and
let the margins shrink.

Build a contact page consisting of nothing but a single form, centered
on an otherwise empty page. Place a single heading
above a short stack of fields, and end with one submit button. Keep
generous empty space around the form so it stays the sole focus of the
page. On narrow screens, let the form fill the width with the same
vertical stack.

Create a contact section split into two halves. On one side, place a form
with labeled fields and a submit button. On the other side, list direct
contact details such as email, phone, address, and hours, stacked as plain
text. On narrow screens, stack the details above or below the form instead
of side by side.

Build a contact section laid out as an even grid of cards, one per
support channel - live chat, email, docs, and community among them.
Give each card an icon, a
short label, and its own call-to-action button. Repeat the same card shape
across the grid so it reads as a uniform set. On narrow screens, stack the
cards into a single column.

Create a footer with the brand's wordmark set very large, spanning most
of the footer's width as its visual centerpiece. Place a slim row of
supporting links above the wordmark and a copyright line below it, both
far smaller in scale than the wordmark itself so the mark clearly
dominates the footer.

Create a footer as one thin row: the logo on the left, a short list of
key links in the middle, and the copyright line on the right, all
vertically centered on the same line. Keep the row compact with no
stacked content above or below it. On narrow screens, wrap the three
groups onto separate centered lines instead.

Create a footer that places the logo and a short tagline at its left edge, with
three columns of grouped links filling the rest of the row, each column
topped with a small heading such as Product, Company, or Resources.
Beneath all of that, run a thin divider and a bottom row holding the
copyright line and any legal links. Stack every column into one on
narrow screens.

Create a footer that opens with a newsletter signup as its largest
element: a short heading, an email input, and a submit button together
in one row. Beneath that, in a visually quieter section, run the usual
footer link columns and the copyright line. Make sure the signup row is
the first thing the eye lands on in the footer.

Create a footer with the usual logo and link columns, plus a status
indicator row showing whether systems are currently operational. Give
the indicator a small colored dot next to a short status label, placed
where it stays visible without competing with the main links. Keep the
copyright line at the very bottom beneath everything.

Create a 404 page that is mostly open space centered on a short message
explaining that the page could not be found. Beneath the message, place
one line of brief explanation and two buttons offering a way back — one to
the homepage and one to support. Keep everything centered in the middle of
the page, both vertically and horizontally. On narrow screens, stack the
two buttons instead of placing them side by side.

Build a comparison table. Give your own product its own highlighted
column, and devote every remaining column to a competitor. List one
feature per row down the
left side, and mark each cell with a check or a dash to show whether that
column supports it. Emphasize the highlighted column so it stands out from
the others. On narrow screens, let the table scroll horizontally with the
feature labels pinned in place.

Build a cookie consent banner shaped as a small card pinned to a bottom
corner of the page, floating above everything beneath it. Inside the card, place a
short message, an accept button and a reject button side by side, and a
settings link beneath them. Leave the rest of the page visible around the
card. On narrow screens, stretch the card to the full width of the bottom
edge.

Build an announcement banner shaped as a thin strip that runs the full
width above the main content. Inside the strip, place a small badge
marking it as new, a short message, an inline link for more detail, and a
dismiss control at the far end. Keep the rest of the page visible and
unchanged beneath the strip. On narrow screens, shorten the message so the
strip stays a single line.

Build a loading state whose skeleton echoes the shape of the page it's
standing in for. Use plain placeholder blocks and bars in place of a
heading, an image, and a few lines of body text, keeping every block in
the same position the real content will occupy. Apply a subtle shimmer
animation across the placeholders so the page reads as actively loading
rather than empty. Remove the skeleton once the real content has loaded.

Create an agenda slide. Put a short header at the top such as "What
we'll cover" or "Agenda". Beneath it, list the deck's sections as a
vertical numbered list, one line per section, in the order they'll be
presented. Keep each line to a short label with no supporting detail.
Limit the list to a single screen's worth of items — group related
sections onto one line rather than letting the list run long.

Create a section-divider slide. Put a short eyebrow label near the top,
such as a section number or "Part 2", positioned off to one side rather
than centered. Beneath it, place the section title in very large type,
offset the same direction as the eyebrow so the two read as one block.
Optionally add a single short line under the title previewing what the
section covers, kept clearly smaller than the title. Leave the rest of
the slide empty so the title has room to breathe.

Create a title slide. Put the deck title in very large type slightly above
the vertical center, flush left, with a one-line subtitle beneath it in a
quieter weight. In the bottom-left corner, add a small block with presenter
name and date; in the bottom-right corner, a small logo mark. Leave the upper
third mostly empty so the title carries the slide.

Create a statement slide built around a single claim. Put that claim as
a short headline of one or two lines, positioned as the clear focal
point of the slide with generous empty space around it. Beneath the
headline, allow at most one short supporting line — a qualifier or a
source — kept much smaller than the headline. Nothing else should share
the slide with this claim.

Create a slide with a large image or screenshot filling the left half.
On the right half, put a short header followed by two to four lines of
text explaining what the image shows or why it matters. Treat the image
as the primary evidence and the text as its caption — keep the two
halves aligned to the same top edge so the slide reads as one balanced
unit.

Create a two-column slide split down the middle by a vertical divider.
In the left column, put a short header and a few lines explaining a
starting point, problem, or "before" state. In the right column, put a
header and a few lines that answer, resolve, or contrast the left side,
so the pairing reads clearly at a glance. Keep both columns close to
the same length so neither side dominates the other.

Create a slide built around one large number. Place the number as the
single biggest element on the slide, centered with room around it, and
put a short label directly beneath it stating what the number measures.
If a second number is needed for contrast, place it clearly smaller and
off to the side rather than matching the main number's size. Nothing
else on the slide should compete with that number.

Create a slide where a single chart is the main content. Above it, put
a short headline that states the conclusion the chart proves, not just
a description of what's charted. Size the chart area to fill most of
the remaining space so it reads as the clear visual center of the
slide. Leave room within the chart area for axis labels and a legend
only if the chart has more than one series, and avoid adding other text
blocks that compete with it.

Create a slide centered on a comparison table. Put a header row across
the top labeling each option, tier, or period being compared, and list
what's being compared down the left side of the rows beneath it. Keep
every cell to a short phrase or single value so the table stays
scannable. If one row or column is the recommended choice, make it
visually distinct without needing a caption to explain it.

Create a process-flow slide with three to five boxes arranged left to
right, one per step. Label each box with a short name for that step,
and connect consecutive boxes with a directional arrow so the sequence
is unmistakable. If there are more than five steps, wrap the sequence
onto a second row rather than shrinking the boxes. Keep every label to
a few words — this slide maps the process, it doesn't explain it.

Create a slide with two perpendicular axes dividing it into four equal
regions. Label both ends of each axis with the dimension it measures,
low to high. Give each of the four resulting quadrants a short name
describing what belongs in it. If specific items are being plotted,
place them as small labeled marks within the correct quadrant rather
than listing them separately in text.

Create a timeline slide with a horizontal line running across the
slide. Place a marker on the line for each milestone, in chronological
order from left to right, and label each marker with a short name and a
date or phase. Alternate labels above and below the line if there are
more than four milestones so they don't crowd each other. If one
milestone is the current point, mark it visibly differently from the
rest so the audience can orient themselves.

Create a slide with three or four equal-width cards arranged in a
single row. Give each card a short header naming the item it covers,
followed by one or two lines of body text explaining it. Keep every
card the same height regardless of how much text it holds, so the row
reads as one balanced set. Add a small number to each card only if the
items have a natural order.

Create a slide with a vertical stack of numbered rows, one row per step
or principle in a framework. Lead each row with a large number on the
left, followed by a short header and a single explanatory line to its
right. Keep every row the same height and structure as the others. If
one row is the current or most important step, give it visibly more
emphasis than the rest instead of adding extra text to explain why.

Create a closing slide with a clear call to action as the headline.
Beneath it, list two to four concrete next steps in order, each stated
as a short actionable line rather than a vague aspiration. Include a
way for the audience to follow up — a contact, a link, or a date — as a
small footer line kept secondary to the headline. If there's a single
primary action, give it a distinct button-like treatment near the
footer.

Create a summary slide that recaps the deck's main points. Put a short
header at the top, such as "What we covered", and beneath it list three
to four bullet points, each restating one earlier point in a single
short line. Treat this as a reminder, not a re-explanation — keep every
line to a phrase rather than a full sentence, and don't introduce
anything new.