Layout, grid and hierarchy
How to arrange a screen on phones and desktops.
How a page is divided, how space groups things, and how people know where to look first. Numbers come from published systems where we could check them. Where we could not, we say so.
Screen sizes
Tattva has five screen size classes, with breaks at 600, 840, 1200 and 1600px. They match the Material 3 classes. Tailwind's sm, md, lg and xl use the same widths.
| Size | Width | Columns | Margin | Gap between columns | Tailwind |
|---|---|---|---|---|---|
| Compact | under 600 | 4 | 16 | 16 | base |
| Medium | 600 to 839 | 8 | 16 | 16 | sm |
| Expanded | 840 to 1199 | 12 | 24 | 24 | md |
| Large | 1200 to 1599 | 12 | 32 | 24 | lg |
| Extra large | 1600 and up | 12 | 32 | 24 | xl |
Margin is the empty space at the page edge. The gap between columns is called a gutter. Their values are the --margin and --gutter tokens, which change at 840 and 1200px. Grid switches its columns at md and lg by default (4, 8, 12). That is later than Material. Treat the table as the goal and pass cols to match it. This is a proposal to confirm.
What other design systems use
| System | Screen breaks | Columns | Other |
|---|---|---|---|
| Carbon 2x | sm 320, md 672, lg 1056, xl 1312, max 1584 | 4, 8, 16, 16, 16 | 16px padding. 8px mini-unit with scale 8, 16, 24, 32, 48, 64, 80. |
| Material 3 | compact under 600, medium 600 to 839, expanded 840 to 1199, large 1200 to 1599, extra large 1600+ | 4, 8, 12 | Margins 16dp compact, 24dp medium and expanded (snippets). |
| Atlassian | xxs 320, xs 480, s 768, m 1024, l 1440, xl 1768 | 2, 6, 6, 12, 12, 12 | Gutter 12 then 16, margin 16 then 32 (snippet). |
| GOV.UK | Tablet at 641 | Width fractions | Page container 1020px. |
Most systems use 4 columns on phones, 8 or 12 on tablets and 12 or 16 on desktop. Margins are 16 on phones and 24 to 32 on desktop.
Columns, margins and gaps
Columns split up the content area. The margin sits outside it. The gutter is the gap between columns. Use Grid for columns and Container for margins.
Resize the window. You see four columns under 840px, eight from 840px and twelve from 1200px.
<Container size="page">
<Grid>
<div className="col-span-4 md:col-span-3 lg:col-span-4">Rail</div>
<div className="col-span-4 md:col-span-5 lg:col-span-8">Content</div>
</Grid>
</Container>Container widths
Three width presets, all proposals to confirm. Chat is 768px, home is 680px and page is 1120px.
Spacing and grouping
- Space comes from a scale of eight steps, in multiples of 4px, times the density token. Stack and Cluster accept a gap from 1 to 8.
- Items that sit close together look like a group. Put less space inside a group than between groups (NN/g proximity).
- If space alone does not show the groups, add a border or a background box (NN/g visual hierarchy).
- GOV.UK shrinks its large spacing on phones. Tattva does not do this yet.
- Stacking on a phone can split a group. Check the order after a layout collapses.
Sources
Notes
Gap 2 inside each group. Gap 6 between groups.
Making one thing stand out
NN/g names three tools: color and contrast, size, and grouping. Use at most 3 sizes, 2 large elements and 3 levels of contrast. Try the squint test: blur your eyes and check that the first thing you see is the right one. Our ranking, strongest to weakest, is size, weight, contrast, position and color. This ranking is our own and has no source.
Q3 report
Revenue grew 12%
Renewals drove most of it
Review churn in the smallest plan
Everything looks the same, so nothing stands out first.
Revenue grew 12%
Q3 report
Renewals drove most of the gain.
One big headline, two text weights, and a box around the action.
People scan pages in four ways, named F, spotted, layer-cake and commitment. Layer-cake works best. The F pattern shows up when content is not broken into chunks (NN/g). Use headings to break up long answers.
Chat on smaller screens
The steps below are our own, built on the Material screen sizes. Material also lists standard layouts called list-detail, supporting pane and feed (from a snippet).
How the chat layout shrinks as the window gets narrower
- Large (1200 to 1599px). The full three-part view.
- Expanded (840 to 1199px). Side list, chat and canvas.
- Medium (600 to 839px). A slim icon list and the chat. The canvas opens on top.
- Compact (under 600px). The side list becomes a drawer. The canvas opens full screen with a back button. The message box stays pinned at the bottom.
Phone keyboards
- Chrome 108 and later uses
interactive-widget=resizes-visualby default. The keyboard covers part of the page but does not resize it, so fixed elements andvhunits stay where they were (Chrome). - A message box pinned to the bottom therefore needs visualViewport listeners, interactive-widget=resizes-content or the VirtualKeyboard API.
- We expect dvh to suit the page height, but we have not checked.
Tight and roomy spacing
Add data-density="compact" to any area to change --density from 1 to 0.8. Stack, Cluster and Grid shrink their gaps to match. The 0.8 value is a proposal. The systems we reviewed give no number.
The space between items is Stack gap 4. It is 16px at density 1 and about 13px at 0.8.
Text size and line length
Three heading sizes grow smoothly with the window. They use clamp with a rem term, because sizes based only on window width can fail WCAG 1.4.4 when people zoom (Smashing). WCAG 1.4.8 asks for lines of at most 80 characters, line spacing of at least 1.5, paragraph spacing of at least 1.5 times the line spacing, and zoom to 200% without sideways scrolling. See also .
Calm tools for hard work
Display: --text-display = clamp(2.25rem, 2vw + 1.5rem, 3.25rem)
Calm tools for hard work
Headline: --text-headline = clamp(1.625rem, 1vw + 1.25rem, 2rem)
Calm tools for hard work
Title: --text-title = clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem)
Body text is capped at 72 characters per line by the measure token. Short lines are easier to read. WCAG 1.4.8 sets a limit of 80. By our math, the 768px chat width gives about 70 to 75. Resize the window and watch the headings above scale smoothly.
--measure: 72ch
We did not check size ratios or vertical spacing rules.
Standard layouts
| Layout | What it looks like | Source |
|---|---|---|
| Chat with canvas | Claude Artifacts is about 50/50. ChatGPT Canvas is about 25 to 30% chat and 70 to 75% editor. Both collapse on phones. | Blog posts |
| List-detail | A list beside a detail view. | Material (snippet) |
| Supporting pane | A main area with a smaller side panel. | Material (snippet) |
| Feed | One scrolling stream of items. | Material (snippet) |
What we could not verify
- Container widths of 768, 680 and 1120px are proposals to confirm.
- Material margins and column counts came from search snippets. The screen size widths are checked.
- Atlassian screen breaks, columns and margins came from a snippet.
- The density values of 0.75 to 0.8 have no source. Neither does choosing divider lines over empty space. NN/g says to use space first and add a box when that is not enough.
- We did not check Apple HIG or Refactoring UI rules. The ranking of size, weight and the rest is our own.
- The split ratios for Claude Artifacts and ChatGPT Canvas come from blog posts.