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-00px

 

--tng-radius-11px

 

--tng-radius-22px

 

--tng-radius-33px

 

--tng-radius-44px

 

--tng-radius-55px

 

--tng-radius-77px

 

--tng-radius-88px

 

--tng-radius-1010px

 

--tng-radius-1515px

 

--tng-radius-1616px

 

--tng-radius-10001000px

 

--tng-radius-00px

 

--tng-radius-11px

 

--tng-radius-22px

 

--tng-radius-33px

 

--tng-radius-44px

 

--tng-radius-55px

 

--tng-radius-77px

 

--tng-radius-88px

 

--tng-radius-1010px

 

--tng-radius-1515px

 

--tng-radius-1616px

 

--tng-radius-10001000px

 

--tng-radius-00px

 

--tng-radius-11px

 

--tng-radius-22px

 

--tng-radius-33px

 

--tng-radius-44px

 

--tng-radius-55px

 

--tng-radius-77px

 

--tng-radius-88px

 

--tng-radius-1010px

 

--tng-radius-1515px

 

--tng-radius-1616px

 

--tng-radius-10001000px

 

Semantic

--tng-radius-none0px

 

--tng-radius-2xs3px

 

--tng-radius-xs5px

 

--tng-radius-sm7px

 

--tng-radius-md10px

 

--tng-radius-lg15px

 

--tng-radius-xl1000px

 

--tng-radius-none0px

 

--tng-radius-2xs1px

 

--tng-radius-xs2px

 

--tng-radius-sm4px

 

--tng-radius-md8px

 

--tng-radius-lg16px

 

--tng-radius-xl1000px

 

--tng-radius-none0px

 

--tng-radius-2xs1px

 

--tng-radius-xs2px

 

--tng-radius-sm4px

 

--tng-radius-md8px

 

--tng-radius-lg16px

 

--tng-radius-xl1000px

 

Stroke

Primitive

--tng-stroke-00px

 

--tng-stroke-11px

 

--tng-stroke-22px

 

--tng-stroke-44px

 

--tng-stroke-050.5px

 

--tng-stroke-00px

 

--tng-stroke-11px

 

--tng-stroke-22px

 

--tng-stroke-44px

 

--tng-stroke-050.5px

 

--tng-stroke-00px

 

--tng-stroke-11px

 

--tng-stroke-22px

 

--tng-stroke-44px

 

--tng-stroke-050.5px

 

Semantic

--tng-stroke-none0px

 

--tng-stroke-xs0.5px

 

--tng-stroke-sm1px

 

--tng-stroke-md2px

 

--tng-stroke-lg4px

 

--tng-stroke-none0px

 

--tng-stroke-xs0.5px

 

--tng-stroke-sm1px

 

--tng-stroke-md2px

 

--tng-stroke-lg4px

 

--tng-stroke-none0px

 

--tng-stroke-xs0.5px

 

--tng-stroke-sm1px

 

--tng-stroke-md2px

 

--tng-stroke-lg4px