Theme

View Markdown Open in Claude Open in ChatGPT

Theme holds typed groups: colors, typography, spacing, radius, stroke, shadow, motion. Override with struct update syntax:

use fframes_kit::prelude::*;

let theme = Theme {
    colors: Colors { accent: Color::hex("#ff5500"), ..Colors::default() },
    motion: Motion { stagger: Stagger { tight: 0.04, loose: 0.1 }, ..Motion::default() },
    ..Theme::default()
};
assert_eq!(theme.typography.body.font().family, "DM Sans");

Gallery scene: Theme.

The default typography uses DM Sans: ship the font in the video’s media folder.