Brand tint
Change $theme-brand in scss/_variables.scss to re-shade the entire theme. Bootstrap $primary maps to this token.
$primary
$secondary
$success
$info
$warning
$danger
$light
$dark
Gradient headline — .text-gradient
Typography
Display 4
Hero headlines — serif display family
Heading 1
Heading 2
Heading 3
Heading 4
Lead paragraph — section intros and summaries.
Body text uses the theme sans-serif (or slab) stack with comfortable line height for long-form content, forms, and tables.
Secondary text for captions, metadata, and supporting copy.
Small muted text for footnotes and labels.
Buttons
Badges & alerts
Forms
Cards & surfaces
Feature card
.card-feature — icon-led highlights with hover lift.
Section tint
.section-tint — subtle alternating band.
Vivid tint
.section-tint-vivid — bolder color wash for heroes.
Navigation
Feedback & overlays
- Active item
- List item
- List item
Tables
| Name | Role | Status |
|---|---|---|
| Item one | Primary | Active |
| Item two | Secondary | Draft |
| Item three | Primary | Active |
Spacing & layout
.section-padding — consistent vertical rhythm for landing sections (5–6.5rem).
.container — Bootstrap responsive grid with theme max-widths.
.icon-circle — circular icon container for feature cards.
Shadows & elevation
.shadow-soft
.shadow-warm
.shadow-lift
Palette utilities
Modals & offcanvas
Spinners & progress
Grid & layout
Bootstrap grid + theme section tints for alternating page bands.
Color scheme
Light mode is the default. Dark mode follows the OS preference via prefers-color-scheme: dark in scss/_scheme.scss. The root sets color-scheme: light dark for native form controls.
Toggle your system appearance to preview dark surfaces, adjusted tints, and readable contrast.
Internationalization
Demo pages ship with 11 locales: English (default), Dutch, French, Spanish, Chinese, Arabic, Hindi, Bengali, Portuguese, German, and Russian.
See examples/locales/, scss/_i18n.scss, and the navbar language switcher on landing pages.