# Literal Labs brand spacing

LL-DS / 03 SPACING V1.0 · Jul 2026

SCALE · GRID · LAYOUT NEWCASTLE · UK

\[ 05:14:22 \] SPACING SYSTEM · LITERAL LABS REGISTERED · ® LL-DS-1.0

# Spacing,  
_by the grid_.

**F37 JAN** · IOSKELEY MONO  
**4PX BASE** · 12-COL GRID  
® 2026 · NEWCASTLE

® LL-DS SERIAL · 7536U-141-779 · CYCLE 0421 OP·2 V1.0

CONSISTENT RHYTHM · PRECISE SCALE LAYOUT GRID · SPACING TOKENS REF: LL-DS

Scale · 4 px base, geometric

Token Size Preview Use

0 0pxCollapse

1px 1pxHairline rule

0.5× 4pxIcon nudge

1× 8pxTag gap

1.5× 12pxElement gap

2× 16pxCard padding

3× 24pxStack rhythm

4× 32pxSection pad

6× 48pxMajor break

8× 64pxHero gutter

12× 96pxPage break

16× 128pxFull reset

Base unit is `--grid-gutter-small: 0.5rem` (8px). All steps expressed as `calc(N * var(--grid-gutter-small))`.

Grid · 12 columns, 8px gutter

01

02

03

04

05

06

07

08

09

10

11

12

Max-width 1344px · Outside gutter `calc(6 * var(--grid-gutter-small))` · Column gap `var(--grid-gutter-small)`

is-full / 12 cols

is-half / 6 cols

is-one-third / 4 cols

is-one-quarter / 3 cols

is-two-thirds / 8 cols

is-three-quarters / 9 cols

is-one-fifth / 2.4 cols

is-four-fifths / 9.6 cols

Layout · asymmetric split is default

Side — label column

Mono meta

Nav / index

Main — content

Headline

Body copy

Sidebar `is-one-quarter` · Content `is-three-quarters` · Stacks to `is-full` below 768px

Stroke

Hair · 1px

Rule · 2px

Heavy · 4px

Chunky · 8px

Radius

Sharp0px

Micro2px

Small4px

Default8px

Pill999px

`--rounded-corners: 0.5rem` is the system default, used on cards, buttons, and form inputs. Sharp (0) reserved for ruled elements and data tables.

Shadow · hard-edged, no blur

Hard / 1

Hard / 2

Hard / 3

Brand

All shadows are offset-only (`box-shadow: Xpx Xpx 0 var(--ink)`). No blur radius. Brand variant uses `var(--brand)` as shadow colour.

Density · three settings

Compact4 / 8

Row 0112.4ms

Row 028.1ms

Row 034.9ms

Row 043.0ms

Default8 / 16

Row 0112.4ms

Row 028.1ms

Row 034.9ms

Comfy14 / 24

Row 0112.4ms

Row 028.1ms

Compact: `4px / 8px` row padding · Default: `8px / 16px` · Comfy: `14px / 24px`. Choose based on data density, not preference.

[Motion](https://www.literal-labs.ai/about/brand-guide-motion.html)

[Brand Guide](https://www.literal-labs.ai/about/brand-guide.html)