Documentation-based practice example; check the controls in your installed Oxygen version.
Start with repeated spacing roles
A useful spacing system reduces unrelated values. Give repeated gaps and padding names so one change can improve several layouts. Start with a guide-card group: space between cards, space inside each card, and space between a heading and its description.
Generate a small starting scale
Open the Spacing Scale Generator. Use an 8px starting value, a 1.5 ratio and four steps at a 16px root. The working tool produces:
:root {
--space-1: 0.5rem;
--space-2: 0.75rem;
--space-3: 1.125rem;
--space-4: 1.6875rem;
}That is 8, 12, 18 and 27px at a 16px root. These values are a starting proposal, not mandatory design rules. Round or refine them when the content needs a different rhythm.
Worked example: a guide-card group
- Add a parent Container with two guide cards. Give the parent the class
guide-grid. - Give each card the class
guide-card. Include a title, summary and one destination. - Use the largest starting token for the gap between cards and their inner padding. Use a smaller token between the title and summary.
- Keep all equivalent cards on the same classes so spacing changes propagate.
.guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.guide-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
}Make the layout responsive
Stack the cards when two columns no longer leave enough room for the actual summaries. The example below uses 767px; use the breakpoint that fits your content and builder configuration.
@media (max-width: 767px) {
.guide-grid { grid-template-columns: minmax(0, 1fr); }
.guide-card { padding: var(--space-3); }
}You can set the same layout properties through Oxygen class controls instead. Choose one method for each property so CSS and controls do not compete.
Gap, padding and margin solve different problems
gap separates children in a flex/grid group. Padding creates space inside an element. Margin affects the element’s relationship to surrounding content. If both a parent gap and child margins supply the same separation, the result can be larger than intended.
Troubleshooting and checks
- A token does nothing: inspect whether the variable is defined, spelled correctly and overridden by another rule.
- One card looks different: compare its class list and local overrides.
- Spacing doubles: inspect parent gap, child margins and default paragraph spacing together.
- Mobile feels sparse: reduce a role’s responsive spacing rather than creating unrelated one-off values on every element.
Test a long heading, multi-line summary and missing optional image. Reference: Oxygen classes.