Tokens
Tokens are the base of MinoCSS elements and components. All you need to change the visual style using MinoCSS is managing tokens. We have a couple of collections related with each other up to main simple config.
Palette collection
| Title | CSS name | Type | Value |
|---|---|---|---|
| Accent color | --accent | ||
| Foreground color | --fg | ||
| Middle color | --md | ||
| Background color | --bg | ||
| Palette / White color | --palette-white | ||
| Palette / Black color | --palette-black | ||
| Palette / Transparency | --palette-transparent | ||
| Palette / Logo light | --palette-logo-light | ||
| Palette / Logo dark | --palette-logo-dark | ||
| palette-bg-dark | --palette-bg-dark | ||
| palette-text-light | --palette-text-light | ||
| palette-info-main | --palette-info-main | ||
| palette-success-main | --palette-success-main | ||
| palette-warning-main | --palette-warning-main | ||
| palette-error-main | --palette-error-main | ||
| palette-illustration-dark | --palette-illustration-dark | ||
| palette-illustration-light | --palette-illustration-light | ||
| scale-5xs | --scale-5xs | ||
| scale-4xs | --scale-4xs | ||
| scale-3xs | --scale-3xs | ||
| scale-2xs | --scale-2xs | ||
| scale-xs | --scale-xs | ||
| scale-sm | --scale-sm | ||
| scale-md | --scale-md | ||
| scale-lg | --scale-lg | ||
| scale-xl | --scale-xl | ||
| scale-2xl | --scale-2xl | ||
| scale-3xl | --scale-3xl | ||
| scale-4xl | --scale-4xl | ||
| scale-5xl | --scale-5xl | ||
| ratio-5xs | --ratio-5xs | ||
| ratio-4xs | --ratio-4xs | ||
| ratio-3xs | --ratio-3xs | ||
| ratio-2xs | --ratio-2xs | ||
| ratio-xs | --ratio-xs | ||
| ratio-sm | --ratio-sm | ||
| ratio-md | --ratio-md | ||
| ratio-lg | --ratio-lg | ||
| ratio-xl | --ratio-xl | ||
| ratio-2xl | --ratio-2xl | ||
| ratio-3xl | --ratio-3xl | ||
| ratio-4xl | --ratio-4xl | ||
| ratio-5xl | --ratio-5xl | ||
| size-base | --size-base | ||
| size-half | --size-half | ||
| size-border-null | --size-border-null | ||
| size-border-thin | --size-border-thin | ||
| size-border-regular | --size-border-regular | ||
| size-border-thick | --size-border-thick | ||
| size-radius-null | --size-radius-null | ||
| size-radius-xs | --size-radius-xs | ||
| size-radius-sm | --size-radius-sm | ||
| size-radius-md | --size-radius-md | ||
| size-radius-lg | --size-radius-lg | ||
| size-radius-xl | --size-radius-xl | ||
| size-radius-full | --size-radius-full | ||
| size-letter-spacing-base | --size-letter-spacing-base | ||
| size-icon-stroke | --size-icon-stroke | ||
| size-icon-style | --size-icon-style | ||
| size-icon-radius-small | --size-icon-radius-small | ||
| size-icon-radius-medium | --size-icon-radius-medium | ||
| size-icon-radius-large | --size-icon-radius-large | ||
| unit | --unit | ||
| typeface-font | --typeface-font | ||
| typeface-url | --typeface-url | ||
| typeface-icon-font-url | --typeface-icon-font-url | ||
| typeface-icon-font | --typeface-icon-font | ||
| typeface-thin | --typeface-thin | ||
| typeface-extra-light | --typeface-extra-light | ||
| typeface-extra-bold | --typeface-extra-bold | ||
| typeface-light | --typeface-light | ||
| typeface-regular | --typeface-regular | ||
| typeface-medium | --typeface-medium | ||
| typeface-semi-bold | --typeface-semi-bold | ||
| typeface-bold | --typeface-bold | ||
| typeface-black | --typeface-black | ||
| style-border-use | --style-border-use | ||
| style-border-opacity | --style-border-opacity | ||
| style-border-width | --style-border-width | ||
| style-gradient-use | --style-gradient-use | ||
| style-shadow-drop-x | --style-shadow-drop-x | ||
| style-shadow-drop-y | --style-shadow-drop-y | ||
| style-shadow-drop-blur | --style-shadow-drop-blur | ||
| style-shadow-drop-spread | --style-shadow-drop-spread | ||
| style-shadow-drop | --style-shadow-drop | ||
| style-shadow-inner-x | --style-shadow-inner-x | ||
| style-shadow-inner-y | --style-shadow-inner-y | ||
| style-shadow-inner-blur | --style-shadow-inner-blur | ||
| style-shadow-inner-spread | --style-shadow-inner-spread | ||
| style-shadow-inner | --style-shadow-inner | ||
| style-background-use | --style-background-use | ||
| style-background-opacity | --style-background-opacity | ||
| style-background-blur-use | --style-background-blur-use | ||
| style-background-blur-blur | --style-background-blur-blur | ||
| style-background-blur-color | --style-background-blur-color | ||
| page-width-max | --page-width-max | ||
| page-width | --page-width | ||
| page-columns | --page-columns | ||
| page-gap | --page-gap | ||
| page-padding-vertical | --page-padding-vertical | ||
| page-padding-horizontal | --page-padding-horizontal | ||
| page-padding | --page-padding | ||
| sidebar-width | --sidebar-width | ||
| tablet | --tablet | ||
| mobile | --mobile |
Plugins
Check Tokens documentation to learn more on using tokens in your design.
Figma
Sync designs with figma
Adobe XD
Upload design tokens to Adobe XD
Build better UI, faster
Get updates on new features, tools, and ideas behind MinoCSS.