Bootstrap Design Tokens for NSO Builders

How to Read This Table

This page summarizes Bootstrap’s core design tokens and explains how they connect to the styling used in Northern Star Online (NSO) courses. You do not need to know Bootstrap or Sass to use it. Simply use the descriptions and guidance to make consistent styling choices.

  • Category: The design area the tokens belong to, such as colors, spacing, typography, or borders.
  • Token Names: The variable names Bootstrap uses internally. You do not need to write these; they show how the system is organized.
  • Description: A plain-language explanation of what the token does. For builders, this is the most important column.
  • NSO Equivalent / Guidance: Explains how to translate each Bootstrap concept into NSO styling choices in Moodle.

Bootstrap Core Design Tokens

Bootstrap uses Sass variables and CSS custom properties as its design tokens. These tokens define colors, typography, spacing, and other foundations for consistent UI. The table below summarizes the main categories.

Category Token Names Description
Brand Colors --bs-primary, --bs-secondary, --bs-success,
--bs-danger, --bs-warning, --bs-info,
--bs-light, --bs-dark		 Theme colors used for buttons, links, and key UI elements.
Grays --bs-gray-100 through --bs-gray-900 Neutral grayscale ramp for text, borders, and backgrounds.
Text and Body Colors --bs-body-color, --bs-body-bg, --bs-heading-color,
--bs-link-color, --bs-link-hover-color		 Global text and background tokens for pages and headings.
Font Families --bs-font-sans-serif, --bs-font-monospace Base fonts for UI text and code or technical content.
Font Sizes (Sass) $h1-font-size through $h6-font-size,
$font-size-base, $font-size-sm, $font-size-lg		 Typography scale that controls headings and base body size.
Line Heights --bs-body-line-height, $line-height-base Vertical rhythm and readability for long-form text.
Spacing Scale (Sass) $spacer, $spacers (0–5) Rem-based scale used by margin and padding utilities.
Gutters --bs-gutter-x, --bs-gutter-y Horizontal and vertical spacing inside the grid layout.
Borders --bs-border-width, --bs-border-color Tokens that control line weight and color for borders.
Border Radius --bs-border-radius, --bs-border-radius-sm,
--bs-border-radius-lg, --bs-border-radius-pill,
--bs-border-radius-2xl		 Corner rounding used by cards, buttons, badges, and more.
Shadows --bs-box-shadow, --bs-box-shadow-sm, --bs-box-shadow-lg Elevation and depth for cards, dropdowns, and overlays.
Breakpoints (Sass) $breakpoint-sm (576px), $breakpoint-md (768px),
$breakpoint-lg (992px), $breakpoint-xl (1200px),
$breakpoint-xxl (1400px)		 Responsive layout thresholds used in the grid and utilities.
Z-Index Layers (Sass) $zindex-dropdown, $zindex-sticky, $zindex-fixed,
$zindex-modal, $zindex-popover, $zindex-tooltip		 Stacking order for overlapping interface elements.
Component Tokens --bs-btn-padding-x, --bs-btn-padding-y,
--bs-btn-font-size, --bs-card-spacer-x, and others		 Internal tokens that tune specific components such as buttons and cards.

Bootstrap Tokens and NSO Design System

Use this as a quick reference when translating Bootstrap-based layouts into NSO course styling.

Bootstrap Concept Example Tokens NSO Equivalent / Guidance
Primary and Secondary Colors --bs-primary, --bs-secondary Map to NSO primary #2F79A2 and secondary #FF7900. Use primary for key actions or headings, secondary for accents and highlights.
Neutral Backgrounds and Borders --bs-gray-100–--bs-gray-300, --bs-border-color Use NSO soft background grays for sections, tables, and callouts. Keep borders light to support readability rather than decoration.
Typography Scale $font-size-base, $font-size-sm, $h1-font-size–$h6-font-size Use NSO heading hierarchy (topic titles, section headings, subheadings) consistently. Reserve the largest size for page or topic titles only.
Spacing Scale $spacers 0–5 When adding padding or margins in HTML, keep spacing consistent with existing NSO cards and callouts. Aim for generous white space around key content blocks.
Radius and Shadows --bs-border-radius, --bs-box-shadow Use soft rounded corners and subtle shadows for cards, not for every element. This keeps focus on important content rather than decoration.
Breakpoints and Layout $breakpoint-sm–$breakpoint-xxl When using multi-column layouts, make sure content still reads well on narrow screens. A single-column layout is safest for long-form instructional content.

When to Use Which Component

Use this as a quick guide when deciding how to present content in Moodle with the Boost Union theme.

  • Card: Use for important instructional blocks, grouped explanations, overviews, or step-by-step summaries.
  • Callout (left-accent box): Use for tips, reminders, definitions, accessibility notes, or warnings.
  • Table: Use for comparisons, step lists, rubrics, and structured information.
  • Plain content area: Use for most narrative explanations and activity directions.
  • Buttons or prominent links: Use for clear actions (for example, “Open the Assignment” or “Start the Quiz”). Use sparingly.

Micro Style Guide for NSO Moodle Pages

Headings and Structure

  • Use one main heading at the top (H2), then H3 for sections and H4 for subsections.
  • Keep headings short, clear, and descriptive.

Colors

  • Use NSO primary #2F79A2 for structural elements and key labels.
  • Use NSO secondary #FF7900 for highlights and callouts.
  • Avoid bright background colors behind long text; keep contrast high.

Spacing and Layout

  • Leave visible space between cards, callouts, tables, and images.
  • Prefer a single-column layout for readability on all devices.

Tables

  • Use tables only for data and structured content, not page layout.
  • Keep headings short and use sentence case.
  • Use zebra-striping for easier scanning.

Callouts and Cards

  • Use cards for main content chunks and key examples.
  • Use callouts for tips, definitions, and special notes.
  • Limit visual “heavy” elements so pages stay calm and accessible.

Text and Accessibility

  • Break longer content into short paragraphs and lists.
  • Use descriptive link text (“Download the rubric”) instead of “Click here.”
  • Check color contrast and avoid placing text directly on images.