Theme
Customize the design system

Every control starts at the preset. Change one and every preview on the site follows, on this page and the next, until you reset it.

Contrast

Text against what it sits on. Below 4.5:1 fails WCAG AA for body text — the check a reviewer runs on any surface that takes a tone.

Waiting for the first preview to report its palette.

Corners

Sets all three radii at once. The individual values are under Geometry.

Brand 5

The accent seam an app actually brands itself through. Change these and you have made the decision a real `DesignTokens.graphite(...)` call makes.

Geometry 15

Square or rounded, and how heavy every line is. The radius row above the controls sets all three corners at once, because "what does square feel like" is one decision rather than three numbers.

Surfaces 17

Everything the app is painted ON — the ground behind the content (the frame paints it too), the cards over it, the well inset in a card, and the washes that show state.

Bands 10

The rail's head and the view bar beside it (one band across the top at 960 and wider), a pushed screen's bar, the compact bar and the compact nav bar — the band's fill, its rule, its hover and active faces, the resting field box on it, and the ink and accent control that sit on it. The rail's tree and its footer stay on the ground.

Text and controls 11

The ink ramp, the control outlines and the field's focus halo. Every pair the panel can break is watched by a contrast badge above.

Status 7

The three voices that mean something — danger, caution and ok — each as a foreground and a surface wash, danger with a border as well.

Data 5

The default pin head, its glyph and its halo, and the group bands. A pin's category color comes from the palette, named in the theme seed.

Map 11

The basemap's roles — land, water, parks, roads and their casings, buildings, labels — and the pending pin's gray. A raster basemap keeps its own imagery; these paint the map's plate and any kit-drawn map.

Scrollbars 6

Every scroller's bar: the thumb at rest and while hovered or dragged, the strip it rides, and the desk bar's thickness, side gap and corners. The desk half shows only while a fine pointer is attached; at touch the platform's own overlay keeps its size.

Advanced 6

Real controls that are not decisions — motion durations, the focus ring offset, the touch floor. Opens collapsed on purpose.

Take it with you

The Dart that reproduces what you are looking at. It is a real constructor call, because the configurator edits a real preset — what you copy is what an app can paste.

Wiring

Account

Install this once, above every route, where a host owns the session: every scaffold beneath it draws the signed-in person at the foot of its rail and drawer, with the session's verbs.

1
Classes
2
Knobs

Live

Real widgets, built from the real kit. Turn a knob and it rebuilds; the theme bar above applies the design system's own tokens — including anything you changed under Customize — and the device selector uses the same sizes the golden baselines gate on, so what you see here is what CI holds the widget to.

Press Focus on any preview to take it to the full window — at a desktop width that renders most devices at 1:1, which is when the widget's own controls become clickable. The bar always states the device and the scale, so a shrunk preview says it is shrunk. Esc leaves.

AppScaffoldAccountScope

No live preview — no disposition is recorded for it — that is a gap, not a decision. Its knobs are documented below.

The API

AppScaffoldAccountScope widget

THE ACCOUNT SCOPE (`Scaffold.d.ts` THE ACCOUNT ITEM, steady-core #1739): the signed-in person every AppScaffold under it draws at the foot of its rail and drawer when its own AppScaffold.footerAccount is absent. Every module draws its own scaffold, so a prop the shell cannot reach would leave the…

Full dartdoc

THE ACCOUNT SCOPE (`Scaffold.d.ts` THE ACCOUNT ITEM, steady-core #1739): the signed-in person every AppScaffold under it draws at the foot of its rail and drawer when its own AppScaffold.footerAccount is absent. Every module draws its own scaffold, so a prop the shell cannot reach would leave the item on the launcher alone. The host that owns the session installs this ONCE, above every module's routes; a module passes nothing, reads nothing and never signs out — it gets the item by being hosted. A module never installs one.

AppScaffoldAccountScopedefault constructor

Knob Type Default What it does
account * AppNavFooterAccount? — The signed-in person, or null while there is none (no row is drawn).
child * dynamic —

Types its knobs take

These are not things you choose — they are the shapes the knobs above expect. They live under this entry rather than in the navigation for exactly that reason.

AppNavFooterAccount support

THE FOOTER ACCOUNT (`NavRail.d.ts`, `Scaffold.d.ts` THE ACCOUNT ITEM, steady-core #1739) — the signed-in person at the foot of an AppNavRail's footer: how a person sees who they are signed in as and reaches the verbs about their session (Sign out first among them). Pure data, and the kit never reads…

Field Type Default What it does
detail String? null One line under the name in the opened menu's heading (an email). Never drawn on the row. Null or empty draws nothing.
items * List<AppMenuItem> — The menu's verbs, in order.
name * String — The person's name: the row's label, the collapsed row's accessible name and tooltip, the avatar's initials and the menu heading's title.

Where it lives

Class File
AppScaffoldAccountScope packages/app_widgets/lib/src/kit/surfaces/scaffold.dart