Ctrlk
Home
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Polish Your Published App Look and Layout

Make published NotionApps feel like finished products — not utility admin forms. This guide covers the published-app visual system: login polish, layout density presets, form spacing and sticky Submit, desktop master–detail, details action rails, and cleaner app names (no more “Copy of …”).

Who this is for Makers who publish Create Forms, Lists, and Details to end users (desktop browsers and phones). Builder-only Phase A changes (nav rail, inspector tabs) are covered in separate Guides.

What you get

Feature
Where you configure it
What end users see

Login hero + wrapping title

Automatic from app color / icon / name

Brand-colored header, rounded inputs, full title (no hard 27-character cut)

Layout presets (Compact / Comfortable / Showcase)

Settings → General → Layout presets

Spacing, type scale, radii, and denser/airier forms & lists

Color presets

Same General preview (or Appearance)

Accent / theme color

Sticky desktop Submit

Create/Update Form Behaviour (or default)

Submit stays pinned while scrolling on desktop

Heading section rhythm

Add Heading comps on forms

Clear visual groups between field sections

Desktop master–detail

Automatic on wide desktop List screens

List left · details/forms right

Details sticky actions

Automatic on desktop Details

Edit / Delete stay visible at the bottom

Page Content TOC (new comps)

Show Page Content settings

Side TOC defaults on for new comps when enough headings exist

“Copy of” cleanup

Publish + login display

Clone prefixes stripped for end users

Before you start

You need:

  • An application in the NotionApps builder with at least one List, one Details (or Update Form), and one Create Form

  • Permission to Publish

  • A desktop browser window wide enough to preview desktop layouts (about 1100px+ for master–detail)

Existing apps Layout presets default to Comfortable. Apps without a saved preset keep today’s spacing until you pick Compact / Comfortable / Showcase. Page Content TOC stays off for older comps that never stored TOC prefs — only new Show Page Content comps default TOC on.

Part A — Layout presets (Compact / Comfortable / Showcase)

Layout presets change spacing, type, radii, and density — not only the accent color.

Step A1 — Open General settings

  1. Open your app in the builder.

  2. Click Settings in the left rail.

  3. Stay on General (name, URL, workspace).

  4. Look at the right-hand Appearance preview card.

Builder Settings → General with Appearance preview and Layout presets

Step A2 — Choose a layout preset

  1. Find Layout presets.

  2. Click one of:

    • Compact — tighter rows/padding, smaller type (dense ops UIs)

    • Comfortable — default; taller fields, softer radii (everyday work)

    • Showcase — larger type, airier spacing, fewer chrome lines (portals / catalogues)

  3. Watch the mini phone preview update live.

Compact layout preset selected with live appearance preview
Comfortable layout preset selected
Showcase layout preset selected

Step A3 — Pair with a color preset

  1. Under Layout presets, use Color presets (swatches) to set the accent.

  2. For fonts / Custom CSS, open Appearance.

Maker tip Layout presets change spacing and type. Color presets set the accent. Fine-tune fonts and CSS in Appearance.

When to use which preset

Goal
Preset

Field / ops tools with long lists

Compact

Most internal tools (recommended start)

Comfortable

Client portals, catalogues, editorial feel

Showcase

Part B — Login chrome (published app)

End users see a brand hero, a wrapping app title, and rounded login controls.

Step B1 — Set branding inputs

  1. Settings → General: App name (avoid leaving “Copy of …” in names you care about for users — see Part F).

  2. Settings → Appearance (or General color swatches): theme color.

  3. Upload / select an App icon.

Settings Appearance theme color and app icon

Step B2 — Preview the published login

  1. Publish (or open the end-user URL for the app).

  2. Confirm:

    • Title can wrap across 2–3 lines (not truncated mid-word at 27 characters)

    • Top band uses your theme color with the app icon

    • Email / code inputs and primary CTA use larger corner radii (~12px)

    • Google / Okta / Auth0 buttons still appear when enabled

Published login with brand hero header and wrapping app title
Login on a narrow / phone-sized viewport

Desktop phone-preview Share App in the builder stays as-is. Full-width desktop login keeps the tinted page wash beside the card.

Part C — Form runtime (spacing + sticky Submit)

Step C1 — Open a Create or Update Form

  1. Go to Screens.

  2. Open a Create Form (for example Submit Service Request).

  3. Switch the preview to Desktop.

Create Form open in the builder

Step C2 — Use Headings to group sections

  1. In Add to screen / Logic, add Heading components between groups of fields.

  2. Headings get extra vertical space so forms read as sections (without a new “section” component type).

Form preview showing heading-driven section spacing

Step C3 — Desktop sticky Submit

