Size Scale

space scale

type: size-scale
A decision to define a size scale.

Models

The following models can be used to produce a Size Scale decision.

Explicit value

Defines a size scale with arbitrary size values.

Sample decision

5px

10px

15px

20px

30px

50px

Model:

size-scale/explicit

Params:

values
- 0
  
  5
- 1
  
  10
- 2
  
  15
- 3
  
  20
- 4
  
  30
- 5
  
  50

Sample data

{
  "name": "Size Scale Explicit Sample",
  "model": "size-scale/explicit",
  "params": {
    "values": [
      5,
      10,
      15,
      20,
      30,
      50
    ]
  }
}

🐘 Help wanted: Documenting schemas

Bounded

Defines a size scale interpolating linearly between two size values.

Sample decision

25px

54.2px

83.3px

112.5px

141.7px

170.8px

200px

Model:

size-scale/bounded

Params:

from

25
to

200
steps

5

Sample data

{
  "name": "Size Scale Bounded Sample",
  "model": "size-scale/bounded",
  "params": {
    "from": 25,
    "to": 200,
    "steps": 5
  }
}

🐘 Help wanted: Documenting schemas

Anchored

Defines a size scale from an anchor value applying modifiers to generate items before and/or after the anchor .

Sample decision

10px

20px

30px

60px

120px

240px

Model:

size-scale/anchored

Params:

anchor

30
before
- steps
  
  2
- modifier
  - mode
    
    linear
  - by
    
    -10
after
- steps
  
  3
- modifier
  - mode
    
    geometric
  - by
    
    2

Sample data

{
  "name": "Size Scale Anchored Sample",
  "model": "size-scale/anchored",
  "params": {
    "anchor": 30,
    "before": {
      "steps": 2,
      "modifier": {
        "mode": "linear",
        "by": -10
      }
    },
    "after": {
      "steps": 3,
      "modifier": {
        "mode": "geometric",
        "by": 2
      }
    }
  }
}