Slide Styling Guide

This document provides styling patterns and design references for deck visual slides (TSX + SVG).

Core Principles

1. Default to light backgrounds for projection/printing — subtle gradients and colored backgrounds are allowed if they improve readability
2. High contrast text (dark text #1d1d1d on light backgrounds)
3. Blue accent color (#1791e8) for emphasis and step headers
4. Prominent step questions - the main action/question is bold and colored
5. Creative visual design - use SVG capabilities to create engaging, professional slides
6. Prefer web-safe fonts (Arial, Georgia, Helvetica, Verdana, etc.) for broad compatibility

Two-Column Layout (RECOMMENDED for graphs, not mandatory)

When a slide contains a graph or coordinate plane, two-column often works well:

Why graphs often go on the right:

• Consistent visual anchoring across all step slides
• Left-to-right reading flow: read problem → see visual

However, if two-column would cause content duplication, use centered or full-width instead. A centered layout with a powerful visual is better than a two-column layout that duplicates content.

Layout Zones (All Slides — 640x360 SVG Viewport)

Every slide follows this vertical structure within the 640x360 viewport:

Color Palette

Use HEX colors directly (6-digit hex required — never rgb/rgba/named colors):

Typography Hierarchy

Step Badge:      13px bold uppercase (in pill)
Title (h1):      28px bold (primary color #1791e8)
Subtitle (p):    16px regular (dark text #1d1d1d)
Section Header:  15px bold
Body Text:       14px regular
Supporting:      13px regular
Footnotes:       10px

CFU (Check for Understanding) Box

Rendered via CfuAnswerCard component with amber background (#fef3c7), left border (#f59e0b), and "CHECK FOR UNDERSTANDING" header.

Answer Box

Rendered via CfuAnswerCard component with green background (#dcfce7), left border (#22c55e), and "ANSWER" header.

SVG Graph Constraints

CRITICAL for graph alignment:

1. Fixed viewport: SVG uses viewBox="0 0 640 360"
2. Center in container: Position within the SVG coordinate system
3. Coordinate system:
   • Origin at top-left of viewBox
   • Y-axis increases downward
   • For math graphs, transform to flip Y-axis

Graph coordinate mapping:

• Graph units should map consistently to pixels within the 640x360 viewport
• Example: if x-axis spans -10 to 10, that's 20 units
• With appropriate margins: calculate pixels per unit
• ALWAYS calculate: pixelX = marginLeft + (x - xMin) * pixelsPerUnit

Common Mistakes to Avoid

1. Non-hex colors: Use 6-digit hex colors (#1791e8, not rgb(), rgba(), or named colors)
2. Content duplication: Never say the same thing in two places on the same slide
3. Missing data-element-id: Every SVG <g> group that participates in progressive reveal needs a data-element-id
4. Missing <Animated> wrapper: Elements that appear/disappear need <Animated> wrapping
5. Wrong viewport: SVG must use 640x360, not other dimensions

Annotation Techniques

When showing steps on slides, use these techniques to highlight changes:

Remember: Keep the main visual in the SAME position across slides. Add annotations around it.

Printable Worksheet (Different from Slides)

The printable worksheet uses DIFFERENT styling:

• White background (#ffffff)
• Black text (#000000)
• Times New Roman font for print
• 8.5in x 11in page size
• @media print CSS rules
• page-break-after: always between pages