Whole screens

Showcase

Not crops and not mock-ups. Each of these is a window the toolkit rendered while this site was being built.

The demo application

Every component in one window, with a menu bar, tabs, a theme picker and a live performance footer.

The same window, right to left

The demo application under the Arabic bundle with the direction axis flipped: the menu bar, the tabs, the fields, the scrollbars and the performance footer all read from the right, and the text inside them joins and reorders as Arabic should. No screen was rewritten — direction is one inherited axis, set the way a control size is.

A form

Captions, a validated field, a choice, a switch and the actions row: the worked example from the forms guide.

A window laid out

A toolbar, a sidebar beside a content pane, and a status line: the worked example from the layout guide.

Every size step

The same five controls, five times, from XSMALL at the top down to XLARGE at the bottom. Not one of them is given a width, a font or a padding: each row is told a control size and nothing else, and the padding, the type, the corner radii and the hit targets all move together.

The 3D viewport

Physically-based materials under three lights, rendered to a linear high-dynamic-range target and composited as a 2D layer. A scroll view clips it like any other widget. Drag to orbit it, scroll to zoom.

The theme editor, as a widget you can ship

A palette is data, so editing one is a screen; this one is a module your application can embed, not a tool that lives in our repository. Drag the corner slider and the window re-skins in the same frame: every field, button and well in the picture. The report beside it measures each ink against every surface it can land on, so a palette that fails contrast fails visibly.