Spacing

One scale, two densities

Spacing gives related information a clear relationship and separates larger changes in content. JR Dream’s working system uses one scale for generous corporate sections and efficient operational views, with consistent alignment and room for content to grow.

Use hierarchy, responsive composition and density aliases rather than inventing extra increments. Line height belongs to the typography system; do not force text baselines onto an 8px grid or use blank lines to create layout spacing.

This is documentation for future websites and products, not a corporate website or a production layout library. The specifications are internally accepted working references, pending implementation testing and final company approval.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 1–3 and 13.

Core spacing scale

The nine tokens below are the complete digital scale. Each orange bar has the exact CSS-pixel width of its token; the surrounding measurement track is 96px wide. Text enlargement does not redefine these existing pixel spacing values.

• 4px
  --space-04

  Small icon-to-label or status inset; never a substitute for a usable target gap.

• 8px
  --space-08

  Related inline items, label-to-field and tight paragraph grouping.

• 12px
  --space-12

  Comfortable control and compact table block padding. See the recorded page-2/page-3 control-padding decision.

• 16px
  --space-16

  Mobile margins, control inline padding and compact card padding.

• 24px
  --space-24

  Comfortable card padding, field separation and standard gutters.

• 32px
  --space-32

  Group separation, standard desktop margins and dashboard sections.

• 48px
  --space-48

  Mobile section spacing and wide-desktop minimum margins.

• 64px
  --space-64

  Desktop section spacing and tablet major transitions.

• 96px
  --space-96

  Desktop hero or major editorial transitions.

Copy buttons provide feedback and keyboard operation. Values remain visible and selectable if clipboard access is unavailable, and token names remain in print. A 4px inset is not permission to reduce the documented 8px gap between interactive targets.

Source: Spacing & Layout Grid Exploration & Validation v1.0, page 2; compact-control interpretation recorded below.

Apply spacing by relationship

Recorded source interpretation: page 2 associates 12px with compact control block padding; page 3’s detailed density table specifies 8px. For Stage 02.2D, the internally selected working interpretation is page 3: 8px block, 16px inline and at least 48px target height. This does not correct or modify the original PDF, and adds no spacing token.

The source explicitly gives 48px mobile and 64px desktop section spacing. The existing --gap-section alias remains 48px on tablet as well; that tablet mapping is an implementation reference, not a newly inferred source rule. Control and navigation heights are minima, so wrapped labels and enlarged text must increase height.

The source calculates compact one-line table rows at about 45px for English and 50.4px for Arabic, before any additional borders. These are examples from type leading plus padding, not fixed heights or control-target sizes.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 2–3 and 12; user-selected compact-control interpretation for Stage 02.2D.

Responsive alignment grid

Existing references: --grid-columns = 4 / 8 / 12 / 12; --grid-gutter = 16px / 24px / 24px / 24px; --page-margin = 16px / 24px / 32px / 48px, in mobile / tablet / standard desktop / wide desktop order. These are layout modes; typography retains its three existing bands.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 4 and 12.

Containers and content widths

The corporate container is centred and capped at 1200px through --layout-max. Responsive page margins are minimum clearances. Once the cap is reached, the actual outer margin becomes larger.

C = min(viewport − 2 × minimum margin, 1200). Outer margin = (viewport − C) / 2. Column width = (C − (columns − 1) × gutter) / columns.

At 1440px, the capped content is 1200px with 120px actual margins; 48px is only the wide-desktop minimum. At 320px, 288px remains inside the 16px margins.

Operational workspaces retain responsive margins and gutters but remove the corporate cap. At desktop widths, the source reserves 240px for operational navigation plus a 24px gap. Below 1024px, navigation moves above the workspace.

This neutral allocation diagram is a documentation demonstration. The current documentation application has its own sticky header, sidebar and article measure; it is not the corporate grid or the source operational layout. Its existing shell is unchanged.

Grid width is not paragraph measure. Keep English reading near the existing 65ch limit and Arabic near the provisional 55ch visual measure; ch does not count Arabic characters.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 4–6 and 12.

Comfortable and compact density

Both modes use the same scale and readable body text. The examples repeat the same content so the difference comes from padding and gaps, not reduced type sizes. You can edit these local documentation fields to test content fit; values are not submitted or stored.

Comfortable controls use 12px block padding; compact controls use the selected 8px block recipe. Both retain 16px inline padding and a 48px minimum target, with no fixed height. The badge shows 4px / 8px padding but does not behave as a control.

Source: Spacing & Layout Grid Exploration & Validation v1.0, page 3; compact-control conflict on page 2 resolved by the recorded internal choice.

Responsive composition

Corporate cards follow 3 / 2 / 1 across desktop / tablet / mobile. Equal flexible tracks allow content to shrink and wrap; heights follow the copy. Comfortable card gaps are 24px, distinct from the mobile alignment grid’s 16px gutter.

• Hero and feature regions use 64px desktop / 48px mobile block spacing, with 32px internal groups where specified. Hero heading-to-copy is 16px and copy-to-action is 24px.
• The enquiry-form study limits measure to 640px; two fields per row are considered only at 768px and above when labels fit. Stack earlier for long labels or enlarged text. This is a source composition condition, not a new general layout breakpoint.
• Compact metric cards use 16px gaps/padding and 32px groups. Four cards require at least 192px content space each; otherwise use two, then one. Do not infer an extra viewport breakpoint from that condition.
• Empty/error panels use 24px padding, 8px heading-to-explanation and 16px explanation-to-action. Inline error guidance sits 8px below its field and needs words, not colour alone.
• Keep heading, explanation and action in meaningful DOM reading order. Let labels and filter groups wrap; do not use CSS positioning to repair the reading sequence.
• Wide tables scroll in their own labelled, keyboard-accessible region. Reflow the surrounding article, preserve headers and avoid fixed-height content that clips enlargement.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 4–7, 11 and 12.

