Design systems and fonts
A Fission design system is the source of truth for color, typography, spacing, radius, elevation, motion, chart palettes, component styles, and packaged assets.
The recommended production flow is:
Copy dsp.json and tokens.json into your app.
Add fission-design-system-codegen as a build dependency.
Generate a typed design-system Rust type in build.rs.
Install that design system on app startup.
Read view.env().theme inside widgets.
Declaring fonts
Fonts belong in the DSP asset manifest.
{
"assets": {
"fonts": [
{
"family": "Acme Sans",
"weight": 400,
"style": "normal",
"path": "fonts/AcmeSans-Regular.ttf",
"format": "ttf"
}
]
}
}
Codegen validates the paths at build time and emits PackagedFont entries using include_bytes!. Shells can then register the fonts through DesignSystem::font_faces().
impl From<SettingsHeader> for Widget {
fn from(_: SettingsHeader) -> Widget {
let (_ctx, view) = fission::build::current::<SettingsState>();
let tokens = &view.env().theme.tokens;
Text::new(TextContent::Key("settings.title".into()))
.size(tokens.typography.display_sm_size)
.line_height(
tokens.typography.display_sm_size
* tokens.typography.line_height_display,
)
.weight(tokens.typography.font_weight_bold)
.color(tokens.colors.text_primary)
.into()
}
}
Do not guess token names. Inspect the generated Rust output or the DSP and token files you copied into the app.