Custom Themes › Admin › Theme Builder › Reference

Theme Reference — Color & Font Mapping

How the 8 user inputs map to lesson elements and CSS variables. All other variables are derived from these inputs.

User Inputs (8 CSS custom properties)

--lesson-body-font-family: rubikregular; /* Body font */ --lesson-heading-font-family: rubikmedium; /* Heading font */ --lesson-body-text-color: #231F20; /* Body text color */ --lesson-body-link-text-color: #231F20; /* Link text color */ --lesson-body-heading-text-color: #231F20; /* Heading text color */ --lesson-body-designaccent-color: #0167AC; /* Design accent color */ --lesson-question-submitbutton-background-color: #0167AC; /* Submit button background */ --lesson-question-submitbutton-text-color: #FFFFFF; /* Submit button text */

Body Text User input

Link Text User input

Heading Text User input

Accent User input

Button BG User input

Button Text User input

Derived Auto-calculated

Fixed Not configurable

Color Mapping

Header Block

Element	CSS Variable	Source	Derivation
Header background	`--header-color-background`	Accent	Same as design accent
Header title text (h1)	`--header-color-text`	Derived	Contrast color (black/white) from accent luminance

Body Content

Element	CSS Variable	Source	Derivation
Paragraph text	`--main-color-text`	Body Text	Direct
Hyperlinks	—	Link Text	Direct
Headings (all section titles)	—	Heading Text	Direct
Tip box text	`--tipbox-color-text`	Body Text	Direct

Callout Blocks

Element	CSS Variable	Source	Derivation
Side marker (callout-2, callout-3)	`--callout-color-marker`	Accent	Direct
Light background (callout-3)	`--callout-color-background`	Derived	Accent at 12–15% opacity
Overlay text (callout-3)	`--callout-color-overlay-text`	Derived	Contrast color from accent
Full-bleed background (callout-5)	`--callout-color-colorful-background`	Derived	Accent darkened 15%
Decorative marker (callout-5)	`--callout-color-colorful-marker3`	Derived	Accent lightened 30–45%
Text on callout-5	`--callout-color-colorful-text`	Derived	Contrast color from darkened accent
Secondary marker	`--callout-color-marker2`	Fixed	#e5e5e5

Tip Box

Element	CSS Variable	Source	Derivation
Icon tint	`--tipbox-color-icon`	Accent	Direct
Border	`--tipbox-color-border`	Accent	Direct
Background fill	`--tipbox-color-background`	Derived	Accent at 12–15% opacity

Lists & Numbered Items

Element	CSS Variable	Source	Derivation
Number/bullet color	`--list-color-numbering`	Accent	Direct
Active section indicator	`--main-color-active-section`	Accent	Direct

Accordion

Element	CSS Variable	Source	Derivation
Selected indicator	`--accordion-color-selected`	Accent	Direct
Divider line	`--accordion-color-divider`	Fixed	#cccccc

Timeline

Element	CSS Variable	Source	Derivation
Left edge border	`--timeline-color-leftedge`	Accent	Direct
Date text	`--timeline-color-date`	Accent	Direct
Structure borders	`--timeline-color-borders`	Fixed	#cccccc

Hotspots

Element	CSS Variable	Source	Derivation
Selected edge	`--hotspots-color-selectededge`	Accent	Direct
Active spot background	`--hotspots-color-activespot`	Accent	Direct
Active spot icon	`--hotspots-color-activespot-icon`	Derived	Contrast color from accent

Questions & Quizzes

Element	CSS Variable	Source	Derivation
Choice hover	`--question-color-choice-hover`	Derived	Accent at 5% opacity
Submit button background	`--question-color-submit-button-backing`	Button BG	Direct
Submit button text	`--question-color-submit-button-text`	Button Text	Direct
Submit button hover	`--question-color-submit-button-hover-backing`	Derived	Button BG darkened 8%
Submit button hover text	`--question-color-submit-button-hover-text`	Button Text	Direct
Matching left text	`--question-color-matching-text-left`	Accent	Direct
Matching right text	`--question-color-matching-text-right`	Body Text	Direct
Choice border	`--question-color-choice-border`	Fixed	#d6d6d6
Instructions text	`--question-color-choice-instructions`	Fixed	#999999
Matching block backgrounds	`--question-color-matching-block-left/right`	Fixed	White
Matching block hover	`--question-color-matching-block-left-hover`	Fixed	#f8fcfc

Image Blocks

Element	CSS Variable	Source	Derivation
Centered image shadow	—	Accent	Direct (box-shadow color)

Font Mapping

Heading Font

Body Font

Element	CSS Selectors	Font Role	Purpose
Body paragraphs	`body` (base)	Body Font	Main readable content
List items	`li, p` (inherited)	Body Font	Numbered and bulleted list content
Tip box text	`.tip-text` (inherited)	Body Font	Info/tip box content
Answer choices	`.choices` (inherited)	Body Font	Quiz answer options
Callout blocks	`.callout-2, .callout-3, .callout-5` (inherited)	Body Font	Pullquotes and statement blocks
Section headings	`h1, h2, h3, h4`	Heading Font	Structural titles and section names
Accordion headings	`.accordion-heading`	Heading Font	Expandable section labels
Question text	`.question`	Heading Font	Quiz/question prompt text