Skip to main content

The Welcome to Clate! example project

Welcome to Clate! is an example project that ships with Clate. It shows what you can design: vector shapes, gradients, depth, and polished controls. Open it, click around, and learn from how it is built.

The Welcome page of the Welcome to Clate! example project
The Welcome page of the example project.

Open the example​

  1. Click the home tab at the top left to open the Welcome page.
  2. Click the project card Welcome to Clate!.

The example opens in its own tab. To see a whole page, open the zoom menu and choose Zoom to Fit.

tip

Make a copy before you experiment. Right-click the Welcome to Clate! card on the Welcome page and choose Duplicate. Work in the copy and keep the original as a reference. See Projects and saving.

What is in it​

The example has two pages, listed in the Pages panel:

PageWhat it shows
WelcomeA welcome screen with a top bar, a hero panel with the title Made with Clate., four cards (Components, Gauges, Gradients, and Charts) and a row of labels.
ComponentsA tall page of building blocks. It has five sections: 01 Controls, 02 Components, 03 Gauges, 04 Gradients, and 05 Charts.

Everything in the example is built from plain shapes, text, and one logo image. You can build the same things yourself with the drawing tools.

Components page with five sections: controls, components, gauges, gradients, and charts
The Components page of the example project.

How to explore it​

  • Select pieces. Click a layer on the canvas, double-click to go deeper, or select objects in the Layers panel. Names such as Top Bar, Top Bar Shadow, Slider Track, and Gauge Arc tell you what each part is. See Selecting objects.
  • Read the settings. The property editor shows the position, size, fill, stroke, and corner radius of whatever you select. See The property editor.
  • Look at the structure. Open the Layers panel to see how frames group the parts of a control. See Pages and layers.
  • Preview it. Select a layer and click Preview to see it running. See Preview.

Things to look for​

The example uses a handful of techniques again and again. Each one below shows a snippet, where to find it in the project and where to learn more.

Depth from shadow shapes​

Clate has no blur effect. Panels, buttons, and knobs have a darker copy behind them, moved a few pixels down and to the right. Look for layers whose name ends in Shadow.

The right end of the Top Bar with its shadow visible below and to the right
The Top Bar and its shadow, a darker copy behind it.

Where: Top Bar and Top Bar Shadow on the Welcome page. Learn more: Tutorial: Build a control panel.

The Top Bar and its shadow selected together
Select a panel and its shadow together to see the offset.

Controls from a few shapes​

A slider is a track, a fill, a knob, and a knob shadow. A pill button is a rectangle with a corner radius of half its height.

The Controls panel with a switch, a slider, chips, buttons, mode buttons, radio buttons, a tab bar, and a stepper
Section 01 Controls: every control is built from plain shapes.

Where: section 01 Controls on the Components page. Learn more: Fill and stroke.

Gradients​

The four triangles that make up the Clate logo mark use a linear gradient from orange to a pale cream.

The Clate logo mark made of four gradient triangles
The logo mark: four triangles with a linear gradient.
The gradient editor of a logo triangle
The gradient of a logo triangle.

Where: the logo on the Welcome page, in the layer Clate Logo. Learn more: Fill and stroke.

Gauges and rings​

Turn on Arc for an ellipse and set Start, End, and Ratio: the ellipse becomes a ring or a gauge.

The Gauges panel with ring gauges, vertical bars, a dial, and a thermostat
Section 03 Gauges: rings and arcs drawn with ellipses.
The Arc settings of a Gauge Arc in the property editor
The Arc settings of a gauge.

Where: the Components page, for example section 03 Gauges. Look for layers named Gauge Arc. Learn more: The property editor.

Rotated tick marks​

A dial is made of small rounded rectangles that are placed on a circle and rotated in steps.

A dial made of 36 small tick marks around a circle with the value 75 percent
The dial: 36 ticks, each rotated by 10 degrees.

Where: the layer Dial on the Components page, with its layers Tick 1 to Tick 36. Learn more: Moving, resizing, and rotating.

A consistent palette​

The example uses a small set of warm dark colors, one orange accent, and a few corner radii.

Section 02 Components with raised, recessed, and active cards, chips, a progress bar, a card, and a list
Section 02 Components: the same few colors and radii everywhere.

Where: on both pages. Learn more: Tutorial: Build a control panel.

A consistent text style​

The example uses small uppercase labels with extra letter spacing, regular body text, and one larger bold size for headlines.

The hero panel with a small orange kicker, a large headline, and a gray description
A small spaced label, a large headline, and body text.

Where: on both pages. Learn more: Text and typography.

Names that describe roles​

Layers are named Card Gauges, Slider Fill, or Tick 12 instead of a type and a number.

The Layers panel showing the Slider with its layers Slider Knob, Slider Knob Shadow, Slider Fill, and Slider Track
The parts of the Slider in the Layers panel.

Where: the Layers panel. Learn more: Pages and layers.

Try it yourself​

  1. Duplicate the project (see the tip at the top of this page) and open the copy.
  2. Select a card on the Welcome page and change its fill color. See Fill and stroke.
  3. Select a control and its shadow together and move them with the arrow keys. See Moving, resizing, and rotating.
  4. Click Preview to see your change as QML, or ask the AI Assistant to describe the structure of a page.
  5. Press Ctrl + Z to undo your changes, and keep experimenting.

Next steps​