REIS IA ESCALA DE ESPAÇAMENTO DESIGN SYSTEM v1.0

Escala de Espaçamento

Two complementary spacing systems: fluid named tokens that scale with viewport for section-level spacing, and a static numeric scale for component-level gaps. Every value is a CSS custom property with a purpose-driven name.

[01] Espaçamento Fluido Nomeado

8 tokens using clamp() for seamless scaling between mobile (375px) and desktop (1280px). The bars below show the ACTUAL computed pixel width at your current viewport. Resize the browser to see them change.

Click any row to copy the CSS variable. The first three (xs, sm, md) are static. The last five scale fluidly. Each step is roughly 1.5-2x the previous.

4px (static)

8px (static)

16px (static)

24px → 32px

32px → 48px

2xl

48px → 80px

3xl

64px → 120px

4xl

80px → 160px

Fluid Clamp Formulas

/* Fluid Spacing Tokens */
--space-xs:  4px;
--space-sm:  8px;
--space-md:  16px;
--space-lg:  clamp(24px, 1vw + 20px, 32px);
--space-xl:  clamp(32px, 2vw + 24px, 48px);
--space-2xl: clamp(48px, 4vw + 32px, 80px);
--space-3xl: clamp(64px, 7vw + 36px, 120px);
--space-4xl: clamp(80px, 10vw + 40px, 160px);

When to use Named Spacing

Section vertical padding: --space-3xl (standard) or --space-4xl (hero)
Major content breaks between sections
Hero breathing room and page-level vertical rhythm
Any spacing that should scale fluidly with viewport

[02] Espaçamento Numérico de Componentes

11-step static scale for component-level gaps, padding, and margins. These do not scale with viewport. Based on a 4px grid with intermediate values (12px, 20px) for common UI needs.

gap-0

0px

gap-1

4px

gap-2

8px

gap-3

12px

gap-4

16px

gap-5

20px

gap-6

24px

gap-7

32px

gap-8

40px

gap-9

48px

gap-10

64px

Static Gap Scale

/* Static Component Spacing */
--gap-0:  0px;    --gap-1:  4px;
--gap-2:  8px;    --gap-3:  12px;
--gap-4:  16px;   --gap-5:  20px;
--gap-6:  24px;   --gap-7:  32px;
--gap-8:  40px;   --gap-9:  48px;
--gap-10: 64px;

When to use Numeric Spacing

Grid gaps: gap: var(--gap-4)
Card internal padding: padding: var(--gap-6) or var(--gap-7)
Icon-to-label gaps: gap: var(--gap-2)
Button padding, badge spacing, form element gaps

[03] Nomeado vs Numérico — Comparação

The two scales serve different purposes. Named tokens define the page-level rhythm. Numeric tokens define the component-level rhythm. They work together but should not be mixed in the wrong context.

Named (Fluid)

-- Scales with viewport via clamp()
-- Section padding, page-level vertical rhythm
-- Hero breathing room, major content breaks
-- 8 tokens: xs through 4xl

Numeric (Static)

-- Fixed pixel values, no viewport scaling
-- Grid gaps, card padding, component spacing
-- Icon gaps, button padding, form fields
-- 11 tokens: gap-0 through gap-10

Use --space-3xl for section vertical padding
Use --gap-4 or --gap-6 for card internal padding
Use --gap-2 for inline icon-to-text gaps
Use --space-xl between content groups within a section

Don't

Use --gap-10 for section padding (does not scale)
Use --space-3xl for component grid gaps (over-scales)
Use arbitrary values like 17px or 22px
Mix named and numeric in the same property

[04] Regras de Padding de Seção

Standardized vertical padding for different section types. These demos use ACTUAL token values -- the height of each box is the real computed padding at your viewport width.

Hero Section Maximum breathing room

--space-4xl 80-160px

Standard Section Default section rhythm

--space-3xl 64-120px

Compact Section Dense content areas

--space-2xl 48-80px

Footer CTA Asymmetric: more top, less bottom

--space-3xl / --space-2xl 64-120px / 48-80px

Token

Value

Usage

Hero

--space-4xl top / --space-3xl bottom

80-160px top, 64-120px bottom

Standard

--space-3xl top and bottom

64-120px both sides

Compact

--space-2xl top and bottom

48-80px both sides

Footer CTA

--space-3xl top / --space-2xl bottom

64-120px top, 48-80px bottom

[05] Larguras de Container

Content width hierarchy. Each container has a semantic name matching its content type. The bars below show relative proportions at your current viewport width.

Wide

1280px

Standard

1200px

Headline

900px

Narrow

800px

Text

680px

Container Padding

--container-padding: clamp(20px, 5vw, 48px) -- fluid horizontal padding applied to all containers. Mobile (375px): 20px. Tablet (768px): ~38px. Desktop (1280px+): 48px.

[06] Escala de Border Radius

8-step radius scale from sharp corners to full pills. The default --radius (8px) is used for most components.

0px

none

4px

6px

8px

base

10px

12px

16px

2xl

9999px

full

Token

Value

Usage

none

0px

Sharp corners, full-bleed

4px

Badges, tags, inline code

6px

Small buttons, inputs

base

8px

Default for most components

10px

Large buttons, hero inputs

12px

Cards, panels

2xl

16px

Glass cards, large panels

full

9999px

Pills, avatars, circles

[07] Espaçamento em Contexto

Live demonstration of spacing tokens applied to a typical card composition, with annotated token values. This card uses the real design system tokens.

Live Card

Card Title

Card description text demonstrating the spacing between title, description, and internal elements.

Learn more

gap-7 padding

Tokens Used

Card padding

--gap-7

32px

Icon to title

--gap-6

24px

Title to desc

--gap-3

12px

Desc to CTA

--gap-6

24px

CTA icon gap

--gap-2

8px

Border radius

--radius-xl

12px

[08] Comportamento Responsivo do Espaçamento

Fluid vs Static

Named spacing tokens (space-lg through space-4xl) use clamp() for seamless scaling. There are no breakpoint jumps. Numeric tokens (gap-0 through gap-10) remain fixed at all viewport sizes.

Mobile Surface Rules

On mobile viewports (below 768px), use a maximum of 2 surface tiers per visible area. Component spacing should use gap-4 (16px) to gap-6 (24px) for card padding on mobile.

Container Padding Progression

Container horizontal padding is clamp(20px, 5vw, 48px), providing 20px on mobile, scaling to 48px on wide desktops. This single token replaces the typical px-4 sm:px-6 md:px-8.