Skip to content
All featuresDesign

Components & blocks

See the familiar parts of this website together, then try their existing actions and shared design controls.

These are working website examples, not a complete block gallery or an arbitrary page builder.

Components in use

The same button, email form, navigation and feature card used on the homepage.

Button

Email form

Feature card

Parts working together

This block combines existing parts. The email action continues to the website’s updates form.

Ready to fit into your page.

A heading, a form, and one clear action. The same building blocks power this website.

See your design in use

Change colors, corners and spacing on familiar parts of a page.

Design preview

One design, familiar parts.

These examples use the colors and design choices in your current browser draft.

Page example

Text, surfaces and actions

Shared colors keep related elements together.

Action example
Form example
Read-only example
Management example

Project sections

  • Pages
  • Navigation
  • Settings

Read-only examples. The management example has no connected account or actions.

Current choices

Corners
Balanced
Spacing
Comfortable
Borders
Defined
Density
Comfortable
Automatic and custom colors

Each color has a purpose. Automatic values adjust with related colors; custom values keep your choice. Use the existing color controls to change or reset a value.

Editing dark appearance

Background
#101010Automatic
Text
#F5F5F5Automatic
Main action
#EEF067Automatic
Surface
#181818Automatic
Text on surfaces
#F5F5F5Automatic
Button text
#000000Automatic
Muted surface
#232323Automatic
Secondary text
#ADADADAutomatic
Borders
#787878Automatic
Keyboard focus
#EEF067Automatic

Design

Colors

Choose a starting color. Related colors adjust together to keep the page readable.

Editing dark appearance

Automatic
Automatic
Automatic
Show more colors

These colors adjust automatically with your base colors to help maintain contrast. Customizing one stops automatic updates for that color. Contrast checks stay on.

Automatic
Automatic
Automatic
Automatic
Automatic
Automatic
Automatic
CornersBalanced
Comfortable
More design choices

Density and border width change the component examples on the Editor page. Other page areas keep their existing layout.

Your browser preview

Colors, corners and spacing are shared across this website preview. Density and border width change the examples above. Color edits apply to the appearance shown.

Recover your choices

Opening saved choices…

Save keeps your choices in this browser. Reset returns one color to automatic. Restore in the Editor returns all unsaved changes, including content and features, to your last save.

Saving and recovery
What changes together

Spacing changes the room around groups. Density changes the room inside the examples. Corners and borders shape cards, fields and actions. More design choices opens the existing density and border fields.

Check the result

These examples show a shared design source. They do not verify every installed page, management screen or email. Check real controls and keyboard focus in both appearances. Contrast feedback does not certify accessibility.

Save and recover your choices

Open the Editor to review the current draft, Save, or confirm Restore to the last save. The controls below share that same draft.