Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

Colors

Color palette

-300 is the default token value for colors, from which all other colors are derived. This means the utility class .bg-secondary-300 can be shortened to .bg-secondary.

By default, color values are mixed using SCSS mixin functions, derived from the -300 token value. Tint (white) is mixed in for values below 300 and shade (black) for values above.

Accessibility considerations

Mosaic follows the WCAG 2.1 AA color contast guidelines. Please make sure your text meets 4.5:1 ratio requirements, or 3:1 for larger text. Graphical elements are also required to have a contrast of 3:1.

One tool to help with color contast checking is Bootstrap's color-contrast() Sass function. It accepts background color as the first required argument; after that it accepts a dark and a light color option before testing against white and black. It will use the first color that matches the contrast ratio, default set to 4.5:1.

Amounts of Tint and Shade
Class Name Tint % Shade %
-10 90% --
-20 78% --
-50 60% --
-100 40% --
-200 15% --
-300 -- --
-400 -- 15%
-500 -- 35%

primary colors

.primary
-10
-20
-50
-100
-200
-300
-400
-500

secondary colors

.secondary
-10
-20
-50
-100
-200
-300
-400
-500

accent colors

.accent
-10
-20
-50
-100
-200
-300
-400
-500

grey colors

-10
-20
-50
-100
-200
-300
-400
-500

Special colors for all themes

success colors

.success
-10
-20
-50
-100
-200
-300
-400
-500

danger colors

.danger
-10
-20
-50
-100
-200
-300
-400
-500

warning colors

.warning
-10
-20
-50
-100
-200
-300
-400
-500

info colors

.info
-10
-20
-50
-100
-200
-300
-400
-500

notice colors

.notice
-10
-20
-50
-100
-200
-300
-400
-500

Link colors

.link-color
#814db3
:visited
  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.