Theme builder Open the theme builder. When you move a slider, every component in the preview updates. Helix computes a theme from a few inputs, and the theme builder shows you the result. What the theme builder shows You enter the same inputs that derive() takes: Color: the brand, the color scheme, the contrast target, the saturation, the accent angle, and the page's color in light and in dark Shape and type: the density, the corner radius, the three faces and a stylesheet for faces of your own, the body size, and the type scale Status: how far the status colors follow the palette, and how far their hues may move Motion, separation, and material: the motion character, how surfaces are set apart, and how floating surfaces are blurred and see-through The theme builder runs the full derivation on every change. It shows a page drawn with the theme, and the stylesheet the theme generates beside it. The Color scheme field picks which half you see: light, dark, or the site's own mode. See Color modes. The builder starts from ink, the palette Helix draws with no brand color: near-black in light mode and near-white in dark. Turn on Brand color to derive the palette from a color of your own. The accent angle is measured from the brand, so it applies only with one. A page of your own color The Light page and Dark page fields give the page a color, such as a warm cream or a deep teal. They start at pure white and pure black, the page Helix draws without one. The surfaces keep the contrast with the page they keep with white or black, the grays take its tint, and every text color is solved against it. A page that no text color can reach the contrast target on is left out of the preview, and a caption under the fields says so. Color one band gives one section a color of its own, as its own theme: the figures band in the Marketing site layout, or the announcement in the Local business layout. The band is dark or light by whichever text reads better on it, and its block follows the page's in the generated stylesheet. See Color one section. Faces of your own Type a family's name into the Body face, Display face, or Mono face field and choose Use, then give the stylesheet that declares it in Font stylesheet, as Google Fonts, Adobe Fonts, or your own server serves one. The preview loads the stylesheet, and the link keeps both. The stylesheet has to allow other sites to load its fonts, as the font services do. Layouts The Layout field picks the page the theme is drawn on. Local business is a services site: an announcement over the page, a hero on a picture with a rating, three prices, the steps, the questions people ask, and where to visit. The audit The audit lists every color pair Helix computed. Each pair shows its ratio, measured against the background it is painted on, and either passes or fails its target. Its three tabs are: Contrast. The pairs that fail, or a line saying that every pair passes. Collisions. Colors too close to each other to tell apart, such as the primary color and a status color. Unverifiable. Pairs whose background is translucent over something the engine cannot know, such as a photograph or the page under a translucent material, so there is no known color to measure against. This is the cost of a translucent material, and the theme builder reports it. What the theme builder gives you The generated stylesheet is the token block as CSS, to paste into your own stylesheet: [data-theme="preview"] { --helix-color-background: #f7f2eb; … } The block holds one mode, the one the preview shows, under the scope [data-theme="preview"]. Put that attribute on the element to theme, or change the selector. Under any selector other than :root, also add data-helix-theme to the element. The block sets the seeds the stylesheet derives the chart colors, the spacing, and the corner radii from, and the stylesheet reads seeds only at :root or on an element with data-helix-theme. See Two ways to theme. For a page with both modes, derive the intent with deriveModes or helix theme build, as Derive both modes shows. The page's link holds every input you changed, so a link is the theme. To derive the theme in your own build, write the same inputs as an intent object: export const theme = { background: { light: '#f7f2eb' }, brand: '#ff6200' } Keep the intent object in your repository. The tokens are the output of a solver, and the solver improves. A theme stored as its inputs gets each improvement. A theme stored as token values stays at the version that produced it. Use the tokens only in a system that cannot run the engine. Limits of the theme builder The theme builder shows numbers and swatches. It does not show components in your product. The contrast results are a grid with three states, and a terminal or a table shows that grid more clearly than a picture. The components beside it are for checking the result. They are not a design tool.