Ecco System
0.3.0
0.3.0
  • Please read this first!
  • Concept foundation
  • Tokens
    • Colors
    • Typography
    • Spacing
    • Border radius
    • Grid
  • Components
    • Buttons
    • Form elements
      • Checkbox
      • Checkbox Toggle
      • Date picker
      • Dropdown
      • File Selector
      • Radio button
      • Slider
      • Text fields
    • Lists
      • Tables
    • Menus
      • Global navigation
      • Tabs
      • Tree
    • Modal
    • Pagination
    • Toast and Status Bar
    • Tool tip
  • Templates
    • Web desktop templates
    • Larger mobile templates
    • Smaller mobile templates
Powered by GitBook
On this page
  • Tokens
  • Usage example

Was this helpful?

  1. Tokens

Spacing

Maybe the main token to create an FCA interface style.

PreviousTypographyNextBorder radius

Last updated 4 years ago

Was this helpful?

Spacing is one strong token that supports the interface hierarchy. So a tiny space groups a type of information and a large one isolates a different one.

As typography tokens, spacing tokens are defined with responsives variables. So to Android, we use the DP scale, to iOS, we use the PT scale and to browser, we use the REM scale.

The pixels scales written bellow are dedicated to UI designers, so they can use the parameters to build interfaces.

Tokens

Token

Web (in REM)

Android or iOS

(in DP or PT)

Pixels

$spacing-xs

0.25rem

4

4px

$spacing-s

0.5rem

8

8px

$spacing-m

1rem

16

16px

$spacing-g

2rem

32

32px

$spacing-xg

3rem

48

48px

$spacing-xxg

4.5rem

72

72px

Usage example

Browser Full HD ratio
Browser HD ratio
Mobile
Mobile