In a design system, when should content be separated with spacing, a divider, a border, or elevation?
answer
- weakest separator that works
- proximity groups first
- dense uniform rows need lines
- borders define a boundary
- elevation for what floats
basics
~20 sUse the weakest separator that works: spacing groups related content by default, dividers separate dense uniform rows, borders mark a container's or control's boundary, and elevation marks a surface that sits above or moves over others.
solid answer
~40 sEach separator carries a different meaning, so pick the **weakest one that does the job**. **Spacing** is the default: proximity alone shows what belongs together and adds no visual noise. **Dividers** fit dense, uniform content such as a long match-history list, where extra space would waste room and rows need a quiet cue. **Borders** mark the boundary of a container or an interactive control, such as a text field or a drop target in a loadout, and help when surfaces share one tone. **Elevation** is for surfaces that sit above others or move, such as menus, sheets and a card being dragged. Stacking separators, like a bordered card inside a bordered panel with dividers inside, adds lines without adding structure.
go deeper
Recall the four separators and their jobs, and default to spacing before adding lines, borders or shadows.
Explain what each separator communicates, why dense uniform lists need dividers, and why borders help when surfaces share a tone.
Show how you would clean up a screen with stacked separators and write guidance that tells teams which separator each pattern uses.
Weigh a flat, border-led visual style against an elevation-led one for the whole system, and what each costs in dark themes and dense screens.
## Four ways to separate content A design system gives teams four tools for showing where one piece of content ends and another begins. They are not interchangeable, because each says something different. | Separator | What it says | Typical use in a game companion app | |---|---|---| | **Spacing** | these things belong together; those belong elsewhere | friend list grouped into online, in-match and offline sections | | **Divider** | these are peers in a sequence | rows in a long match-history list | | **Border** | this is a bounded object or a control | a text field, an empty loadout slot that accepts a dragged item | | **Elevation** | this surface is above the others, or moving | a menu, the squad-invite sheet, a card being dragged | ## Start with spacing The **principle of proximity** says people perceive items that are close together as a group. Spacing therefore separates groups at zero visual cost: no extra lines, no extra shapes. A friend list separated into sections by generous space and a short heading reads cleanly without a single rule. Spacing is the right default whenever there is room for it and the groups are not visually uniform. ## Add dividers for dense, uniform content When items are uniform and tightly packed, spacing alone becomes ambiguous or wastes room: - A match-history list of dozens of rows with identical structure needs a quiet cue between rows; large gaps would halve the number of matches on screen. - Dividers can be **full-bleed** (edge to edge, separating distinct sections) or **inset** (starting where the text starts, separating items in one list), and the choice signals whether the separation is strong or light. - Dividers should be subtle, since their job is to help scanning, not to draw a grid. ## Use borders for boundaries A **border** outlines an object and says "this is one thing" or "this can be interacted with": 1. **Controls**: a text field's outline shows where to tap and type. 2. **Targets**: an empty loadout slot uses a border, perhaps dashed, to show that an item can be dropped there. 3. **Same-tone surfaces**: when cards and background share a tone, a thin border separates them where elevation cannot, which is common in flat styles and dark themes. 4. **Selection**: a stronger border can mark the selected item, alongside another cue. When a border is the only thing that identifies a control, its visibility against the background becomes an accessibility requirement, which is covered by the contrast rules. ## Reserve elevation for what floats **Elevation** separates by depth. It fits surfaces that are genuinely above others: menus, sheets, dialogs, a sticky header that content scrolls under, or a card lifted during a drag. Using elevation merely to separate side-by-side content spends the depth cue on something that is not above anything. ## Writing the guidance A design system turns these choices into rules teams can follow without debate: 1. For each common pattern, such as a list, a settings group, a card collection or a form section, name the separator it uses. 2. Show a do-and-don't pair for stacked separators, since that is the most common mistake. 3. State how separators change in the dark theme, where shadows weaken and a thin border may take over. 4. Define divider and border weights and colours as a small set of values, so a "subtle divider" looks the same on every screen. ## Pitfalls - **Separator stacking.** A bordered card inside a bordered panel, with dividers inside the card, puts three lines where one or none would do. - **Dividers everywhere.** Lines between every item in a short, airy list add noise; spacing was enough. - **Double boundaries.** A card that has both a border and a shadow at the same level of emphasis says the same thing twice; systems usually pick one per surface type. - **Inconsistent choices across teams.** One team's settings page uses dividers, another's uses cards, for the same kind of content; the system's guidance should say which separator each pattern uses.
- When should a divider be inset rather than full-bleed?Use an inset divider between items of one list, aligned with where the text starts, so the leading icons or avatars read as a column and the separation feels light. Use a full-bleed divider between distinct sections, where a stronger break is intended. Mixing them at random blurs which separations are minor and which are major.
- Why is a thin border often needed on cards in a dark theme even when light-theme cards have none?In a light theme a card can separate from the background by a shadow; in a dark theme shadows read weakly and tonal differences between a card and its background can be small. A subtle border restores the card's boundary where depth cues fade. The system can express this per theme so the card component itself does not change.
saying these in an interview costs you the question
- Put a divider between every item so no boundary is ever ambiguous.
- Every group of content should be wrapped in its own bordered card.
- Elevation is a good way to separate side-by-side content blocks.
- Spacing alone can never separate content reliably.
- A card should use both a strong border and a shadow to be safe.