Setting up your Foundations

Table of Contents

Foundation

Foundation is where you set up the core values of your brand: colors, fonts, logos, and motion.

Set up Foundation before you start filling in your Guides. The rest of your Brand Workspace uses these values.

For example, add a brand color once in Foundation and you can then use it in your Color Palette and other parts of your Visual Guide.

This keeps the same brand value from being entered differently in different places.

What Foundation stores

Foundation has four sections:

Section	What you add
Colors	The colors your brand uses
Type	Your fonts, weights, styles, and their roles
Logos	Your approved logo files and variants
Motion	Reusable animation timings and easing

You can open Foundation from the left sidebar.

Edit your Foundation

Each section is edited and saved separately.

Open the section you want to change.
Click Edit.
Make your changes.
Click Save.

If you leave before saving, your changes will be lost.

Add your colors

Open Colors, click Edit, then click Add Color.

For each color, add:

Name: A clear name such as Brand Green.
Hex: The color value, such as #184F35.
Role: What the color is used for.

Sameness creates the Token ID automatically. You do not need to enter it yourself.

Choose the right color role

A role tells Sameness what job a color does.

Role	Use it for
Primary	Your main brand color
Secondary	A supporting brand color
Accent	Highlights and areas that need attention
Neutral	Greys, blacks, and other neutral colors
Surface	Backgrounds and surfaces
Success	Successful or completed states
Warning	Warnings and caution
Error	Errors and problems
Info	Informational states

Choose a role based on how the color is used, not how it looks.

For example, if a green is only used for success messages, choose Success, not Primary.

If none of the roles fit, choose Other and enter your own.

Add your fonts

Open Type, click Edit, then add each font your brand uses.

Each row represents one font weight and style. For example, if your brand uses Geist Regular, Geist Medium, and Geist Bold, add three rows.

For each row, add:

Family: The font family, such as Geist.
Font file: The matching font file from your Asset Library.
Weight: A number such as 400, 500, or 700.
Style: Regular or italic.
Role: Where the font is used.

Do not include the weight in the family name. Use Geist, not Geist Medium.

Choose font roles

You can choose from:

Display
Headline
Title
Body
Label
Caption
Mono

A font can have more than one role. For example, the same font may be used for both Body and Label text. If you add more than one role, put the most important role first.

Add font files

Font files come from your Asset Library.

If your font file has not been uploaded yet, upload it first and then select it from Foundation.

System fonts such as Arial or Georgia do not need a font file.

When you upload a font, Sameness reads information from the file itself, including its family, weight, and style. Check these values before saving because font files do not always contain the information you expect.

Add your logos

Open Logos, click Edit, then click Add.

For each logo, add:

Name: A clear name for the logo.
File: The logo file from your Asset Library.
Role: What type of logo it is.
Background: The background the logo is designed to appear on.

Choose a logo role

You can choose from:

Primary
Wordmark
Brandmark
Horizontal Lockup
Vertical Lockup
Partnership

Choose these carefully. Other parts of your Visual Guide use these roles to find the correct logo. For example, the Clearspace and Minimum Size pages use the logo role to know which artwork to show.

Choose a background

Choose:

Light for versions made for light backgrounds.
Dark for versions made for dark backgrounds.
Monochrome for one-color versions.

This describes the background the logo is designed for, not the color of the logo itself.

Add your motion settings

Motion stores reusable animation timings for your brand.

For example, you might decide that most transitions should take 300ms. Instead of entering 300ms every time, you can store it once as a motion setting.

For each motion setting, add:

Name: What the timing is for.
Duration: How long the animation takes in milliseconds.
Easing: The four numbers that control how the animation speeds up and slows down.
Description: When the motion should be used.

A simple starting set might look like this:

Name	Duration	Use it for
Standard	300ms	Most transitions
Enter	300ms	Elements appearing
Exit	200ms	Elements disappearing
Hover	100ms	Hover, focus, and quick feedback
Deliberate	800ms	Larger brand moments

Sameness can also add this default set for you.

How Foundation connects to your Guides

Foundation stores the values. Your Guides explain how those values should be used.

For example:

Foundation

Coral — #FF6B5C — Accent

↓

Visual Guide

Color Palette → Color Proportion → Color Combinations → Gradients

The same idea applies to your fonts, logos, and motion settings.

This is why Foundation should come first. Your Guides can build on values that have already been defined instead of entering the same information again.

Changing Foundations later

You can return to Foundation and change your brand values at any time.

Some Guide blocks store a copy of the Foundation values they use. This means changing Foundation does not always change existing blocks automatically.

For font changes, Sameness will tell you when a connected block needs to be refreshed. Open the block, review the change, and refresh it when you’re ready.

If you delete a Foundation value that a block already uses, the existing block will keep its saved copy so your published guidelines do not suddenly break. You can then replace or remove the missing value from the block.