Box Styles
border size, radius & box shadow
Border Radius
Standard Radius
Rounded corners should use the default base radius (md) which is 4px for all buttons, input fields, and cards to create a cohesive, approachable design.
Sharp Corners
Elements such as tables, grids, and containers requiring a more structured appearance should use 0px for border radius.
Large Radius
Elements that require a softer, more organic shape can use a larger radius of 8px to 10px, primarily for overlays or highlighted content.
Circular Elements
Circular avatars: Use border-radius: 50% on square images
Pill buttons: Use border-radius: 9999px for pills
0.2222rem = 4px
0.4444rem = 8px
0.5556rem = 10px
(for pills, circles) 9999px
Border Options
In our design system, borders are used to visually define boundaries, emphasize content, and create separation between elements. The following border styles ensure consistency across all components while maintaining a flexible, scalable approach for various use cases. All border styles are designed to comply with WCAG accessibility standards.
The default settings are generalized for minimum configurations. Some settings, such as spacing (padding and margins), border size, font size, and others, use scalable, responsive measurements defined by the CSS clamp function. These minimum settings are commonly used in design to establish consistency for design elements. Once implemented on a website or related project, the predefined variables create a cohesive preset, scalable layout and style adjustments necessary to maintain accessibility and uniformity layout accross screen sizes.
Solid
The default style for most borders is solid. This style is applied across buttons, form fields, and containers.
Dashed / Dotted
Dashed or dotted borders should be used sparingly, mainly for decorative elements or highlights such as dividers or sections requiring non-intrusive separation.
None
Some elements may opt to have no visible borders, using shadows or background contrast instead to delineate sections.
Full Borders
For most components, borders are applied uniformly on all sides.
Partial Borders
Specific elements, such as card headers, navigation menus, or lists, may use borders only on specific sides (e.g., top, bottom) to create visual separation without overwhelming the design.
Focus Rings
For accessibility, interactive elements must have a distinct focus ring (or outline) in addition to any border change, ensuring keyboard and assistive device users can easily navigate.
Standard Border Width
All standard borders across the design system should use a minimum width of 1px and up to 6px for heavier emphasis. default is set at (md) 4px
Medium Borders
Use 4px for elements that need stronger visual distinction, such as cards and buttons.
Thin Borders
Elements requiring subtle distinction will use a border width of 2px.
Thick Borders
Borders of 6px are reserved for high-emphasis elements like highlighted sections
bs-sm: 0.1111rem = 2px
bs-sm-fluid: 1px - 2px
bs-md: 0.2222rem = 4px
3px - 4px
bs-lg: 0.3333rem = 6px
bs-lg-fluid: 5px - 6px
Shadow Options
Shadows in this system are used to create subtle depth, separate layers, and enhance visual hierarchy without overwhelming the interface. The shadow-sm, shadow-md, and shadow-lg options provide scalable elevation cues using semi-transparent black (rgba(0, 0, 0, 0.24–0.32)) to maintain flexibility across light and dark backgrounds. Inset variants offer additional options for embedding elements within surfaces or panels. These shadows are purely decorative and are not relied upon to convey focus, state, or interaction. For accessibility and WCAG compliance, all interactive elements must use high-contrast outlines or indicators in addition to shadows to ensure clear visibility across all users and display modes.
Need to add dark mode...Inset shadows (WCAG-safe for darker UI layers or light containers)
Wcag
WCAG doesn't directly regulate box-shadow usage, but shadows can impact contrast - especially:
- For interactive focus states
- For text or UI elements relying on shadows to convey meaning
Use shadows only for visual embellishments, WCAG as long as they are not:
- The only indication of focus/active state
- Used as the only differentiator between actionable vs. inactive UI elements
WCAG Success Criterion 1.4.11 (Non-text Contrast) recommends:
- A minimum contrast ratio of 3:1 between the component and adjacent colors (including visual boundaries like shadows)
- rgba(0, 0, 0, 0.28) on white has very low contrast.
- It’s fine for decorative shadows (like elevation), but not for focus rings, outlines, or important states.
For example:
Standard shadows
0 2px 3px rgba(0, 0, 0, 0.28);
0 3px 6px rgba(0, 0, 0, 0.24);
0 6px 12px rgba(0, 0, 0, 0.32);
Inset shadows
inset 0 2px 3px rgba(0, 0, 0, 0.28);
inset 0 3px 6px rgba(0, 0, 0, 0.24);
inset 0 6px 12px rgba(0, 0, 0, 0.32);