Smileybones Design System from arXiv
Smileybones Design System from arXiv
Every gap on arXiv pages comes from the scale defined below. The scale is a 4px-based / 8-point scale, with no off-scale values permitted. More details in DESIGN-POLICIES.md. Token values --ds-space-1…--ds-space-12 are found in design-system.css.
A seven step scale, with each step roughly 1.5x larger than the previous. The width of the bars below are the
token values pulled live from --ds-space-*.
| Token | Value | Drawn at size |
|---|---|---|
--ds-space-1 | 0.25rem (4px) | |
--ds-space-2 | 0.5rem (8px) | |
--ds-space-3 | 0.75rem (12px) | |
--ds-space-4 | 1rem (16px) | |
--ds-space-6 | 1.5rem (24px) | |
--ds-space-8 | 2rem (32px) | |
--ds-space-12 | 3rem (48px) |
/* A stop is used as written: a token, in rem, never a pixel value */
.ds-card {
padding: var(--ds-space-4) var(--ds-space-6); /* 16px 24px at a 16px root */
}The gap between sections should be clearly larger than the gap within a section. We aim for at least 2× (e.g., 16px between paragraphs, 32px before the next heading, 48px between sections). The same holds across a row: groups of controls side by side sit at least twice as far apart as the controls inside each group. This is what allows grouping to work without adding extra lines, borders or boxes.
The markup is plain headings and paragraphs with no classes. The spacing is the design system's own default for those elements.
With proximity
Submitted by A. Palomares on 14 July 2026.
Revised on 2 August 2026.
Primary category: General Relativity and Quantum Cosmology (gr-qc).
License: CC BY 4.0.
Flat, no proximity
Submitted by A. Palomares on 14 July 2026.
Revised on 2 August 2026.
Primary category: General Relativity and Quantum Cosmology (gr-qc).
License: CC BY 4.0.
<h3>Submission</h3>
<p>Submitted by A. Palomares on 14 July 2026.</p>
<p>Revised on 2 August 2026.</p>
<h3>Classification</h3>
<p>Primary category: General Relativity and Quantum Cosmology (gr-qc).</p>
<p>License: CC BY 4.0.</p>--ds-space-8) and 8px below (--ds-space-2), so a
heading sits four times closer to its own text than to the text before it.--ds-space-4), between paragraphs of the same group: half the
32px that starts the next group.Three tokens set the shape of every page: the width of the content column, the gutter that keeps it off the viewport edge, and the space the container puts between one region and the next. The container that reads them is documented on Layout patterns.
This band runs edge to edge but by applying --ds-gutter to the internal padding this
text takes up the same width as other content.
This container applies --ds-space-section to create a gap above it, and
internal padding to comfortably nest the content.
<div class="ds-container">
<header class="ds-page-header">…</header>
<section>…</section> <!-- --ds-space-section above it, from the container -->
<section>…</section>
</div>/* A page that needs a different width changes the one token;
it never adds a second width beside it. Here: a dense internal
tool with tables that cannot compress. */
:root { --ds-width-page: 1080px; }--ds-space-6, 24px. The least space between the content column and the
viewport edge. A .ds-full band uses the same token as its inline padding,
so the band and the column cannot drift apart.row-gap: the space between one direct child and
the next. A section has no margin of its own.rem, so every gap grows with the reader's text size (WCAG 1.4.4). At 400% page zoom the page is only 320 pixels wide. Let the tokens do their work and never set a gap or a width that forces the page to scroll sideways.<fieldset> or a landmark, so the grouping is in the markup as well as visual.When using the expected HTML markup you do not need to know these rules. They are here for reference when you need to create something new or have a use case the design system does not cover.
Use the step tokens, never hand-code the spacing. Do not fight the grid. If the need arises for different spacing reach out to the design team. The new values mean a change to DESIGN-POLICIES, not a local override.
When applying your own spacing use the named --ds-space-block for spacing within, and --ds-space-section for spacing between. Spacing between blocks is 2× tight while spacing between sections is 3× block; Lower than 1.5× the eye cannot tell the two apart and the grouping signal fails.
Feel like you need a border to separate content? First try widening the gap, using cards, or applying designated background colors for primary and secondary content zones.
The scale is expressed in rem, so spacing also scales with the reader's text size. A fixed gap next to growing text would destroy the ratio for within and between sizes and lose visual meaning at different zoom levels.
Named breaks include --ds-space-tight inside a group, --ds-space-block between
blocks in a section, or --ds-space-section between sections. We name spacing roles like we do colors: for their role and not their raw value. That flexibility enables the dark mode flip and our responsive spacing system.
A section does not know what follows it, so it cannot know how far away that next piece of content should be. Spacing is added to the container as gap, not on each child as a margin. If you find yourself reaching for :last-child { margin-bottom: 0 } let the design team know asap. It is a symptom that the spacing is on the wrong element.
One exception: prose spacing inside a section stays element-owned, because a heading's margin depends on its own text size, which the container does not know.
“How far apart do these sit” means the same thing whether the space comes from a margin or a gap, and whether the space is vertical or horizontal. Gap between siblins uses the standard scale.
One exception: the space between a glyph and its label inside a single control is part of the control rather than layout. Use --ds-gap-glyph (0.5em), which scales with that control's own type.
Buttons placed as bare siblings are spaced by the HTML whitespace between the tags, which are narrower than any deliberate value. It will look like a bug because it is one. For the button use case you would use .ds-btn-group or the --stack variant. For other elements, visit their pattern pages to find the right container and code example.
There is one name per scale step and every codebase uses it exactly as written. No per-repository prefixes or mapping tables. Anything kept in another repo is invisible here.