Foundations / Borders
Borders
Two widths and three border colors, and the icon stroke width. Use the strong border on form fields so they are easy to see.
Version 1.4 · Oct 20, 2026
Widths and colors
border-width-default
1 px
Dividers, cards and tables.
border-width-strong
2 px
Focus, selection and emphasis.
icon-stroke
1.5 px
Icon stroke (vuesax linear set), the same at all sizes.
border-default
color-border-default · #E4E4E4
Default color: divider lines and cards.
border-strong
color-ink · #021627
Form fields and borders that must be easy to see.
border-inverse
#FFFFFF at 10%
Dividers and cards on an Ink background.
Border contrast
Pair
Contrast
When to use it
border-default on color-white
1.27
Decorative only: it separates content, it does not mark controls.
border-strong on color-white
18.31
Fields and controls: passes the minimum of 3.
Fields and controls
So it is clear where to type, a form field needs a border with a contrast of at least 3 against the background (the WCAG accessibility standard asks for it): use border-strong. border-default only separates content.
What to do and what to avoid
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.