Logical spacing and RTL flow

Use padding-inline, margin-inline, inset-inline-start and start alignment. Arabic sections need both lang="ar" and dir="rtl"; English sections retain their own language and LTR direction.

The technical example reverses layout flow while preserving each LTR identifier. It contains no Arabic prose or numeral policy. Use the Typography foundation’s language-aware settings when approved Arabic content is supplied.

Mirror sidebar placement, navigation sequence and directional layout only when meaning requires it. Do not mirror logo artwork, numbers, identifiers, charts by default or non-directional content. Keep Arabic tracking at zero and avoid manual kashida. Real Arabic text, mixed punctuation and native-reader review remain pending.

Source: Spacing & Layout Grid Exploration & Validation v1.0, page 8; typography and language guidance also on page 12.

Full-logo and header constraints

The complete supplied logo has a provisional 240px minimum digital canvas. With 16px top/bottom padding, a source header row is at least 272px tall, before any additional stacked navigation. A horizontal row also needs the 240px canvas, a 24px gap and enough space for navigation; stack below 1024px or earlier when content requires it.

The logo’s internal square margins already exceed the W/10 artwork clear-space rule. Do not crop them or add X again as mandatory external padding. Extra composition spacing is optional and distinct from the minimum exclusion rule.

The compact documentation header therefore retains the accepted text-only JR Dream Design System identifier. A compact full-logo header, supporting signature or exception requires separate design review and company approval. No cropped, symbol-only or unapproved compact variant is implied.

No new logo preview is needed here. See the Logo foundation’s original assets and provisional size guidance. At 320px, the 288px corporate content width can contain the complete 240px canvas with 48px spare; this is fit arithmetic, not actual-device legibility validation.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 4–6 and 13.

Physical documents and presentations

Millimetres, slide points and digital CSS pixels are separate specifications. The diagrams below show nominal proportions only. Their browser or exported size does not validate physical margins, logo reproduction or printing accuracy.

A4 documents

16:9 presentations

Tagged PDF reading order, printer bleed, colour conversion, actual-size A4 proofs, slide imports and projector legibility require separate validation. No new web tokens or print-conversion rules are created from these recipes.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 9–10 and 13.

Developer implementation

Load the existing central styles and use their responsive aliases. The following examples illustrate source rules for future applications, not a ready-made production grid or component library.

.corporate-container {
  inline-size: min(calc(100% - 2 * var(--page-margin)), var(--layout-max));
  margin-inline: auto;
}
.operational-workspace {
  inline-size: calc(100% - 2 * var(--page-margin));
  margin-inline: auto; /* No corporate cap. */
}
.alignment-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.alignment-grid > * { min-inline-size: 0; }
/* Existing tokens switch modes at 600, 1024 and 1280px.
   Spans and reading order depend on actual content. */
.workspace-layout { display: grid; gap: var(--grid-gutter); }
@media (min-width: 1024px) {
  .workspace-layout {
    grid-template-columns: var(--layout-sidebar) minmax(0, 1fr);
  }
}

.comfortable-card { padding: var(--padding-card-comfortable); }
.compact-card { padding: var(--padding-card-compact); }
.comfortable-fields { display: grid; gap: var(--gap-fields-comfortable); }
.compact-fields { display: grid; gap: var(--gap-fields-compact); }
.related-label { display: block; margin-block-end: var(--gap-inline); }
.control {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--target-min);
  block-size: auto;
  padding: var(--space-12) var(--space-16);
  font: inherit;
  line-height: var(--type-input-leading);
}
.compact-card .control {
  padding-block: var(--space-08);
  /* Selected working interpretation: source p3, not p2. */
}
.neighbouring-targets { display: flex; flex-wrap: wrap; gap: var(--space-08); }
.section { margin-block-start: var(--gap-section); }
.major-transition { margin-block-start: var(--gap-major); }
.compact-group { margin-block-start: var(--gap-group-compact); }

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cards > * { min-inline-size: 0; overflow-wrap: anywhere; }
.reading-text { max-inline-size: var(--measure); text-align: start; }
.logical-panel { padding-inline: var(--space-16); margin-inline: auto; }
.table-region { max-inline-size: 100%; overflow-x: auto; }
/* A wide table can retain its source-defined 640px minimum inside
   a labelled, keyboard-focusable region. Reflow surrounding content.
   For print, remove local clipping and allow table/code content to wrap.
   Use lang="ar" dir="rtl" for Arabic and bdi for known LTR identifiers. */

Keep heights flexible and labels visible. Native single-line inputs can contain more text than their visible area; verify caret scrolling with real long values. A wide table needs keyboard access, focus visibility and touch testing, not just an overflow declaration.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 3–4, 8, 11–12; snippets are documentation implementation guidance.

Validation and approval status

No comprehensive WCAG conformance, Arabic linguistic approval, physical reproduction approval or final company approval is claimed. The corporate website and production layout components remain separate work.

Source: Spacing & Layout Grid Exploration & Validation v1.0, pages 11–13; current implementation report and recorded internal compact-control decision.