# Theme

> Theme holds typed groups: colors, typography, spacing, radius, stroke, shadow, motion.

Page: https://fframes-kit.pages.dev/docs/basics/theme/

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

```rust
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`.

Gallery clip of `Theme`: https://fframes-kit.pages.dev/media/scenes/Theme-e744acd0.mp4

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