Figma legal page examples

Terms of service, privacy policy, cookie notice, acceptable use, DPA. These are the pages a company writes once, pastes into the CMS as a single block of text, and never looks at again.

Then someone lands on one because they want to know whether cancelling refunds the year they prepaid, or whether the analytics script sends their email address to a third party, and the page has to answer. People do read legal pages, just not the way they read anything else: they arrive with one question and scan for it.

Design for scanning, not for reading

NN/g's study of privacy policies and terms of use pages lists the same failures over and over: no plain-language summary at the top, no last-updated date, no working table of contents, and dense small type that collapses on a phone. All four are layout problems, not legal ones, which means they are yours to fix.

A short summary above the legal text, a visible date, numbered sections with anchor links, and a table of contents that stays reachable will do more for comprehension than any amount of rewriting your counsel is willing to sign off on.

The measure that matters is line length

A legal page is one long column of body text, so typography carries the whole page. Keep the measure narrow: WCAG's visual presentation criterion puts the ceiling at 80 characters a line, asks for at least space-and-a-half line spacing within paragraphs, and rules out justified text, which turns a page of clauses into rivers of white space.

Full-width legal text on a 1,440px canvas is the single most common mistake in this category, and it is the one that makes a page feel like it was never meant to be read. Headings need real hierarchy too, since a wall of same-sized bold clause titles is no easier to scan than no headings at all.

How the examples are assembled

Each page runs header navigation, a header section, the content section, then optionally a CTA section, then a footer. One example leads with a banner above the navigation, which is the honest way to announce a policy change rather than editing the page quietly.

The content section is identical across the examples, 2,454px tall on the desktop canvas and 3,248px on mobile, which is worth staring at for a second: that is what a real policy looks like at true size, and it is why the header treatment and the table of contents earn their space. Variation between the examples lives in the header section, in whether a CTA follows the text, and in which footer closes the page.

Every example exists as a 1,440px desktop page and a 375px mobile version, in light and dark, and the whole thing runs on Untitled UI's type styles, so changing the body size or line height for the policy changes it everywhere the same way. Since your terms will be linked from the footer of every other page you own, that consistency is doing more work than it appears to.

The same page shapes exist in code. Untitled UI React legal pages are open source, built with Tailwind CSS from the same sections, with the long-form content styles already set.