Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index

Rivet Sass

Use Rivet's Sass source files in your project

Using Sass

Rivet’s CSS is built using the Sass (SCSS) CSS preprocessor.

Both the Rivet .zip download and the NPM package include the .scss source files that you can use in your Rivet project.

If you are using the Rivet npm package and have a build process in place for Sass already, you can import Rivet into your project directly:

@import "node_modules/rivet-uits/sass/rivet.scss"

Once you have imported rivet.scss into your project, you will be able to use the variables listed on this page in your own Sass stylesheets.

Typography

See the layout documentation to learn more about Rivet’s responsive type scale CSS classes.

Rivet type scale Sass variables
Variable rem px
$ts-12 .75rem 12px
$ts-14 .875rem 14px
$ts-16 1rem 16px
$ts-18 1.125rem 18px
$ts-20 1.25rem 20px
$ts-23 1.4375rem 23px
$ts-26 1.625rem 26px
$ts-29 1.8125rem 29px
$ts-32 2rem 32px
$ts-36 2.25rem 36px
$ts-41 2.5625rem 41px
$ts-46 2.875rem 46px
$ts-52 3.25rem 52px

Spacing

See the layout documentation to learn more about Rivet’s responsive spacing CSS classes.

Rivet spacing Sass variables
Variable rem px
$xxs .25rem 4px
$xs .5rem 8px
$sm 1rem 16px
$md 1.5rem 24px
$lg 2rem 32px
$xl 2.5rem 40px
$xxl 4rem 64px

Width

See the utilities documentation to learn more about Rivet’s responsive width CSS classes.

Rivet width Sass variables
Variable rem px
$width-xxs 4rem 64px
$width-xs 8rem 128px
$width-sm 12rem 192px
$width-md 16rem 256px
$width-lg 20rem 320px
$width-xl 24rem 384px
$width-xxl 32rem 512px

Color

We encourage you to modify Rivet to fit your needs, and sometimes that means adjusting the colors. We’ve included tints in Rivet to make it easier to adjust colors in a way that’s consistent with other Rivet applications and with IU’s brand guidelines.

Tints are colors mixed with different degrees of white. They offer flexibility and a greater range of color to draw attention to or indicate actions. (You’ll notice that we tint our secondary buttons to indicate a hover state, for example.)

  • Do use tints as accents in your custom components
  • Do make sure that color combinations meet WCAG 2.0 standards for contrast ratio. Use this tool to check combinations for compliance.
  • Do use tints sparingly
  • Don’t use tints to replace colors of existing components

Black

Rivet color variables
Variable Hex Sample
$color-black #333333
$color-black--050 #fafafa
$color-black--100 #eeeeee
$color-black--200 #dddddd
$color-black--300 #cccccc
$color-black--400 #aaaaaa
$color-black--500 #999999
$color-black--600 #777777
$color-black--700 #666666
$color-black--800 #555555
$color-black--900 #444444

Blue

Rivet color variables
Variable Hex Sample
$color-blue #006298
$color-blue--050 #edf1f6
$color-blue--100 #dce3ee
$color-blue--200 #b8c8dc
$color-blue--300 #95adcb
$color-blue--400 #7194ba
$color-blue--500 #497ba9
$color-blue--600 #006298
$color-blue--700 #134a71
$color-blue--800 #16324b
$color-blue--900 #121c28

Green

Rivet color variables
Variable Hex Sample
$color-green #008a28
$color-green--050 #eaf3e8
$color-green--100 #d4e8d2
$color-green--200 #aad1a7
$color-green--300 #7eb97c
$color-green--400 #50a253
$color-green--500 #008a28
$color-green--600 #116d23
$color-green--700 #16521d
$color-green--800 #153717
$color-green--900 #111f0f

Yellow

Rivet color variables
Variable Hex Sample
$color-yellow #f5bb17
$color-yellow--050 #ffeecd
$color-yellow--100 #ffdd9b
$color-yellow--200 #f5bb17
$color-yellow--300 #d6a31a
$color-yellow--400 #b58a1b
$color-yellow--500 #94721b
$color-yellow--600 #765a19
$color-yellow--700 #584416
$color-yellow--800 #3c2e13
$color-yellow--900 #221b0c

Orange

Rivet color variables
Variable Hex Sample
$color-orange #df3603
$color-orange--050 #ffece5
$color-orange--100 #ffd9cc
$color-orange--200 #ffb49a
$color-orange--300 #fa8e6b
$color-orange--400 #ef663c
$color-orange--500 #df3603
$color-orange--600 #b02f0a
$color-orange--700 #82270d
$color-orange--800 #571e0c
$color-orange--900 #2f1407

Breakpoints

Rivet breakpoint Sass variables
Variable rem px
$breakpoint-sm 3rem 480px
$breakpoint-md 46.25rem 740px
$breakpoint-lg 67.5rem 1080px
$breakpoint-xl 78.75rem 1260px
$breakpoint-xxl 87.5rem 1400px

Shadows

// Standard shadow(s)

$shadow-base: 0 1px 3px 2px rgba(0, 0, 0, .07);

On this page

    • Using Sass
    • Typography
    • Spacing
    • Width
    • Color
    • Breakpoints
    • Shadows
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University