Design Assets Reference — Spring 2026 Study Group
Created 2026-03-10
Updated 2026-03-10
Tags
Technical reference for design assets used on the Study Group landing page (baseworks.com/smsg-spring-2026/, page ID 46997, Elementor).
Embedding Method — SVG and HTML Snippets
Section titled “Embedding Method — SVG and HTML Snippets”All SVG infographics and custom HTML snippets on the Study Group and Practice Sessions pages are embedded as inline code inside Elementor HTML widgets — not uploaded as image files.
Why inline, not <img> tags:
- The site loads Jost as its theme font. Inline SVGs inherit the page’s loaded fonts, so text renders correctly without depending on the
@importinside the SVG. - SVGs loaded via
<img>tags block all external resources (including font imports) for security reasons. Text would fall back to generic sans-serif. - Inline embedding avoids issues with Google crawlers, privacy browsers (Brave, Firefox strict mode), and ad blockers that may block
fonts.googleapis.com.
The @import url(...) inside each SVG is redundant when embedded inline but harmless — it serves as a fallback reference and ensures the SVG renders correctly when viewed standalone (e.g., in Obsidian or a browser opening the file directly).
This applies to both pages:
- Study Group:
baseworks.com/smsg-spring-2026/ - Practice Sessions:
baseworks.com/montreal-practice-sessions/
Asset Inventory
Section titled “Asset Inventory”Study Group Page
Section titled “Study Group Page”| Asset | File | Elementor Location |
|---|---|---|
| Hero badges | hero-badges-snippet.html | HTML widget in hero section |
| Hero badges (design mockup, 4 options) | hero-badges-mockup.html | Not on page — design reference only |
| Program overview infographic | program-overview-infographic.svg | HTML widget in “What to Expect” section |
Practice Sessions Page
Section titled “Practice Sessions Page”| Asset | File | Elementor Location |
|---|---|---|
| Hero badges | 02-areas/educational-programs/practice-sessions/hero-badges-snippet.html | HTML widget in hero section |
Full Page Mockups (changelog repo)
Section titled “Full Page Mockups (changelog repo)”| Page | File |
|---|---|
| Study Group | ~/Documents/baseworks-changelog/sites/baseworks.com/mockups/2026-02-26-spring-study-group-montreal.html |
| Practice Sessions | ~/Documents/baseworks-changelog/sites/baseworks.com/mockups/practice-sessions-montreal-2026.html |
Design System
Section titled “Design System”| Token | Value | Usage |
|---|---|---|
| Primary accent | #58c4cf | Teal — labels, dots, progress bars, icon backgrounds |
| Text primary | #ffffff | Headings, large numbers |
| Text secondary | #e2e8f0 | Subheadings |
| Text muted | #a0aec0 | Detail lines, metadata |
| Dark background | #1A202C | Section backgrounds, SVG standalone background |
| Panel fill | #ffffff at 0.035 opacity | Card panels |
| Panel stroke | #ffffff at 0.08 opacity | Card borders |
| Font | Jost (200, 300, 400, 500) | All text |