Everything Graphic

Graphic Elements

Buttons

You'll need to create buttons when building on a third party page builder, for emails, or when writing articles and blog posts.

The three most useful buttons are primary, secondary and link button. In some cases, you might also need a button with an icon

Sizing and Padding

The vertical padding (space above and below copy) should be equal to the font height. If you choose a 16px font height, the space above and below the text should be 8px.

The horizontal padding should be approximately 1.3 times the size of font height. In this example: 16*1.3=20

Therefore, on each size of the text, a 10px padding will be needed for good readability.

All buttons have a border roundness of 2px.

Placement and Order

Example padding

Colors and States

This section relies on your ability to change these in the builder you are using. On Google slides, the settings are very limited which made it very difficult to replicate exactly our different button states.

The most commonly available will be the hover state or clicked/pressed state.

*When hover is not available use this color for the clicked or pressed state.

Primary #5D7AFC

Hover* #7B93FB

Alternate #EF5048

Hover* #F0716B

Secondary
BG: #transparent
Border: #D0D7E7
Text: #3D3D3D

Hover* #5D7AFC

This system is meant to help create uniformity across mediums, regarding graphics and icons.

All icons are fitted to a 24x24px container for consistency. Please look at the next page for instructions if your design requires a larger icon size.

All icons available here: Link

Website icons

Platform icons

How to Size Icons

These are alternative sizes to the existing 24x24px icons. Your design projects may require different sizes for the icons available in this system; or, you may even find another icon that needs to fit into this system. If that's the case, check with the Design team for a quick edit of the style, so the icon matches with the rest.

Note that icons are not meant as large illustrative pieces. The most common use cases are beside a title on a card, on a button to support an action, or as a visual support for a list of items. Please use icons at your discretion for appropriate use cases; if unsure, ask the Design team!

The maximum size recommended:

24px for the website icons and platform icons. They can be scaled down to 16px as well.
48px, which is double the 24x24px default icon for the broader icons. These are more detailed icons, which makes them a bit more illustrative. Don’t scale these icons down.

Examples

These only cover a few use cases.

How to Find the Appropriate Size:

When creating a new design, always start with the text size. This is the most essential element of your content.
Once the text size has been selected, find an icon size that matches the size. This doesn’t have to be to the pixel. As a rule of thumb, pick the icon size closest to the text size. You’ve selected a 20px text size you could use either 1 16px icon or a 24px icon. The 48px would look a bit oversized unless used as an illustrative element as shown in the first example.
To access that icon:
- Use the Google Drive folder and find the corresponding SVG or PNG file.
- From Figma, export the icon as an SVG or PNG.

Photos

To make images fit within a system, make sure they all are subjected to the same post-production process. They should have comparable balance and contrast, as well as treatment, whether it's a color overlay or another sort of alteration.

The content of an image can be defined in two ways:

The photograph should depict a diverse range of individuals, preferably cheerful, conversing at work, or performing a direct activity connected to technology (pointing at an UX idea board).
The image may be abstract and depict an item with unique lighting, abstract forms, or particular zoomed-in details. In this context, the image should be easily identifiable as technology, no-code tooling, team cooperation, a conference, or innovation of some sort.

Note: In a user story or interview case, a portrait of the Creator should be properly formatted for the needs of the posts, and post-production should be handled by Design.

Image Treatment or Post-Production

If you're not familiar with Photoshop or want to know how to edit an image in a more accessible software such as Figma, contact Quentin from the Design team!

Examples of Image Treatments:

An overlay of the primary Thunkable Purple Color over a lower contrasted image. The picture has the same type of content as mentioned before.
A black and white photograph with strong contrast to accentuate the photograph's dramatic effect. Here are some examples.

How to Edit Photos in Figma

Figma has very simple photo editing features. When selecting an image, under the Fill section, you'll need to click on the image thumbnail.

Doing so will open settings to edit the photo. These settings will depend on the photo used. You'll find images being overexposed or underexposed, having a lot of colors or the contrast between light and dark elements being low or high; feel free to edit based on these considerations.

Note: It is easier to find an image that is close to what fits the guidelines rather than trying to heavily modify an overexposed photo

Finally, use the teardrop icon to open the blending modes. There are three main settings to use:

Multiply: generally makes things darker.
Overlay: middle ground that shows the color in the bright and dark areas.
Screen: generally makes things lighter.

Once you have selected the blending mode, change the opacity of the blending. It should look something like this.

Here is the result of a photo with a Thunkable Purple color overlay. The color overlay is using a multiply blending mode (not to be confused with the overlay blending mode) at 50% opacity.

The result is a darker image with the brand color usable as a dark background for a post.

Final Result

Illustrations

The illustrations selected or created should reflect the same values as the brand voice. Color choices should always match the design system and be applied in away that relates to the message.

In general, our illustrations should evoke playfulness or friendliness while conveying information effectively. The simpler the better. Bold and simple shapes are preferred for geometric styles; on the more illustrative end of things, less detail is always better. Simplified UI illustrations are great!

The style can be defined as follows:

Geometric but fun.
Illustrative and hand drawn but not ornate.

What the style should not be:

3D or realistic.
Gradient based.
Highly saturated.

The best way to help illustrate what our style is is to look at some examples of Dos and Don’ts!

Simple UI elements illustrated in a fun way

Illustrative with a hand drawn feel but not ornate

Line weight good, style fun and illustrative.

Simple geometric shapes and effective design

Doodle style with simple UI shapes

Shapes and lines work. Color would need to match!

Dont's

These examples are illustrating the bases you can use for your own designs. Some may have the right style but need our colors to work, and some may be included in your designs but need a bit of rework. This section is to help identify the obvious Dos and Don’ts, for more subtle nuances. However, we recommend connecting with the Design team for further explanation or assistance.

Gradients and abstract shapes should be avoided

Way too detailed and realistic-ish

Too many details, very ornate.

Menphis style with bold, very contrasty colors

Isometric style. We prefer flat and fun!

Who would use something like that!

Page updated

Report abuse