Border Radius
Standard Radius
Rounded corners should use the default base radius (radius-md) for buttons, input fields, and cards to create a cohesive, approachable design.
Sharp Corners
Elements such as tables, grids, and some layout containers may use radius-none when a more structured appearance is needed.
Large Radius
Elements that need a softer shape can use radius-lg. This works well for highlighted content, overlays, and softer card treatments.
Circular Elements
Circular avatars: use border-radius: 50% on square images when needed.
Pills and capsules: use radius-full for pill shapes and rounded controls.
0.2222rem = 4px
0.4444rem = 8px
0.5556rem = 10px
9999px for pills and fully rounded shapes
0px
Border Options
Border utilities define edge weight, direction, and color without creating custom component CSS. Use them to keep cards, alerts, sections, and layout dividers consistent across the site.
Border width tokens are defined in css/tokens/wg-tokens-box.css. Border utilities are applied in css/utilities/wg-utilities-box.css, and border colors are applied in css/utilities/wg-utilities-color.css.
Full Border
Use bs-sm, bs-md, or bs-lg when all four sides should share the same border width.
Side-specific Border
Use top, right, bottom, and left helpers when only one side needs emphasis, such as headers, tabs, panels, and split layouts.
Axis Helpers
bs-x-* adds left and right borders. bs-y-* adds top and bottom borders.
Reset Helpers
Use bs-t-0, bs-r-0, bs-b-0, bs-l-0, bs-x-0, and bs-y-0 to remove borders where needed.
Border Color
Color classes such as border-wolverine-green or border-uvu-green can be paired with any border width utility.
Responsive Helpers
Directional, axis, and reset border helpers also have breakpoint variants like md:bs-t-lg and lg:bs-x-0.
Full Border Width
bs-sm
border: solid var(--bs-sm)
bs-md
border: solid var(--bs-md)
bs-lg
border: solid var(--bs-lg)
bs-none
border: none
Side-specific Border Classes
bs-t-sm
bs-t-md
bs-t-lg
bs-r-sm
bs-r-md
bs-r-lg
bs-b-sm
bs-b-md
bs-b-lg
bs-l-sm
bs-l-md
bs-l-lg
Axis Border Classes
bs-x-sm
bs-x-md
bs-x-lg
bs-y-sm
bs-y-md
bs-y-lg
Border Reset Classes
bs-t-0
bs-r-0
bs-b-0
bs-l-0
bs-x-0
bs-y-0
Border Color Classes
Pair any width utility with a border color utility. Example: bs-t-lg border-wolverine-green.
Responsive Border Helpers
Medium breakpoint
Available responsive helpers include:
md:bs-t-sm, md:bs-r-sm, md:bs-b-sm, md:bs-l-sm,
md:bs-x-sm, md:bs-y-sm,
md:bs-t-md, md:bs-r-md, md:bs-b-md, md:bs-l-md,
md:bs-x-md, md:bs-y-md,
md:bs-t-lg, md:bs-r-lg, md:bs-b-lg, md:bs-l-lg,
md:bs-x-lg, md:bs-y-lg,
plus md:bs-t-0, md:bs-r-0, md:bs-b-0, md:bs-l-0,
md:bs-x-0, and md:bs-y-0.
Large breakpoint
Matching large-screen helpers are also available:
lg:bs-t-sm, lg:bs-r-sm, lg:bs-b-sm, lg:bs-l-sm,
lg:bs-x-sm, lg:bs-y-sm,
lg:bs-t-md, lg:bs-r-md, lg:bs-b-md, lg:bs-l-md,
lg:bs-x-md, lg:bs-y-md,
lg:bs-t-lg, lg:bs-r-lg, lg:bs-b-lg, lg:bs-l-lg,
lg:bs-x-lg, lg:bs-y-lg,
plus lg:bs-t-0, lg:bs-r-0, lg:bs-b-0, lg:bs-l-0,
lg:bs-x-0, and lg:bs-y-0.
bs-sm: uses var(--bs-sm)
token base: 0.1111rem static / fluid token active
bs-md: uses var(--bs-md)
token base: 0.2222rem static / fluid token active
bs-lg: uses var(--bs-lg)
token base: 0.3333rem static / fluid token active
bs-none: border removed
use when: contrast or shadow carries the edge
Shadow Options
Shadows create subtle depth, separate layers, and support hierarchy. They are decorative and should not be relied on to communicate focus, state, or interaction by themselves. Interactive elements still need visible focus indicators.
Need to add dark mode... Inset shadows can be useful on darker UI layers or lighter inset surfaces, but they still should not replace focus or state styling.
WCAG
WCAG does not directly regulate box-shadow values, but shadows can affect perceived contrast, especially:
- For interactive focus states
- For UI elements that rely on shadows to show meaning
Use shadows for visual enhancement, not as:
- The only indication of focus or active state
- The only difference between actionable and inactive elements
WCAG 1.4.11 (Non-text Contrast)
Component boundaries and focus indicators should still maintain enough contrast with adjacent colors.
For example:
rgba(0, 0, 0, 0.28)on white may be fine for decorative elevation.- It is not strong enough to function as a focus ring or required state indicator on its own.
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)
It seems that you have reduce motion enabled!