1 Root
One foundation. Every detail.
Colour, type, language and scale give every interface a common starting point.
Colours
A palette for paper, ink and everything between.
Fonts
Type with a voice, on a shared baseline.
Theming
The same system, in light and dark.
Languages
Words that feel at home.
Formatting
Dates, numbers and money, written clearly.
Scaling
One square. Every screen.
Root establishes the common ground for the system: the square, colours, type, scale and the built-in behavior and utilities available across the system. Configure these foundations before composing a page; a change here can affect many controls at once.
What belongs here
Section titled “What belongs here”| Topic | Responsibility |
|---|---|
| Colours | Palette, inks, pastels and their dark counterparts. |
| Fonts | Typefaces, font loading and specimens. |
| Prose | Long-form writing in native HTML, drawn on the grid inside data-ds-prose. |
| Languages | Supported languages, shared words and translation lookup. |
| Formatting | Dates, times, relative time, numbers, money and lists in the current language. |
| Theming | Appearance tokens and light/dark behavior. |
| Device | Device detection and responsive scale. |
| Scaling | The phone and tablet scale, --sf, put on the page. |
| Preferences | Remembering supported user choices. |
| Pricing | The reader’s likely currency, and prices written in it. |
All built-ins are grouped here alongside the visual foundations: Languages, Formatting, Theming, Device, Preferences and Pricing. Formatting and Pricing write values; they do not implement billing or payments. These topics support interface controls rather than being controls themselves. The language module belongs here; the visible language choice, a Cycle, belongs in Core. The docs group runtime foundations here even when their implementation lives in DS1/0-face/; this does not move their source or change import paths.
How the layers fit
Section titled “How the layers fit”Core uses these foundations for individual controls. Unit composes controls, and Page arranges those compositions. Application state, permissions and persistence stay with the application. Internal component visibility is separate from these layers: an internal control does not become a Root topic merely because it is hidden from the catalogue.
Use the foundations
Section titled “Use the foundations”Load the component library as shown in Use with HTML. Its stylesheet supplies fonts, tokens and shared measures; its JavaScript registers the Lit elements.
Customize public --ds-* tokens on the root or a scoped surface. My libraries saves and publishes those choices. Keep content, application data and routing in your page.