Orbital

Product UI and marketing surfaces

Orbital is the Unified Field design system for Leptos: tokens, shells, and product widgets. It is its own language, used for marketing pages and signed-in apps.

Why this family exists

Marketing landings and signed-in apps should share one visual language. Orbital ships AppBar, Layout, Material (Solid/Frost/Shell), typography, tables, charts, and calendars on the same tokens.

Where it lands

This site and the signed-in shell both use Orbital Layout, AppBar, and typography.
Wrap the app in OrbitalTemplate, theme with OrbitalThemeProvider, and compose Layout + AppBar shells. Use Frost material for sticky marketing shells and solid inset shells for signed-in apps. Feature crates add data tables, charts, calendars, timelines, and discussion patterns on the same token system. Requires nightly Rust and cargo-leptos ≥ 0.3.6; browse the live catalog at unified-field-dev.github.io/orbital.

In the workspace

This site and the signed-in shell both use Orbital Layout, AppBar, and typography.

Code sample

From the upstream getting-started docs — see also all code recipes on Resources.
Orbital shellOrbital
OrbitalTemplate + Card on Leptos
use leptos::prelude::*;
use orbital::OrbitalTemplate;
use uf_product::components::{Card, CardContent, CardHeader, Subtitle1};
use uf_product::primitives::Button;

#[component]
fn App() -> impl IntoView {
    view! {
        <OrbitalTemplate>
            <Card>
                <CardHeader>
                    <Subtitle1>"Account"</Subtitle1>
                </CardHeader>
                <CardContent>"Signed-in settings use the same tokens as marketing."</CardContent>
                <Button>"Save"</Button>
            </Card>
        </OrbitalTemplate>
    }
}