Shape

Radius and stroke are the two properties that decide how an edge reads — how soft a surface’s corners are and how firmly it is outlined. They are documented together because they are almost always chosen together, and because a brand expresses a great deal through them: Toyota’s sharper corners against Lexus’s rounder ones is largely this pair of scales.

Note

Primitive tokens are fixed values that will not differ between brands. Semantic tokens are mapped to primitive tokens and can differ between brands. Use whichever is more appropriate for your use case.

Radius

Primitive

--tng-radius-0

0px

 

--tng-radius-1

1px

 

--tng-radius-2

2px

 

--tng-radius-3

3px

 

--tng-radius-4

4px

 

--tng-radius-5

5px

 

--tng-radius-7

7px

 

--tng-radius-8

8px

 

--tng-radius-10

10px

 

--tng-radius-15

15px

 

--tng-radius-16

16px

 

--tng-radius-1000

1000px

 

--tng-radius-0

0px

 

--tng-radius-1

1px

 

--tng-radius-2

2px

 

--tng-radius-3

3px

 

--tng-radius-4

4px

 

--tng-radius-5

5px

 

--tng-radius-7

7px

 

--tng-radius-8

8px

 

--tng-radius-10

10px

 

--tng-radius-15

15px

 

--tng-radius-16

16px

 

--tng-radius-1000

1000px

 

--tng-radius-0

0px

 

--tng-radius-1

1px

 

--tng-radius-2

2px

 

--tng-radius-3

3px

 

--tng-radius-4

4px

 

--tng-radius-5

5px

 

--tng-radius-7

7px

 

--tng-radius-8

8px

 

--tng-radius-10

10px

 

--tng-radius-15

15px

 

--tng-radius-16

16px

 

--tng-radius-1000

1000px

 

Semantic

Note

These values are for the brand selected at the top of the page. A semantic token can resolve to a different value per brand.

--tng-radius-none

0px

 

--tng-radius-2xs

3px

 

--tng-radius-xs

5px

 

--tng-radius-sm

7px

 

--tng-radius-md

10px

 

--tng-radius-lg

15px

 

--tng-radius-xl

1000px

 

--tng-radius-none

0px

 

--tng-radius-2xs

1px

 

--tng-radius-xs

2px

 

--tng-radius-sm

4px

 

--tng-radius-md

8px

 

--tng-radius-lg

16px

 

--tng-radius-xl

1000px

 

--tng-radius-none

0px

 

--tng-radius-2xs

1px

 

--tng-radius-xs

2px

 

--tng-radius-sm

4px

 

--tng-radius-md

8px

 

--tng-radius-lg

16px

 

--tng-radius-xl

1000px

 

Stroke

Primitive

--tng-stroke-0

0px

 

--tng-stroke-1

1px

 

--tng-stroke-2

2px

 

--tng-stroke-4

4px

 

--tng-stroke-05

0.5px

 

--tng-stroke-0

0px

 

--tng-stroke-1

1px

 

--tng-stroke-2

2px

 

--tng-stroke-4

4px

 

--tng-stroke-05

0.5px

 

--tng-stroke-0

0px

 

--tng-stroke-1

1px

 

--tng-stroke-2

2px

 

--tng-stroke-4

4px

 

--tng-stroke-05

0.5px

 

Semantic

Note

These values are for the brand selected at the top of the page. A semantic token can resolve to a different value per brand.

--tng-stroke-none

0px

 

--tng-stroke-xs

0.5px

 

--tng-stroke-sm

1px

 

--tng-stroke-md

2px

 

--tng-stroke-lg

4px

 

--tng-stroke-none

0px

 

--tng-stroke-xs

0.5px

 

--tng-stroke-sm

1px

 

--tng-stroke-md

2px

 

--tng-stroke-lg

4px

 

--tng-stroke-none

0px

 

--tng-stroke-xs

0.5px

 

--tng-stroke-sm

1px

 

--tng-stroke-md

2px

 

--tng-stroke-lg

4px