Forum Design System

Typography

Colors

All colors are available through CSS variables. Aside from black and white, there are 10 base colors. Each base color has two shades and two tints. There are seven tints of black (i.e., seven shades of gray). You can refer to them directly in your CSS like this:

Background Colors

There are also classes for each color to set the background color of an element:

Text Colors

Use these classes to set text color:

Rubric / Assessment Score Colors

There are aliases for colors used in the display of rubric and assessment scores. They come in dark and light shades for backgrounds, and in dark shades for text colors. The number at the end corresponds to the score value being rendered, in the range 0 - 5. You can also refer to the colors directly in CSS expressions, e.g.,var(--score-0) or var(--score-light-5).

Status

Shadows

Outline

Basic Examples

Profile Photos

Basic Example

Initials Placeholder

Object Fit

Overlapping

Shown with outline classes.

This also works if you have to nest the image for whatever reason.

Buttons

Main Buttons

Other Buttons

Primary Icon Disabled

Secondary Icon Disabled

These buttons are used as menu buttons. Icons can be SVGs or fonts. (In the example below, the first button uses an SVG while the second button uses an icon font.) There are also two color variations, light and red.

Helpers

Some button styles come with a box shadow, which could be unwanted on a dark background. In such cases, use the following helper class to remove the box shadow:

Classroom Buttons

These buttons are used in the classroom on a dark background and should take up the width of the sidebar.

Primary Icon Disabled

Secondary Disabled

Secondary Disabled

These are the classroom versions of text buttons (buttons that look like links). Note that in the examples below, the background is not part of the button.

Primary

Secondary

Grading Buttons

Links

All <a> elements will automatically have these styles applied:

Certain links, such as HCs and links within blocks of text, should always be underlined.

In some situations, you can't apply the class to the link itself (for example, when the HTML is generated from Markdown). In such cases, you can apply the following helper class on a parent element instead:

This style is meant to be used with tooltips:

Spacing

All spacing is based on a 4px grid system. Note that we override the default sizes provided by Basscss.

The preferred method is to compose these margin and padding classes together like this:

Alternatively, you can use CSS variables to set margin and padding in your custom CSS:

Components

Progress Bar

To update the progress bar, adjust the width of the bar element. Here's an example shown in jQuery:

Table

To use these table styles, add the fds-table class to the <table> element:

If you want a hover effect on table rows, use the table-hover class in addition to fds-table. Note that this should only be used on tables where the entire row is actionable.

Tabs