Design System

      Border

      Border includes a scale for width and radius, both built in increments and used to create consistent border styling throughout the system.

      Width

      border-width/100

      1px

      Sample

      border-width/200

      2px

      Sample

      border-width/300

      3px

      Sample

      border-width/400

      4px

      Sample

      border-width/500

      6px

      Sample

      border-width/600

      8px

      Sample

      border-width/700

      12px

      Sample

      border-width/800

      16px

      Sample

      Radius

      border-radius/100

      2px

      Sample

      border-radius/200

      4px

      Sample

      border-radius/300

      6px

      Sample

      border-radius/400

      8px

      Sample

      border-radius/500

      12px

      Sample

      border-radius/600

      16px

      Sample

      border-radius/full

      9999px

      Sample