Utilities
All OUDS utilities at a glance.
On this page
To integrate a Figma design, you will have to use tokens that are defined as ouds/**. This page gives you some directions on how to use these tokens within your codebase.
General usage
Our utilities are built on top of our semantic tokens and our composite tokens. They are the preferred way to use our tokens. When a token is used on Figma side, you should check if there is a utility class available for it.
We build our CSS variables following the architecture of the Figma tokens:
- Raw tokens: No raw token is available as a utility.
- Semantic tokens: Semantic tokens are all available as utilities.
- Composite tokens: Composite tokens are all available as utilities.
- Component tokens: No component token is available as a utility.
Using our utilities
When a token is used on Figma side, you should check if there is a utility class available for it. If there is, you should use it. This way, you will be sure that the token is applied correctly, and that it will be updated automatically when the token value changes.
| On Figma I see | Used token | Utility classes | Utility link |
|---|---|---|---|
A background color using a standard token ouds/color/{bg|surface}/*. | ouds/color/bg/secondaryouds/color/surface/brand-primary | .bg-secondary.bg-surface-brand-primary | Background |
A border using a standard token ouds/color/border/* or ouds/border/*. | ouds/color/border/defaultouds/border/radius/smallouds/border/width/thick | .border-default.rounded-small.border-thick | Border |
A content using a standard color token ouds/color/content/*. | ouds/color/content/mutedouds/color/content/on/brand-primary | .text-muted.text-on-brand-primary | Color |
A color for a background, a border or a content, used depending on a user action ouds/color/action/*. | ouds/color/action/pressed | --bs-color-action-pressed | No utility, use a CSS variable. |
An opacity using a standard token ouds/opacity/*, used carefully because it might affect design or accessibility. | ouds/opacity/medium | .opacity-medium | Opacity |
A shadow using a composite token like ouds/elevation/*. | ouds/elevation/**/emphasized | .shadow-emphasized | Shadow |
A spacing using a standard token ouds/space/{scaled|fixed}/* or ouds/space/{column-gap|row-gap}/*. | ouds/space/scaled/2xlargeouds/space/fixed/mediumouds/space/row-gap/none | .p-scaled-2xlarge.p-medium.row-gap-none | Spacing |
A text using a named typography reference or tokens like ouds/font/* or font-ref/size/weight. | ouds/font/**/body-largeBody/Large/Strong | .fs-bl.fs-bl.fw-bold | Typography |
A spacing using a grid token ouds/grid/* | ouds/grid/column-gapouds/grid/margin | .gap-gridgap.px-gridmargin | Spacing |
Using our variables
Variables names can be easily inferred from token names, this is explained in the tokens documentation.
| On Figma I see | Used token | Associated CSS variables | Associated Sass variables |
|---|---|---|---|
A background color using a standard token ouds/color/*. | ouds/color/bg/secondaryouds/color/surface/brand-primaryouds/color/action/hover | --bs-color-bg-secondary--bs-color-surface-brand-primary--bs-color-action-hover | $ouds-color-bg-secondary$ouds-color-surface-brand-primary$ouds-color-action-hover |
A border using a standard token ouds/color/border/* or ouds/border/*. | ouds/color/border/defaultouds/border/radius/smallouds/border/width/thick | --bs-color-border-defaultnonenone | $ouds-color-border-default$ouds-border-radius-small$ouds-border-width-thick |
A content using a standard color token ouds/color/content/*. | ouds/color/content/mutedouds/color/content/on/brand-primaryouds/color/content/on/action/hover | --bs-color-content-muted--bs-color-content-on-brand-primary--bs-color-content-on-action-hover | $ouds-color-content-muted$ouds-color-content-on-brand-primary$ouds-color-content-on-action-hover |
An opacity using a standard token ouds/opacity/*. Be careful where the token is applied. | ouds/opacity/medium | none | $ouds-opacity-medium |
A shadow using a composite token like ouds/elevation/*. | ouds/elevation/**/emphasized | none | $ouds-elevation-emphasized |
A spacing using a standard token ouds/space/{scaled|fixed}/* or ouds/space/{column-gap|row-gap}/*. | ouds/space/scaled/2xlargeouds/space/fixed/mediumouds/space/row-gap/none | --bs-space-scaled-2xlargenonenone | none$ouds-space-fixed-medium$ouds-space-row-gap-none |
A text using a named typography reference or tokens like ouds/font/* or font-ref/size/weight. | ouds/font/**/body-largeBody/Large/Strong | get-font-size("body-large")noneAs you can see, this one is a bit special and calls a mixin get-font-size(). | none$ouds-font-weight-web-body-strong |
A spacing using a grid token ouds/grid/* | ouds/grid/column-gapouds/grid/margin | --bs-grid-gap--bs-grid-margin | nonenone |