On desktop, Create/Update forms default to a sticky page footer Submit when you have not overridden placement.

  1. Open the form’s submit / Behaviour controls.

  2. Review Desktop position:

  3. Scroll the desktop preview — Submit should stay visible at the bottom when sticky.

Desktop form preview with sticky Submit placement controls
Desktop form sticky Submit preview

Step C4 — Confirm phone is unchanged

  1. Switch preview to Phone.

  2. Confirm Submit still follows Mobile position only.

Phone form preview still using mobile Submit rules

Secondary destinations stay in the Phase A More overflow for bottom navigation. This release does not add a new form FAB.

Part D — Desktop master–detail (List | Details / Form)

On desktop with a wide enough preview/window (≥ ~1100px), List screens open records in a right pane instead of pushing a full-screen Details/Form.

Step D1 — Open a List on Desktop

  1. Screens → select a List (for example Service Requests).

  2. Switch preview to Desktop.

  3. Optionally click Hide configuration so the preview is wide enough.

  4. Until a row is selected, the right pane shows Select a row.

List screen ready for desktop master–detail

Step D2 — Select a row

  1. Click a list row.

  2. Details (or Update Form) open in the right pane.

  3. Use Close on the pane toolbar to clear the selection (empty “Select a row” state).

List with a record selected in the right detail pane

Step D3 — Create from the list FAB

  1. Click the list + / create action on desktop.

  2. The Create Form opens in the right pane (same workspace), not a second phone column.

Step D4 — Phone / narrow desktop still stack

  1. Switch to Phone preview (or shrink below the breakpoint).

  2. Row tap still pushes Details/Form on the stack — mobile navigation is unchanged.

Phone list preview still using stack navigation

Master–detail does not appear if Preview is Phone, or the desktop preview/container is narrower than ~1100px. Widen the window / hide configuration, then click a row again.

Part E — Details sticky action rail + Page Content TOC

Details sticky actions (desktop)

On desktop Details, primary actions (Edit / Delete) sit in a sticky footer rail — similar to sticky Submit on forms — so users do not scroll to find them.

Details panel with sticky Edit / Delete action rail

Page Content table of contents (new comps)

  1. On a Details (or Form) screen, add Show Page Content.

  2. Open the component settings — Table of contents defaults to enabled for newly created comps.

  3. TOC still only appears when the page has at least the minimum heading count (default 2).

  4. Existing comps without stored TOC prefs stay off (no forced migration).

Page Content TOC settings in the builder

Deep dive: Add a Table of Contents to Page Content.

Part F — Cleaner app names (“Copy of …”)

Cloning an app still creates draft names like Copy of …. End users should not see that prefix.

Surface
Behavior

Login / OTP titles

Leading Copy of is stripped (including nested copies)

Publish

Published app name is sanitized so clones stop shipping the prefix

Draft / builder name

Can still show Copy of … until you rename

Maker tip: After cloning, rename the app under Settings → General before you publish to customers.

End-to-end example (makers)

Goal: Ship a Service Request app that looks intentional on desktop and phone.

  1. Settings → General → Layout preset Comfortable + your brand color.

  2. Confirm login on the published URL (hero color, wrapping title, rounded fields).

  3. Open Submit Service Request → Desktop preview → sticky Submit + Heading sections.

  4. Open Service Requests List → Desktop + wide preview → click a row → details in the right pane with sticky Edit/Delete.

  5. Switch to Phone → confirm stack navigation and mobile Submit.

  6. Publish and retest the live app.

Builder home for the sample Service Request app

Checklist

Troubleshooting

Symptom
Likely cause
What to do

Layout presets do nothing in preview

Looking at Appearance only / not saved

Use General → Layout presets; wait for save; refresh preview

Login title still truncated

Old published build

Publish again; hard-refresh end-user

No master–detail pane

Phone preview or narrow desktop

Desktop view + widen ≥ ~1100px; Hide configuration

Row still full-screen pushes on desktop

Below breakpoint

Widen preview; confirm Desktop toggle

Sticky Submit missing

Desktop position = Match mobile / overridden

Set Sticky page footer (or clear override)

TOC missing on old Page Content

Existing comps default off

Enable TOC in component settings

“Copy of” still on login

Name does not start with prefix, or not published

Rename in General; publish

Related Guides

Builder options at a glance

This guide teaches a focused maker workflow. For the full screen option inventory (What it does / How to use / Why) and annotated builder screenshots, use the matching Types of Screens guide:

Recommended defaults

  • Change one option family at a time, then publish and test on phone and desktop.

  • Prefer screen-level settings in Content / Behaviour / Appearance before custom CSS/JS.

  • Keep public access and navigation visibility intentional on every screen you link from this guide.

PreviousFind Your Way Around the Builder Nav RailNextBoard Layouts and Details Polish